// Shared landing-page shell. Each page defines window.LP (content config) and renders <LandingPage />.
const { useState: useLPState, useRef: useLPRef } = React;

const LP_TEAM = [
  { name: 'Nicholas Delaney', suffix: 'MSN, APRN, FNP-C, ENP-C, ABAAHP', role: 'Founder · Medical Director', photo: '../NicDelaneyHeadshot.png',
    bio: "Triple board-certified in family practice, emergency medicine, and anti-aging. Nicholas designs every protocol around the individual patient, drawing on a decade of emergency and trauma medicine and a functional approach that looks at hormones, metabolism, and lifestyle as one system.",
    creds: ['FNP-C · Family Practice', 'ENP-C · Emergency', 'ABAAHP · Anti-Aging'] },
  { name: 'Angela Delaney', suffix: 'BSN, RN', role: "Women's Health · Clinical Education", photo: '../angie.png',
    bio: "Two decades of nursing across neurosurgery, labor & delivery, and women's health. Angela leads patient education and the relational side of care, translating complex protocols into something patients can actually live.",
    creds: ['RN, BSN', "Women's Health", 'Patient Education'] },
  { name: 'Jenna Anan', suffix: 'BS Nutrition', role: 'Nutrition · Movement · Integration', photo: '../jenna1.png',
    bio: "Nutrition and functional movement specialist. Jenna builds the personalized nutrition and movement plans that support each protocol, and the everyday habits that help results last.",
    creds: ['BS Nutrition', 'Functional Movement'] },
];

const LP_PILLARS = [
  { title: 'Labs & hormones', desc: 'We start with data. Your protocol is built from your results, not a template.' },
  { title: 'Nutrition', desc: 'Personalized guidance that fits how you actually eat, shop, and live.' },
  { title: 'Sleep & stress', desc: 'Recovery, cortisol, and nervous-system load shape every other result.' },
  { title: 'Movement & strength', desc: 'Training guidance that protects muscle, bone, and metabolic health.' },
];

const scrollToQuizLP = () => {
  const el = document.getElementById('quiz');
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 16, behavior: 'smooth' });
};

const LP_IMG = () => window.IMAGERY || {};

function LPBand({ src, eyebrow, title, height }) {
  const PI = window.ParallaxImage;
  return (
    <section className="parallax-band lp-band" style={{ height: height || '56vh' }}>
      {PI ? <PI src={src} speed={0.35} scale={1.25} overlay={0.7} /> : null}
      <div className="parallax-band-text reveal">
        {eyebrow && <div className="parallax-band-eyebrow">{eyebrow}</div>}
        <div className="parallax-band-title">{title}</div>
      </div>
    </section>
  );
}

function LandingPage() {
  const c = window.LP;
  const img = LP_IMG();
  if (window.useScrollReveal) window.useScrollReveal();
  const bands = c.bands || [];
  const b1 = bands[0] || { eyebrow: 'The Eden philosophy', title: <>Measure deeply.<br/><em>Intervene precisely.</em></> };
  const b2 = bands[1] || { eyebrow: 'Evidence-based · Patient-centered', title: <>The precision of science,<br/>the <em>warmth of a practice</em> built small.</> };
  const imgs = c.images || {};
  return (
    <article className={`lp ${c.light ? 'lp-light' : ''}`}>
      <LPBrandBar program={c.programName} />
      <LPHero hero={c.hero} bg={imgs.hero || img.hero2} />
      <LPStats />
      <LPCompare cfg={c.compare} />
      <LPBand src={imgs.band1 || img.process} eyebrow={b1.eyebrow} title={b1.title} />
      <LPStart cfg={c.start} />
      <LPIncludes cfg={c.includes} />
      <LPApproach lede={c.approachLede} />
      <LPBand src={imgs.band2 || img.science} eyebrow={b2.eyebrow} title={b2.title} height="50vh" />
      <LPWho cfg={c.who} />
      <LPTeam extra={c.extraTeam} />
      <LPFaq faqs={c.faqs} />
      <section className="lp-quiz-section lp-tone-a lp-quiz-glow" id="quiz">
        <div className="lp-container-narrow">
          <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto', maxWidth: '720px' }}>
            <div className="lp-eyebrow" style={{ display: 'inline-flex' }}>Free clinical assessment</div>
            <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)' }}>See if the program is <em>right for you</em>.</h2>
            <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto', textAlign: 'center' }}>
              About three minutes. We'll review your responses personally and reach out within 1–2 business days with honest next steps.
            </p>
          </div>
          <Quiz />
        </div>
      </section>
      <LPLocal text={c.localText} bg={imgs.local || img.finalCta} />
      <LPDisclaimer text={c.disclaimer} />
    </article>
  );
}

function LPBrandBar({ program }) {
  return (
    <div className="lp-brand">
      <div className="lp-brand-left">
        <img className="lp-brand-logo" src="../assets/eden-logo-full.png" alt="Eden Wellness" />
        <span className="lp-brand-divider">·</span>
        <span className="lp-brand-program">{program}</span>
      </div>
      <a href="#quiz" onClick={(e) => { e.preventDefault(); scrollToQuizLP(); }} className="lp-brand-cta">See if you qualify</a>
    </div>
  );
}

function LPHero({ hero, bg }) {
  const [missing, setMissing] = useLPState(false);
  const KB = window.KenBurnsImage, DP = window.DriftingParticles;
  return (
    <section className="lp-hero lp-hero-split lp-hero-media">
      {KB && bg ? <KB src={bg} opacity={0.6} /> : null}
      <div className="hero-scrim-deep" />
      {DP ? <DP count={16} /> : null}
      <div className="lp-container lp-hero-grid">
        <div className="lp-hero-text reveal">
          <div className="lp-eyebrow lp-hero-eyebrow">{hero.eyebrow}</div>
          <h1>{hero.h1}</h1>
          <p className="lp-hero-sub">{hero.sub}</p>
          <div className="lp-hero-actions">
            <a href="#quiz" onClick={(e) => { e.preventDefault(); scrollToQuizLP(); }} className="lp-btn lp-btn-primary">
              See if you qualify <span className="lp-btn-arrow">→</span>
            </a>
            <span className="lp-hero-trust">Free assessment · ~3 minutes · No commitment</span>
          </div>
        </div>
        <div className="lp-hero-photo reveal">
          {!missing && <img src="hero.jpg" alt={hero.photoAlt} onError={() => setMissing(true)} />}
          {missing && <div className="lp-hero-photo-empty"><span>Photo</span><span>Upload hero.jpg to this page's folder</span></div>}
        </div>
      </div>
    </section>
  );
}

function LPStats() {
  return (
    <section className="lp-stats">
      <div className="lp-stat"><div className="lp-stat-num">1:1</div><div className="lp-stat-label">Practitioner-led care, personally calibrated</div></div>
      <div className="lp-stat lp-stat-feature"><div className="lp-stat-num lp-stat-num-text">Labs first</div><div className="lp-stat-label">Assessment and labs before any monthly commitment</div></div>
      <div className="lp-stat"><div className="lp-stat-num lp-stat-num-text">From $199</div><div className="lp-stat-label">Per month · clear pricing, no surprise add-ons</div></div>
    </section>
  );
}

function LPCompare({ cfg }) {
  return (
    <section className="lp-compare lp-compare-a2 lp-tone-b">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto', maxWidth: '760px' }}>
          <div className="lp-eyebrow" style={{ display: 'inline-flex' }}>{cfg.eyebrow}</div>
          <h2>{cfg.h2}</h2>
          <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto' }}>{cfg.lede}</p>
        </div>
        <div className="lp-compare-table reveal">
          <div className="lp-compare-head">
            <div className="lp-compare-cell lp-compare-row-head"></div>
            <div className="lp-compare-cell lp-compare-eden-head"><span className="lp-compare-mark eden">●</span> {cfg.edenHead}</div>
            <div className="lp-compare-cell lp-compare-mill-head"><span className="lp-compare-mark mill">○</span> {cfg.millHead}</div>
          </div>
          {cfg.rows.map((r, i) => (
            <div className="lp-compare-row" key={i}>
              <div className="lp-compare-cell lp-compare-row-label">{r[0]}</div>
              <div className="lp-compare-cell lp-compare-eden" data-label={cfg.edenHead}><span className="lp-compare-check">✓</span><span>{r[1]}</span></div>
              <div className="lp-compare-cell lp-compare-mill" data-label={cfg.millHead}><span className="lp-compare-x">–</span><span>{r[2]}</span></div>
            </div>
          ))}
        </div>
        <div className="lp-compare-footer">
          {cfg.footer}
          <span className="lp-compare-footer-sub">{cfg.footerSub}</span>
        </div>
      </div>
    </section>
  );
}

function LPStart({ cfg }) {
  return (
    <section className="lp-section b-section lp-start lp-tone-a">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">How it starts</div>
          <h2>Assessment first. <em>Commitment second.</em></h2>
          <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto' }}>{cfg.lede}</p>
        </div>
        <div className="lp-start-steps reveal-stagger">
          {cfg.steps.map((s, i) => (
            <div className="lp-start-step" key={i}>
              <div className="lp-include-num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="lp-include-title">{s.title}</h3>
              <p className="lp-include-desc">{s.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LPIncludes({ cfg }) {
  return (
    <section className="lp-section b-section lp-tone-b">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">Your monthly program</div>
          <h2>{cfg.h2}</h2>
          <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto' }}>{cfg.lede}</p>
        </div>
        <div className="lp-includes reveal-stagger">
          {cfg.items.map((item, i) => (
            <div className="lp-include-item" key={i}>
              <div className="lp-include-num">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="lp-include-title">{item.title}</h3>
              <p className="lp-include-desc">{item.desc}</p>
              {item.value && <div className="lp-include-value">{item.value}</div>}
            </div>
          ))}
        </div>
        <div className="lp-pricing reveal">
          <div className="lp-pricing-label">Monthly programs</div>
          <div className="lp-pricing-tiers">
            {['$199', '$299', '$499'].map(p => <div className="lp-pricing-tier" key={p}><span>{p}</span><small>/ month</small></div>)}
          </div>
          <p className="lp-pricing-note">Your program level depends on what your labs show and which therapies are clinically appropriate. We'll walk through it with you after your assessment, before you commit to anything.</p>
        </div>
      </div>
    </section>
  );
}

function LPApproach({ lede }) {
  return (
    <section className="lp-section b-section lp-approach lp-tone-a">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">The Eden approach</div>
          <h2>Treating the <em>whole person</em>, not one number.</h2>
          <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto' }}>{lede}</p>
        </div>
        <div className="lp-pillars reveal-stagger">
          {LP_PILLARS.map(p => (
            <div className="lp-pillar" key={p.title}>
              <h3>{p.title}</h3>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LPWho({ cfg }) {
  return (
    <section className="lp-audience lp-tone-b">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">Who it's for</div>
          <h2>{cfg.h2}</h2>
        </div>
        <div className="lp-audience-grid reveal-stagger">
          <div className="lp-audience-card"><h3>This is for you if you…</h3><ul>{cfg.yes.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
          <div className="lp-audience-card not-for"><h3>This isn't for you if you…</h3><ul>{cfg.no.map((t, i) => <li key={i}>{t}</li>)}</ul></div>
        </div>
      </div>
    </section>
  );
}

const LP_SHAWNA = { name: 'Shawna Johnston', suffix: 'APRN, FNP', role: "Women's Health · Hormone Therapy", photo: '../shawna.jpeg',
  bio: "Nurse practitioner specializing in bioidentical hormone therapy and comprehensive women's health. Shawna brings a background in emergency, family, and acute care to partnering with women through perimenopause, menopause, and beyond, with individualized plans for hormonal balance and long-term well-being.",
  creds: ['APRN, FNP', 'Bioidentical HRT', "Women's Health"] };
window.LP_SHAWNA = LP_SHAWNA;

function LPTeam({ extra }) {
  const team = extra && extra.length ? [LP_TEAM[0], ...extra, ...LP_TEAM.slice(1)] : LP_TEAM;
  return (
    <section className="lp-team lp-tone-a">
      <div className="lp-container">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">Your clinical team</div>
          <h2>A small practice, <em>actually involved</em> in your care.</h2>
          <p className="lp-section-lede" style={{ marginLeft: 'auto', marginRight: 'auto' }}>You'll know the people overseeing your program by name.</p>
        </div>
        <div className={`lp-team-grid reveal-stagger ${team.length === 4 ? 'lp-team-grid-4' : ''}`}>
          {team.map(m => <LPTeamCard key={m.name} m={m} />)}
        </div>
      </div>
    </section>
  );
}

function LPTeamCard({ m }) {
  const [missing, setMissing] = useLPState(false);
  return (
    <div className="lp-team-card">
      <div className="lp-team-photo">
        {!missing && <img src={m.photo} alt={m.name} onError={() => setMissing(true)} />}
        {missing && <div className="lp-team-photo-fallback" style={{ display: 'flex' }}>{m.name.charAt(0)}</div>}
      </div>
      <h3 className="lp-team-name">{m.name}</h3>
      <div className="lp-team-suffix">{m.suffix}</div>
      <div className="lp-team-role">{m.role}</div>
      <p className="lp-team-bio">{m.bio}</p>
      <div className="lp-team-creds">{m.creds.map(c => <span className="lp-team-cred" key={c}>{c}</span>)}</div>
    </div>
  );
}

function LPFaq({ faqs }) {
  const [open, setOpen] = useLPState(0);
  return (
    <section className="lp-section b-section lp-tone-b">
      <div className="lp-container-narrow">
        <div className="lp-section-header reveal" style={{ textAlign: 'center', marginLeft: 'auto', marginRight: 'auto' }}>
          <div className="lp-eyebrow">Common questions</div>
          <h2>The honest answers, <em>before you book</em>.</h2>
        </div>
        <div className="lp-faq">
          {faqs.map((f, i) => (
            <div className={`lp-faq-item ${open === i ? 'open' : ''}`} key={i} onClick={() => setOpen(open === i ? -1 : i)}>
              <h3 className="lp-faq-q">{f[0]}<span className="lp-faq-toggle">+</span></h3>
              <p className="lp-faq-a">{f[1]}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LPLocal({ text, bg }) {
  const PI = window.ParallaxImage;
  return (
    <section className="lp-local lp-local-media">
      {PI && bg ? <PI src={bg} speed={0.25} scale={1.2} overlay={0.78} /> : null}
      <div className="lp-container lp-local-inner reveal">
        <div className="lp-local-label">Rooted in the North Country · Littleton, NH</div>
        <p>{text || 'In-person visits at 16 Mill Street for patients across northern New Hampshire and northern Vermont. Telemedicine visits in NH, VT, MA, CT, NE, NY, and MD.'}</p>
      </div>
    </section>
  );
}

function LPDisclaimer({ text }) {
  return (
    <section className="lp-disclaimer">
      <div className="lp-container">
        <p>{text} Individual results vary. This page is educational and not medical advice; viewing it does not establish a provider-patient relationship.</p>
        <p className="lp-disclaimer-meta">© 2026 Eden Wellness · 16 Mill Street #3, Littleton, NH 03561 · hello@edenwellnessclinic.com · (603) 932-7908</p>
      </div>
    </section>
  );
}

window.LandingPage = LandingPage;