/* Panterra Health — Home (landing) page */

const DS = window.PanterraHealthDesignSystem_3c87ff;

function Section({ children, bg = 'var(--paper)', style }) {
  return (
    <section style={{ background: bg, paddingBlock: 'var(--section-y)', ...style }}>
      <div className="container">{children}</div>
    </section>
  );
}

/* Editorial alternating media row — the whitehouse.gov "rolling" rhythm */
function MediaRow({ flip, eyebrow, title, body, cta, onCta, figLabel, figSrc, logoSrc, accent }) {
  const { Button, Badge } = DS;
  const media = logoSrc ? (
    <div style={{
      aspectRatio: '5 / 4', borderRadius: 'var(--radius-lg)', border: '1px solid var(--line)',
      background: 'var(--paper)', width: '80%', marginInline: 'auto',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--space-4)',
    }}>
      <img src={logoSrc} alt={eyebrow} style={{ maxWidth: '100%', maxHeight: '100%', objectFit: 'contain' }} />
    </div>
  ) : (
    <Figure label={figLabel} src={figSrc} ratio="5 / 4" style={accent ? { background: 'linear-gradient(135deg, var(--surface-2), var(--surface-blue))' } : undefined} />
  );
  return (
    <div className="ph-mediarow" style={{
      display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'center',
      direction: flip ? 'rtl' : 'ltr',
    }}>
      <div style={{ direction: 'ltr' }}>
        {media}
      </div>
      <div style={{ direction: 'ltr', display: 'flex', flexDirection: 'column', gap: 'var(--space-4)', alignItems: 'flex-start' }}>
        {eyebrow && <Badge variant="accent">{eyebrow}</Badge>}
        <h2 style={{ fontSize: 'var(--text-d2)', margin: 0 }}>{title}</h2>
        <p style={{ fontSize: 'var(--text-lg)', lineHeight: 'var(--leading-relaxed)', color: 'var(--text-muted)', margin: 0, maxWidth: '40ch' }}>{body}</p>
        {cta && <div style={{ marginTop: 'var(--space-2)' }}>
          <Button variant="secondary" iconRight={<Icon d={ICONS.arrow} size={18} />} onClick={onCta}>{cta}</Button>
        </div>}
      </div>
    </div>
  );
}

function Pillar({ icon, title, body }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
      <div style={{
        width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--surface-blue)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--blue-700)', marginBottom: 'var(--space-2)',
      }}>
        <Icon d={icon} size={26} />
      </div>
      <h4 style={{ margin: 0, fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--text-xl)', color: 'var(--ink-900)' }}>{title}</h4>
      <p style={{ margin: 0, color: 'var(--text-muted)', fontSize: 'var(--text-md)', lineHeight: 1.6 }}>{body}</p>
    </div>
  );
}

function HomePage({ onNavigate }) {
  const { Button, Badge } = DS;
  const go = (id) => { onNavigate(id); window.scrollTo({ top: 0 }); };

  React.useEffect(() => {
    const v = document.querySelector('.ph-hero-vid');
    if (v) { v.muted = true; const p = v.play(); if (p && p.catch) p.catch(() => {}); }
  }, []);

  return (
    <>
      {/* Hero — full-bleed looping lab footage (whitehouse.gov-style) */}
      <section className="ph-video-hero" style={{ position: 'relative', minHeight: 'min(88vh, 820px)', display: 'flex', alignItems: 'center', overflow: 'hidden' }}>
        <video className="ph-hero-vid" autoPlay muted loop playsInline poster={window.__asset('lab2', 'assets/lab-2.png')}
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}>
          <source src={window.__asset('heroLoop', 'assets/hero-loop.mp4')} type="video/mp4" />
        </video>
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(95deg, rgba(var(--blue-900-rgb),0.86) 0%, rgba(var(--blue-900-rgb),0.62) 40%, rgba(var(--blue-900-rgb),0.18) 70%, rgba(var(--blue-900-rgb),0) 100%)' }}></div>
        <div className="container" style={{ position: 'relative' }}>
          <div style={{ maxWidth: 640, display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 'var(--space-5)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', padding: '0.35rem 0.85rem', borderRadius: 'var(--radius-pill)', background: 'rgba(255,255,255,0.16)', backdropFilter: 'blur(4px)', color: '#fff', fontSize: 'var(--text-xs)', fontWeight: 600, letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase' }}>Telehealth Systems</span>
            <h1 style={{ fontSize: 'var(--text-hero)', margin: 0, lineHeight: 1.05, color: '#fff' }}>
              Health,<br /><em style={{ fontStyle: 'italic', color: 'var(--blue-300)' }}>first.</em>
            </h1>
            <p style={{ fontSize: 'var(--text-xl)', lineHeight: 'var(--leading-relaxed)', color: 'rgba(255,255,255,0.88)', margin: 0, maxWidth: '44ch' }}>
              Panterra Health puts care back in your hands: transparent labs, fair pricing, and providers who work for you. Accessible to every American, with or without insurance.
            </p>
            <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', marginTop: 'var(--space-2)' }}>
              <Button variant="primary" size="lg" onClick={() => go('mission')}>Our mission</Button>
              <button onClick={() => go('about')}
                onMouseEnter={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.18)'; }}
                onMouseLeave={e => { e.currentTarget.style.background = 'rgba(255,255,255,0.08)'; }}
                style={{ display: 'inline-flex', alignItems: 'center', gap: '0.5rem', padding: '1rem 2rem', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 'var(--text-lg)', color: '#fff', background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(255,255,255,0.55)', borderRadius: 'var(--radius-pill)', cursor: 'pointer', transition: 'background var(--dur) var(--ease)' }}>
                About us <Icon d={ICONS.arrow} size={18} />
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Statement band */}
      <Section bg="var(--surface-2)">
        <div style={{ maxWidth: '26ch' }}>
          <span className="eyebrow">Health First</span>
        </div>
        <p style={{
          fontFamily: 'var(--font-display)', fontSize: 'var(--text-d1)', lineHeight: 1.08,
          letterSpacing: '-0.02em', color: 'var(--ink-900)', margin: '18px 0 0', maxWidth: '20ch',
        }}>
          We believe you should own your health, not rent it from an industry.
        </p>
        <p style={{ marginTop: 'var(--space-6)', maxWidth: '52ch', fontSize: 'var(--text-lg)', color: 'var(--text-muted)', lineHeight: 1.7 }}>
          Panterra is an industry leading Telehealth company behind two focused brands. We provide the infrastructure for prescriptions, pricing, and access so getting care feels less like working for the medical industry, and more like have the medical industry work for you.
        </p>
      </Section>

      {/* Pillars */}
      <Section>
        <div style={{ marginBottom: 'var(--space-8)', maxWidth: '46ch' }}>
          <span className="eyebrow">What we do</span>
          <h2 style={{ fontSize: 'var(--text-d2)', marginTop: 14 }}>A simpler path to better health.</h2>
        </div>
        <div className="ph-pillars" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-8)' }}>
          <Pillar icon={ICONS.lab} title="Read your own labs" body="Order the tests that matter, see your biomarkers, and actually understand what they mean without an industry gatekeeping information about your own health." />
          <Pillar icon={ICONS.dollar} title="Fair, upfront pricing" body="We work directly with partner pharmacies nationwide to keep prices honest and transparent. Our goal was to make this affordable for everyone, including the uninsured." />
          <Pillar icon={ICONS.pulse} title="Providers who answer" body="Licensed telehealth clinicians who treat you like a person, prescribe responsibly, and stay reachable." />
        </div>
      </Section>

      {/* Subsidiaries */}
      <Section bg="var(--surface-2)" style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-10)' }}>
        <div style={{ maxWidth: '46ch' }}>
          <span className="eyebrow">Our Brands</span>
          <h2 style={{ fontSize: 'var(--text-d2)', marginTop: 14 }}>Two brands, one standard of care.</h2>
        </div>
        <MediaRow eyebrow="Kalos Health" title="Built for men's health, sport & longevity." logoSrc={window.__asset('kalosLogo', 'assets/kalos-logo.png')}
          body="Cutting-edge solutions including peptides, weight management, TRT, as well as treatments for hair loss and sexual wellness."
          cta="Explore Kalos Health" onCta={() => go('kalos')} />
        <MediaRow flip eyebrow="Hygeia Rx" title="Built for women's health & vitality." logoSrc={window.__asset('hygeiaLogo', 'assets/hygeia-logo.png')} accent
          body="Advanced care treatments including peptides, weight management, HRT, fertility, and treatments for hair and skin health."
          cta="Explore Hygeia Rx" onCta={() => go('hygeia')} />
      </Section>

      {/* Mission quote band (dark) */}
      <section style={{ background: 'var(--ink-band)', color: 'var(--text-on-dark)', paddingBlock: 'var(--section-y)' }}>
        <div className="container" style={{ maxWidth: 980 }}>
          <span className="eyebrow" style={{ color: 'rgba(246,244,239,0.55)' }}>Our Mission</span>
          <blockquote style={{
            fontFamily: 'var(--font-display)', fontSize: 'var(--text-d1)', lineHeight: 1.12, letterSpacing: '-0.02em',
            margin: '20px 0 0', color: '#fff', textWrap: 'balance',
          }}>
            Once upon a time, doctors made house calls. They worked for <em style={{ fontStyle: 'italic', color: 'var(--blue-300)' }}>you.</em> When did health <span style={{ fontStyle: 'italic' }}>care</span> become the health <span style={{ fontStyle: 'italic' }}>industry?</span>
          </blockquote>
          <div style={{ marginTop: 'var(--space-7)' }}>
            <DS.Button variant="primary" size="lg" onClick={() => go('mission')}>Read our mission</DS.Button>
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <Section>
        <div className="ph-cta" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-6)',
          flexWrap: 'wrap', padding: 'var(--space-9)', background: 'var(--surface-blue)', borderRadius: 'var(--radius-xl)',
        }}>
          <div style={{ maxWidth: '32ch' }}>
            <h2 style={{ fontSize: 'var(--text-d2)', margin: 0 }}>Ready to take control of your health?</h2>
          </div>
          <DS.Button variant="primary" size="lg" iconRight={<Icon d={ICONS.arrow} size={18} />} onClick={() => go('contact')}>Get in touch</DS.Button>
        </div>
      </Section>
    </>
  );
}

Object.assign(window, { Section, MediaRow, Pillar, HomePage });