// Molara — Marketing home (1440×1600 long-scroll snippet)

const dentalTreatments = [
  { k: 'emergency', label: 'Emergency dental consultation 24/7', icon: 'shield' },
  { k: 'toothache', label: 'All types of tooth ache', icon: 'tooth' },
  { k: 'kids',      label: 'Kids tooth care', icon: 'baby' },
  { k: 'aligners',  label: 'Aligners and braces opinion', icon: 'settings' },
  { k: 'cosmetic',  label: 'Teeth whitening and cosmetic dental care', icon: 'sparkle' },
];

function MarketingHome({ tone = 'warm', hideNav = false }) {
  const { user, signedIn } = useAuth();
  useDoctorReviews();
  const warm = tone === 'warm';
  const [active, setActive] = React.useState('how');
  const scrollRef = React.useRef(null);
  const presence = usePresence();
  const onlineDoctors = DOCTORS.filter((d) => presence.has(d.id));
  const go = (id) => {
    if (id === 'find') {
      window.navigate && window.navigate('/find');
      return;
    }
    if (id === 'emergency') {
      window.startEmergencyConsult ? window.startEmergencyConsult(user) : (window.requireAuth && window.requireAuth('/pay?emergency=1'));
      return;
    }
    setActive(id);
    const root = scrollRef.current;
    const el = root && root.querySelector(`[data-sec="${id}"]`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };
  const tabs = [
    ['find', 'Find a dentist'],
    ['emergency', '24/7 emergency consult'],
    ['how', 'How it works'],
    ['treat', 'What we treat'],
    ['network', 'Our dentists'],
  ];
  const navButtonStyle = (k) => {
    const on = active === k;
    const emergency = k === 'emergency';
    return {
      color: on || emergency ? '#eafcff' : 'rgba(224,246,255,.72)',
      background: emergency
        ? 'rgba(125,231,255,.18)'
        : on
          ? 'rgba(125,231,255,.12)'
          : 'transparent',
      border: emergency ? '1px solid rgba(125,231,255,.32)' : '1px solid transparent',
      padding: '8px 13px',
      borderRadius: 999,
      fontWeight: emergency ? 600 : on ? 500 : 450,
      fontFamily: 'var(--sans)',
      fontSize: 14,
      cursor: 'pointer',
      boxShadow: emergency ? '0 0 22px rgba(95,211,255,.16)' : 'none',
    };
  };
  return (
    <div ref={scrollRef} className="ml-root" style={{ height: '100%', overflowY: 'auto', background: 'var(--paper)' }}>
      {/* Nav */}
      {!hideNav && (
      <nav style={{
        display: 'flex',
        alignItems: 'center',
        padding: '18px 56px',
        borderBottom: '1px solid rgba(160,225,255,.14)',
        background: 'rgba(4,14,28,.82)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
        position: 'sticky',
        top: 0,
        zIndex: 10,
      }}>
        <div onClick={() => window.navigate && window.navigate('/')} style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#eafcff', cursor: 'pointer' }}>
          <div style={{
            width: 26,
            height: 26,
            borderRadius: 8,
            display: 'grid',
            placeItems: 'center',
            background: 'linear-gradient(135deg, rgba(175,248,255,.95), rgba(51,174,225,.9))',
            color: '#06101f',
            boxShadow: '0 0 20px rgba(95,211,255,.28)',
          }}>
            <I.pulse size={14}/>
          </div>
          <div style={{ fontFamily: 'var(--display)', fontSize: 20, fontWeight: 600 }}>molara</div>
        </div>
        <div style={{ display: 'flex', gap: 4, marginLeft: 56, fontSize: 14 }}>
          {tabs.map(([k, label]) => (
            <button key={k} onClick={() => go(k)}
              style={navButtonStyle(k)}>
              {label}
            </button>
          ))}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 10, alignItems: 'center' }}>
          {signedIn ? (
            <>
              <div onClick={() => window.navigate && window.navigate('/profile')}
                title={user?.name}
                className="ml-avatar"
                style={{ width: 38, height: 38, borderRadius: '50%', fontSize: 13, cursor: 'pointer', border: '2px solid var(--blue-soft)' }}>
                {user?.initials || 'PT'}
              </div>
            </>
          ) : (
            <>
              <button className="ml-btn ml-btn--link" style={{ fontSize: 14 }}
                onClick={() => window.openGate ? window.openGate('/', 'signin') : window.navigate('/signin')}>Sign in</button>
            </>
          )}
        </div>
      </nav>
      )}

      {/* Hero */}
      <section data-sec="find" style={{
        position: 'relative',
        minHeight: 700,
        padding: '94px 56px 86px',
        display: 'grid',
        gridTemplateColumns: '1fr 1.05fr',
        gap: 70,
        alignItems: 'center',
        color: '#eafcff',
        overflow: 'hidden',
        background:
          'radial-gradient(ellipse 70% 58% at 72% 45%, rgba(46,160,214,.36), rgba(7,19,37,.65) 42%, rgba(3,8,18,.96) 78%), linear-gradient(135deg, #07111f, #020611)',
      }}>
        <div style={{
          position: 'absolute',
          inset: 24,
          border: '1px solid rgba(151,226,255,.12)',
          borderRadius: 28,
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'absolute', left: 56, right: 56, bottom: 36, height: 1, background: 'linear-gradient(90deg, transparent, rgba(125,231,255,.34), transparent)', pointerEvents: 'none' }}/>

        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 24 }}>
            <span style={{
              display: 'inline-flex',
              alignItems: 'center',
              gap: 7,
              padding: '6px 11px',
              borderRadius: 999,
              border: '1px solid rgba(125,231,255,.22)',
              background: 'rgba(125,231,255,.08)',
              color: '#aef5ff',
              fontFamily: 'var(--mono)',
              fontSize: 10.5,
              textTransform: 'uppercase',
            }}><span className="ml-live"/> Licensed dentists online</span>
            <span style={{
              display: 'inline-flex',
              padding: '6px 11px',
              borderRadius: 999,
              border: '1px solid rgba(255,255,255,.12)',
              background: 'rgba(255,255,255,.04)',
              color: 'rgba(234,252,255,.72)',
              fontSize: 12,
            }}>Encrypted · SOC 2</span>
          </div>
          <h1 style={{ fontSize: 78, lineHeight: 0.98, letterSpacing: 0, marginBottom: 22, color: '#f4fdff', fontWeight: 500 }}>
            {warm
              ? <>The dentist,<br/>on your schedule.<br/><span style={{ fontStyle: 'italic', color: '#7eeaff' }}>Right from home.</span></>
              : <>Clinical teledentistry,<br/>delivered over<br/><span style={{ color: '#7eeaff' }}>secure video.</span></>}
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(234,252,255,.72)', maxWidth: 520, marginBottom: 32, lineHeight: 1.55 }}>
            {warm
              ? 'Talk to a licensed dentist in minutes — from midnight tooth ache to braces opinions and smile care. No waiting rooms, no guesswork.'
              : 'Verified dental specialists across urgent care, tooth pain, kids dentistry, aligners, braces, whitening, and cosmetic dental care.'}
          </p>

          <div style={{ display: 'flex', gap: 14, marginTop: 18, fontSize: 13, color: 'rgba(234,252,255,.64)' }}>
            <span style={marketingInline}><I.check size={13}/> ₹499 if self-pay</span>
            <span style={marketingInline}><I.check size={13}/> Rx & referrals included</span>
          </div>
        </div>

        {/* Hero visual */}
        <div style={{ position: 'relative', height: 560, zIndex: 1 }}>
          <ToothHero3D/>
        </div>
      </section>

      {/* How it works */}
      <section data-sec="how" style={{ padding: '88px 56px' }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div className="ml-label" style={{ marginBottom: 10 }}>HOW IT WORKS</div>
            <h2 style={{ fontSize: 46 }}>From tooth trouble to relief, <span style={{ fontStyle: 'italic', color: 'var(--blue-deep)' }}>in three steps.</span></h2>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24 }}>
          {[
            { n: '01', t: 'Tell us what hurts', d: warm ? 'Share the dental issue and add a mouth photo if it helps. We’ll match you to the right dentist.' : 'Structured dental intake with optional images and urgency triage.' },
            { n: '02', t: 'Meet a dentist online', d: warm ? 'Face-to-face with a real dentist for pain, kids care, braces opinions, whitening, or cosmetic questions.' : 'Encrypted video, audio, or chat consult. Dentist reviews symptoms and photos during the visit.' },
            { n: '03', t: 'Leave with a dental plan', d: warm ? 'Get next steps, medication guidance when appropriate, and an in-clinic referral if hands-on care is needed.' : 'Dental summary, care instructions, prescriptions when appropriate, and referral routing.' },
          ].map((s) => (
            <div key={s.n} style={{ borderTop: '1px solid var(--ink)', paddingTop: 20 }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink-3)' }}>{s.n}</div>
              <h3 style={{ fontSize: 26, margin: '12px 0 10px' }}>{s.t}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* What we treat */}
      <section data-sec="treat" style={{ padding: '0 56px 96px' }}>
        <div style={{ background: 'var(--blue-tint)', borderRadius: 20, padding: '64px 56px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 56 }}>
          <div>
            <div className="ml-label" style={{ marginBottom: 10 }}>WHAT WE TREAT</div>
            <h2 style={{ fontSize: 44, marginBottom: 16 }}>Many dental questions can start online.</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, maxWidth: 380, marginBottom: 22 }}>
              {warm ? 'If you need a chair-side procedure, we’ll say so clearly and help you get the right next appointment.' : 'Dental triage and treatment planning across urgent care, tooth pain, kids dentistry, orthodontic opinion, whitening, and cosmetic care.'}
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2,1fr)', gap: 10 }}>
            {dentalTreatments.map((s) => {
              const Icon = I[s.icon] || I.tooth;
              return (
              <div key={s.k} className="ml-card" style={{ padding: 18, display: 'flex', alignItems: 'center', gap: 14, borderRadius: 12 }}>
                <div style={{ width: 36, height: 36, borderRadius: 8, background: 'var(--blue-soft)', color: 'var(--blue-deep)', display: 'grid', placeItems: 'center' }}>
                  <Icon />
                </div>
                <div style={{ fontWeight: 500 }}>{s.label}</div>
              </div>
            );})}
          </div>
        </div>
      </section>

      {/* Meet our dentists */}
      <section data-sec="network" style={{ padding: '0 56px 96px' }}>
        <div style={{ display: 'flex', alignItems: 'end', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <div className="ml-label" style={{ marginBottom: 10 }}>THE NETWORK</div>
            <h2 style={{ fontSize: 46 }}>{onlineDoctors.length} trusted dentists, online now.</h2>
          </div>
          <button onClick={() => window.navigate && window.navigate('/find')} className="ml-btn ml-btn--ghost">Browse all dentists <I.arrowR size={14}/></button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 20 }}>
          {onlineDoctors.slice(0, 6).map((d) => (
            <div key={d.id} onClick={() => window.navigate && window.navigate(`/doctor/${d.id}`)} className="ml-card" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }}>
              <div className="ml-avatar" style={{ height: 160, fontSize: 56, borderRadius: 0,
                background: TONE_BG[d.tone], color: TONE_FG[d.tone] }}>{d.avatar}</div>
              <div style={{ padding: 20 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <span style={{ fontFamily: 'var(--display)', fontSize: 19, fontWeight: 500 }}>{d.n}</span>
                  <span className="ml-pill ml-pill--ghost" style={{ fontFamily: 'var(--mono)', fontSize: 10 }}>{d.creds}</span>
                </div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{d.spec} · {d.y} yrs</div>
                <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>{d.loc}</div>
                <div style={{ display: 'flex', gap: 10, marginTop: 14, fontSize: 12, color: 'var(--ink-3)', alignItems: 'center' }}>
                  <span style={marketingInline}><I.star size={11}/> {doctorStats(d).rating}</span>
                  <span style={{ marginLeft: 'auto' }} className={'ml-pill ' + (presence.has(d.id) ? 'ml-pill--mint' : 'ml-pill--ghost')}>
                    {presence.has(d.id) ? <><span className="ml-live"/> Online</> : 'Available later'}
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Security strip */}
      <section data-sec="security" style={{ padding: '48px 56px', background: 'var(--ink)', color: '#fff', display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56, alignItems: 'center' }}>
        <h2 style={{ fontSize: 40, color: '#fff' }}>Your dental<br/>record is <span style={{ fontStyle: 'italic', color: 'oklch(80% 0.1 240)' }}>yours.</span></h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24, fontSize: 14, color: 'oklch(80% 0.02 240)' }}>
          {[
            ['HIPAA-compliant', 'End-to-end encrypted video and records. SOC 2 Type II audited annually.'],
            ['No data resale', 'We never sell your dental data. Ever. Not to insurers, not to advertisers.'],
            ['Portable records', 'Export your dental visits, Rx, photos, and referrals anytime.'],
          ].map(([t, d]) => (
            <div key={t}>
              <I.shield size={20} style={{ marginBottom: 10, color: 'oklch(80% 0.1 240)' }}/>
              <div style={{ color: '#fff', fontWeight: 500, marginBottom: 6 }}>{t}</div>
              <div>{d}</div>
            </div>
          ))}
        </div>
      </section>
      <footer style={{ padding: '26px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13, color: 'var(--ink-3)', background: '#fff' }}>
        <span>© Molara 2026</span>
        <button onClick={() => window.navigate && window.navigate('/doctor-signin')} className="ml-btn ml-btn--link" style={{ fontSize: 13, padding: 0 }}>
          Doctor login <I.arrowR size={12}/>
        </button>
      </footer>
    </div>
  );
}

const link = { color: 'var(--ink-2)', textDecoration: 'none', cursor: 'pointer', fontWeight: 450 };
const marketingInline = { display: 'inline-flex', alignItems: 'center', gap: 6 };

Object.assign(window, { MarketingHome });