function Hero({ onBook, variant = 'editorial', accent }) {
  if (variant === 'split') return <HeroSplit onBook={onBook} accent={accent} />;
  if (variant === 'centered') return <HeroCentered onBook={onBook} accent={accent} />;
  return <HeroEditorial onBook={onBook} accent={accent} />;
}

function HeroEditorial({ onBook, accent }) {
  // Quiet editorial: large serif, subtle credentials, no big photo. Gradient-orange/teal accent.
  const isTeal = accent === 'teal';
  return (
    <section id="top" style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: '88px 24px 72px',
      position: 'relative',
    }}>
      <div className="overline" style={{ marginBottom: 22, color: isTeal ? 'var(--teal-600)' : 'var(--lavender-600)' }}>
        Since 1962 · A Desai family practice · Surat
      </div>
      <h1 style={{
        font: 'var(--t-display-1)',
        color: 'var(--violet-700)',
        letterSpacing: '-0.015em',
        margin: '0 0 28px',
        textWrap: 'balance',
        maxWidth: 980,
      }}>
        Compassionate care for{' '}
        <span style={{ fontStyle: 'italic', color: isTeal ? 'var(--teal-600)' : 'var(--lavender-500)' }}>mind</span>,{' '}
        <span style={{ fontStyle: 'italic', color: isTeal ? 'var(--teal-600)' : 'var(--lavender-500)' }}>brain</span>{' '}&amp;{' '}
        <span style={{ fontStyle: 'italic', color: 'var(--teal-600)' }}>vision</span>.
      </h1>
      <p style={{
        font: 'var(--t-body-lg)',
        color: 'var(--ink-700)',
        maxWidth: 640,
        margin: '0 0 36px',
      }}>
        Six decades of family practice across Psychiatry, Neurology and Ophthalmology — with rTMS, polysomnography and day-care surgical facilities under one roof in South Gujarat.
      </p>
      <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button onClick={onBook} accent={accent}>Book an Appointment</Button>
        <Link to="specialties" style={{ font: 'var(--t-button)', color: 'var(--violet-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '14px 18px' }}>
          Explore specialties <ArrowRight size={14}/>
        </Link>
      </div>

      {/* Marker rule + footnote stats */}
      <div className="hero-stats" style={{
        marginTop: 80,
        display: 'grid',
        gridTemplateColumns: 'repeat(4, 1fr)',
        gap: 24,
        borderTop: '1px solid var(--hairline-cool)',
        paddingTop: 28,
      }}>
        {[
          ['1962', 'Year founded'],
          ['3', 'Clinics in Gujarat'],
          ['5', 'Specialties'],
          ['rTMS', 'In-house since 2019'],
        ].map(([n, l]) => (
          <div key={l}>
            <div style={{ font: 'var(--t-h1)', fontFamily: 'var(--font-display)', color: 'var(--violet-700)', fontFeatureSettings: '"tnum"', lineHeight: 1 }}>{n}</div>
            <div style={{ font: 'var(--t-body-sm)', color: 'var(--fg-2)', marginTop: 8 }}>{l}</div>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 760px) {
          .hero-stats { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </section>
  );
}

function HeroSplit({ onBook, accent }) {
  return (
    <section id="top" style={{
      maxWidth: 'var(--container)', margin: '0 auto',
      padding: '72px 24px 56px',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 56, alignItems: 'center',
    }} className="hero-split">
      <div>
        <div className="overline" style={{ marginBottom: 18 }}>Since 1962 · South Gujarat</div>
        <h1 style={{ font: 'var(--t-display-1)', color: 'var(--violet-700)', margin: '0 0 22px', textWrap: 'balance' }}>
          Compassionate care for mind, brain &amp; vision.
        </h1>
        <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 520, margin: '0 0 28px' }}>
          Six decades of family practice — Psychiatry, Neurology and Ophthalmology — with advanced rTMS, polysomnography and day-care surgery.
        </p>
        <div style={{ display: 'flex', gap: 14, alignItems: 'center', flexWrap: 'wrap' }}>
          <Button onClick={onBook} accent={accent}>Book an Appointment</Button>
          <Link to="specialties" style={{ font: 'var(--t-button)', color: 'var(--violet-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            Explore specialties <ArrowRight size={14}/>
          </Link>
        </div>
      </div>
      <div style={{
        position: 'relative', aspectRatio: '4/5',
        borderRadius: 'var(--radius-xl)', overflow: 'hidden',
        boxShadow: 'var(--shadow-lg)',
      }}>
        <img src="assets/clinic-valsad.png" alt="Prashanti Super Speciality Clinic — Valsad"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
      </div>
      <style>{`
        @media (max-width: 880px) {
          .hero-split { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

function HeroCentered({ onBook, accent }) {
  return (
    <section id="top" style={{
      maxWidth: 'var(--container-narrow)', margin: '0 auto',
      padding: '96px 24px 64px',
      textAlign: 'center',
    }}>
      <div className="overline" style={{ marginBottom: 18 }}>Since 1962 · A Desai family practice</div>
      <h1 style={{ font: 'var(--t-display-1)', color: 'var(--violet-700)', margin: '0 auto 24px', textWrap: 'balance' }}>
        Compassionate care for{' '}
        <span style={{ fontStyle: 'italic' }}>mind</span>,{' '}
        <span style={{ fontStyle: 'italic' }}>brain</span> &amp;{' '}
        <span style={{ fontStyle: 'italic' }}>vision</span>.
      </h1>
      <p style={{ font: 'var(--t-body-lg)', color: 'var(--ink-700)', maxWidth: 640, margin: '0 auto 32px' }}>
        Six decades of family practice across Psychiatry, Neurology and Ophthalmology — with advanced rTMS, polysomnography and day-care surgical facilities under one roof.
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <Button onClick={onBook} accent={accent}>Book an Appointment</Button>
        <Link to="specialties" style={{ font: 'var(--t-button)', color: 'var(--violet-700)', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6, padding: '14px 18px' }}>
          Explore specialties <ArrowRight size={14}/>
        </Link>
      </div>
    </section>
  );
}

window.Hero = Hero;