var React = window.React;
var { Button, Card, Logo } = window.NobleHealthDesignSystem_07bcfa;
var I = window.NobleIcons;

/* Analytics: CTA location only — no visitor data is ever passed. */
var track = function (event, params) {
  try { if (window.nhTrack) window.nhTrack(event, params); } catch (e) { /* never break the page */ }
};

/* ---------- shared bits ---------- */
/* Forwards className (responsive overrides, e.g. nh-stats) and id (nav anchors). */
function Section({ children, style, className, id }) {
  return (
    <div
      id={id}
      className={'nh-section' + (className ? ' ' + className : '')}
      style={{ maxWidth: 'var(--container-xl)', margin: '0 auto', padding: '0 var(--space-8)', ...style }}
    >
      {children}
    </div>
  );
}
function Eyebrow({ children, center = true, tone = 'light' }) {
  return <div style={{
    fontSize: 'var(--text-2xs)', fontWeight: 800, letterSpacing: '0.28em', textTransform: 'uppercase',
    color: tone === 'dark' ? 'var(--green-300)' : 'var(--green-700)', textAlign: center ? 'center' : 'left', marginBottom: 16,
  }}>{children}</div>;
}
function Display({ children, tone = 'light', center = true, style }) {
  return <h2 style={{
    fontFamily: 'var(--font-display)', fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.06,
    fontSize: 'clamp(30px, 4vw, 46px)', textAlign: center ? 'center' : 'left',
    color: tone === 'dark' ? '#fff' : 'var(--navy-900)', margin: 0, ...style,
  }}>{children}</h2>;
}
function Em({ children, tone = 'light' }) {
  return <span style={{ fontStyle: 'italic', fontWeight: 500, color: tone === 'dark' ? 'var(--green-300)' : 'var(--green-700)' }}>{children}</span>;
}
function PhotoSlot({ label = 'Photo', icon: Ic, style, radius = 'var(--radius-md)', tone = 'sand', className }) {
  var bg = tone === 'navy' ? 'var(--navy-700)' : 'var(--sand-100)';
  var fg = tone === 'navy' ? 'var(--navy-300)' : 'var(--sand-400)';
  return (
    <div className={className} style={{ background: bg, border: tone === 'navy' ? 'none' : '1px solid var(--border-subtle)', borderRadius: radius, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 8, color: fg, overflow: 'hidden', ...style }}>
      {Ic && <Ic width={24} height={24} />}
      <span style={{ fontSize: 'var(--text-2xs)', fontWeight: 800, letterSpacing: '0.2em', textTransform: 'uppercase' }}>{label}</span>
    </div>
  );
}

/* Step 1 of the care request, lifted into the hero.
 * Validates the ZIP, stashes it for RequestCarePage, then drops the visitor straight
 * into question 1 so they never type it twice. */
function ZipStart({ go }) {
  var [zip, setZip] = React.useState('');
  var [error, setError] = React.useState('');
  var [loading, setLoading] = React.useState(false);

  var submit = async (e) => {
    e.preventDefault();
    var value = zip.trim();
    if (!/^\d{5}$/.test(value)) {
      setError('Please enter a valid 5-digit ZIP code.');
      return;
    }
    setError('');
    setLoading(true);
    try {
      var res = await fetch('https://api.zippopotam.us/us/' + value);
      if (!res.ok) throw new Error('not found');
      var place = (await res.json()).places[0];

      // If storage is unavailable the ZIP can't travel, so start at step 1 rather
      // than sending them to a step whose guard would bounce them back.
      var carried = false;
      try {
        window.sessionStorage.setItem('nh_seed', JSON.stringify({
          zipcode: value,
          locationText: place['place name'] + ', ' + place['state abbreviation'],
        }));
        carried = true;
      } catch (storageErr) { /* private mode — fall back below */ }

      track('funnel_step', { step: 'zip_submitted', step_index: 1 });
      go(carried ? '/request-care/who' : '/request-care');
    } catch (err) {
      setError("We couldn't find that ZIP code. Please check and try again.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <form
      onSubmit={submit}
      style={{ background: 'var(--surface-card)', borderRadius: 'var(--radius-lg)', padding: 18, maxWidth: 470, boxShadow: 'var(--shadow-lg)' }}
    >
      <label htmlFor="nh-hero-zip" style={{ display: 'block', fontSize: 'var(--text-sm)', fontWeight: 700, color: 'var(--navy-900)', marginBottom: 10 }}>
        Enter your ZIP code to get started
      </label>
      <div className="nh-zip-row" style={{ display: 'flex', gap: 10 }}>
        <input
          id="nh-hero-zip"
          inputMode="numeric"
          maxLength={5}
          autoComplete="postal-code"
          placeholder="77024"
          value={zip}
          onChange={(e) => { setZip(e.target.value.replace(/\D/g, '')); if (error) setError(''); }}
          aria-invalid={error ? 'true' : 'false'}
          style={{
            flex: 1, minWidth: 0, height: 50, padding: '0 14px',
            borderRadius: 'var(--radius-md)',
            border: '1px solid ' + (error ? 'var(--danger)' : 'var(--border-default)'),
            fontFamily: 'var(--font-body)', fontSize: 'var(--text-md)', color: 'var(--text-strong)',
            outline: 'none', background: 'var(--surface-card)',
          }}
        />
        <Button type="submit" size="lg" variant="secondary" disabled={loading} iconRight={loading ? null : <I.ArrowRight width={18} height={18} />}>
          {loading ? 'Checking…' : 'Get started'}
        </Button>
      </div>
      {error && (
        <p role="alert" style={{ fontSize: 'var(--text-sm)', color: 'var(--danger-fg)', margin: '10px 0 0' }}>{error}</p>
      )}
      <p style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', margin: '10px 0 0' }}>
        Free and no obligation — it takes about a minute.
      </p>
    </form>
  );
}

var services = [
  { icon: 'Heart', name: 'Companion Care', sub: 'Conversation & daily company', img: '/uploads/services/01-companion-care.jpg' },
  { icon: 'Users', name: 'Personal Care', sub: 'Bathing, dressing & mobility', img: '/uploads/services/02-personal-care.jpg' },
  { icon: 'Home', name: 'Homemaker Help', sub: 'Meals, laundry & errands', img: '/uploads/services/03-homemaker-care.jpg' },
  { icon: 'Clock', name: 'Respite Care', sub: 'Relief for family caregivers', img: '/uploads/services/04-respite-care.jpg' },
  { icon: 'Activity', name: 'Dementia Care', sub: 'Specialized memory support', img: '/uploads/services/05-dementia-care.jpg' },
];
var programs = [
  { name: '24-Hour Care', sub: 'A dedicated caregiver, day and night', label: '24-hour', img: '/uploads/programs/01-24-hour.jpg?v=14' },
  { name: 'Hourly Care', sub: 'Flexible visits, a few hours a week', label: 'Hourly', img: '/uploads/programs/02-hourly.jpg?v=7' },
  { name: 'Fall Prevention & Safety', sub: 'Home safety & mobility assistance', label: 'Safety', img: '/uploads/programs/03-safety.jpg?v=7' },
  { name: 'Post-Hospital Support', sub: 'Meals, errands & company at home', label: 'At home', img: '/uploads/programs/04-post-hospital.jpg?v=7' },
];
var quotes = [
  { q: 'Our caregiver treats my mother like her own. Every visit is on time, and every question is answered with patience.', name: 'Maria G.', loc: 'Sugar Land' },
  { q: 'After my husband came home, he was never alone — someone was there to cook, help him up, and keep him company.', name: 'Robert T.', loc: 'The Woodlands' },
  { q: 'They matched us with someone who truly fits my father. That peace of mind, for our whole family, is priceless.', name: 'Denise W.', loc: 'Katy' },
];

function HomePage({ onNav, go }) {
  return (
    <main style={{ background: 'var(--surface-page)' }}>

      {/* ============ HERO — full-bleed image, fades into next section ============ */}
      <section className="nh-hero" style={{ position: 'relative', minHeight: 680, display: 'flex', alignItems: 'center', overflow: 'hidden', background: 'var(--navy-800)' }}>
        {/* full-bleed photography layer (edge to edge) */}
        <div className="hero-photo" style={{ position: 'absolute', inset: 0, background: 'var(--navy-800)' }}>
          {/* real caregiver photography */}
          <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(/uploads/hero-caregiver.jpg?v=8)', backgroundSize: 'cover', backgroundPosition: 'center 28%' }} />
          {/* navy scrim — darkens the left so the headline stays readable */}
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(20,38,63,0.94) 0%, rgba(20,38,63,0.80) 34%, rgba(20,38,63,0.44) 62%, rgba(20,38,63,0.16) 100%)' }} />
          {/* soft green brand glow, top-right */}
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(1100px 520px at 82% 6%, rgba(124,179,64,0.18), transparent 60%)' }} />
        </div>
        {/* Bottom fade — the image dissolves into the page background below. Kept shallow
            (was 42%) so it no longer washes out the trust row sitting above it. */}
        <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '26%', zIndex: 1, background: 'linear-gradient(to top, var(--surface-page) 4%, rgba(250,248,243,0) 100%)' }} />
        {/* Readability scrim over the text column. Painted after the fade so the left side
            stays dark enough for white text, while the right side still dissolves. */}
        <div className="nh-hero-scrim" style={{ position: 'absolute', inset: 0, zIndex: 1, background: 'linear-gradient(to right, rgba(20,38,63,0.82) 0%, rgba(20,38,63,0.62) 38%, rgba(20,38,63,0.12) 66%, rgba(20,38,63,0) 80%)' }} />
        <Section style={{ position: 'relative', zIndex: 2, paddingTop: 'var(--space-16)', paddingBottom: 'var(--space-24)' }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow center={false} tone="dark">In-home caregiving</Eyebrow>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(46px, 6vw, 82px)', lineHeight: 1.02, letterSpacing: '-0.015em', color: '#fff', margin: 0, maxWidth: 620 }}>
              Care, <Em tone="dark">delivered</Em> home.
            </h1>
            <p style={{ margin: '24px 0 34px', maxWidth: 420, fontSize: 'var(--text-lg)', lineHeight: 1.6, color: 'var(--navy-100)' }}>
              Compassionate, professional caregivers who help your loved ones live safely and comfortably — right where they're happiest.
            </p>
            {/* The care request starts here rather than behind a click — step 1 of the
                flow is captured in the hero and carried into the rest of the form. */}
            <ZipStart go={go} />
            <div style={{ marginTop: 'var(--space-5)' }}>
              {/* Plain button with CSS-driven hover — see .nh-ghost-btn. The design-system
                  ghost variant hovers near-white and its React hover state sticks when the
                  click scrolls the page out from under the cursor. */}
              <button
                type="button"
                className="nh-ghost-btn"
                onClick={() => {
                  track('cta_click', { location: 'services' });
                  var el = document.getElementById('services');
                  if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
                }}
              >
                Explore our services
              </button>
            </div>
            <div className="nh-hero-trust" style={{ display: 'flex', gap: 'var(--space-6)', marginTop: 'var(--space-10)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', fontWeight: 700, color: '#fff' }}><I.Shield width={20} height={20} style={{ color: 'var(--green-400)' }} />Licensed &amp; insured</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'var(--text-sm)', fontWeight: 700, color: '#fff' }}><I.Clock width={20} height={20} style={{ color: 'var(--green-400)' }} />Available 24/7</span>
            </div>
          </div>
        </Section>
      </section>

      {/* ============ STATS BAND ============ */}
      <Section style={{ paddingTop: 'var(--space-16)', paddingBottom: 'var(--space-16)', display: 'grid', gridTemplateColumns: '1fr 1.2fr 1fr', gap: 'var(--space-10)', alignItems: 'center' }} className="nh-stats">
        <div>
          <StatBlock num="15 yrs" label="Caring for families" />
          <StatBlock num="4.9/5" label="Average family rating" />
        </div>
        <div style={{ aspectRatio: '1 / 1.05', borderRadius: '48% 48% var(--radius-lg) var(--radius-lg)', backgroundImage: 'url(/uploads/feature-photo.jpg?v=13)', backgroundSize: 'cover', backgroundPosition: 'center 30%', border: '1px solid var(--border-subtle)' }} />
        <div>
          <StatBlock num="1,200+" label="Vetted caregivers" />
          <StatBlock num="24/7" label="On-call support" />
        </div>
      </Section>

      {/* ============ FEATURED SERVICES STRIP ============ */}
      <section id="services" style={{ scrollMarginTop: 90, background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', padding: 'var(--space-20) 0' }}>
        <Section>
          <Eyebrow>Our services</Eyebrow>
          <Display>The ways <Em>we care.</Em></Display>
          <div className="nh-services" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', borderLeft: '1px solid var(--border-subtle)', borderRight: '1px solid var(--border-subtle)', marginTop: 'var(--space-12)' }}>
            {services.map((s, i) => {
              var Ic = I[s.icon];
              return (
                <div key={s.name} style={{ borderRight: i < services.length - 1 ? '1px solid var(--border-subtle)' : 'none', padding: '0 0 var(--space-6)', textAlign: 'center' }}>
                  <div style={{ position: 'relative', height: 200, marginBottom: 'var(--space-5)', display: 'flex', alignItems: 'flex-end', justifyContent: 'center' }}>
                    <div style={{ width: '78%', height: '88%', borderRadius: 'var(--radius-md) var(--radius-md) 0 0', backgroundImage: 'url(' + s.img + '?v=4)', backgroundSize: 'cover', backgroundPosition: 'center', border: '1px solid var(--border-subtle)' }} />
                    <span style={{ position: 'absolute', top: 16, left: '50%', transform: 'translateX(-50%)', width: 44, height: 44, borderRadius: '50%', background: 'var(--surface-card)', boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--green-700)' }}><Ic width={22} height={22} /></span>
                  </div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-lg)', color: 'var(--navy-900)', margin: 0 }}>{s.name}</h3>
                  <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 6, padding: '0 12px' }}>{s.sub}</div>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'center', marginTop: 'var(--space-10)' }}>
            <Button variant="outline" onClick={() => { track('cta_click', { location: 'services' }); onNav('request'); }} iconRight={<I.ArrowRight width={16} height={16} />}>View all services</Button>
          </div>
        </Section>
      </section>

      {/* ============ EDITORIAL SPLIT ============ */}
      <Section id="our-care" style={{ scrollMarginTop: 90, paddingTop: 'var(--space-20)', paddingBottom: 'var(--space-12)' }}>
        <Eyebrow>Why families choose us</Eyebrow>
        <Display>A quiet obsession <Em>with better care.</Em></Display>
        <div className="nh-split" style={{ display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 'var(--space-6)', marginTop: 'var(--space-12)', alignItems: 'start' }}>
          <div className="nh-editorial-photo" style={{ position: 'relative', height: 540, borderRadius: 'var(--radius-lg)', overflow: 'hidden', background: 'var(--navy-700)' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(/uploads/jessica-home-visit.jpg?v=5)', backgroundSize: 'cover', backgroundPosition: 'center 26%' }} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to top, rgba(20,38,63,0.88) 0%, rgba(20,38,63,0.18) 44%, rgba(20,38,63,0) 72%)' }} />
            <Button variant="secondary" onClick={() => { track('cta_click', { location: 'our_story' }); onNav('request'); }} style={{ position: 'absolute', left: 30, bottom: 28 }} iconRight={<I.ArrowRight width={16} height={16} />}>Our story</Button>
          </div>
          <div className="nh-minicards" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-6)' }}>
            <MiniCard icon="Calendar" title="Care planning" sub="Coordinated · individualized" img="/uploads/care-plan-coordination.jpg?v=6" />
            <MiniCard icon="Phone" title="24/7 on-call" sub="A coordinator answers, every time" img="/uploads/24-7-on-call.jpg?v=6" offset />
          </div>
        </div>
      </Section>

      {/* ============ PROGRAM CARD ROW ============ */}
      <Section id="programs" style={{ scrollMarginTop: 90, paddingTop: 'var(--space-16)', paddingBottom: 'var(--space-16)' }}>
        <Eyebrow>Programs</Eyebrow>
        <Display>Trusted by <Em>our families.</Em></Display>
        <div className="nh-programs" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-12)' }}>
          {programs.map((p) => (
            <Card key={p.name} padding="sm" interactive style={{ padding: 0, overflow: 'hidden' }}>
              <div style={{ height: 220, backgroundImage: 'url(' + p.img + ')', backgroundSize: 'cover', backgroundPosition: 'center', borderBottom: '1px solid var(--border-subtle)' }} />
              <div style={{ padding: '16px 18px 18px' }}>
                <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-md)', color: 'var(--navy-900)' }}>{p.name}</div>
                <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 5 }}>{p.sub}</div>
              </div>
            </Card>
          ))}
        </div>
      </Section>

      {/* ============ SOCIAL STRIP ============ */}
      <section id="about" style={{ scrollMarginTop: 90, paddingTop: 'var(--space-12)', textAlign: 'center' }}>
        <Eyebrow>Follow our community</Eyebrow>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(30px, 4vw, 46px)', color: 'var(--navy-900)' }}>@noblehealthcare</div>
        <div className="nh-social" style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', marginTop: 'var(--space-10)' }}>
          {[1,2,3,4,5,6].map((n) => (
            <div
              key={n}
              style={{
                aspectRatio: '1 / 1.3',
                backgroundImage: 'url(/uploads/social/0' + n + '.jpg?v=13)',
                backgroundSize: 'cover',
                backgroundPosition: 'center',
              }}
            />
          ))}
        </div>
      </section>

      {/* ============ TESTIMONIALS ============ */}
      <section id="reviews" style={{ scrollMarginTop: 90, padding: 'var(--space-20) 0', background: 'var(--surface-accent)' }}>
        <Section>
          <Eyebrow>In their words</Eyebrow>
          <Display>From our <Em>families.</Em></Display>
          <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', marginTop: 'var(--space-12)', overflow: 'hidden', background: 'var(--surface-card)' }}>
            <div className="nh-quotes" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
              {quotes.map((qt, i) => (
                <div key={i} style={{ borderRight: i < 2 ? '1px solid var(--border-subtle)' : 'none', padding: '40px 34px 0', minHeight: 250, display: 'flex', flexDirection: 'column' }}>
                  <span style={{ width: 32, height: 32, borderRadius: '50%', background: 'var(--green-600)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-display)', fontSize: 22, lineHeight: 1, marginBottom: 22, flex: 'none' }}>&ldquo;</span>
                  <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-body)', lineHeight: 1.6, margin: 0, maxWidth: 300 }}>{qt.q}</p>
                  <div style={{ marginTop: 'auto', borderTop: '1px solid var(--border-subtle)', padding: '16px 0 22px' }}>
                    <div style={{ fontSize: 'var(--text-sm)', fontWeight: 700, color: 'var(--navy-900)' }}>{qt.name}</div>
                    <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 2 }}>{qt.loc}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Section>
      </section>

      {/* ============ NEWSLETTER CTA ============ */}
      <Section style={{ paddingTop: 'var(--space-16)', paddingBottom: 'var(--space-20)' }}>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--navy-700)', padding: 'var(--space-20) var(--space-8)', textAlign: 'center' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(700px 300px at 50% 20%, rgba(124,179,64,0.20), transparent 65%)' }} />
          <div style={{ position: 'relative', zIndex: 2 }}>
            <Display tone="dark">Notes from <Em tone="dark">our care team.</Em></Display>
            <p style={{ fontSize: 'var(--text-md)', color: 'var(--navy-100)', margin: '14px 0 28px' }}>Health resources, caregiver guidance, and community updates.</p>
            <NewsletterForm />
          </div>
        </div>
      </Section>
    </main>
  );
}

/* Newsletter signup — posts to /api/subscribe, which emails the team. */
function NewsletterForm() {
  var [email, setEmail] = React.useState('');
  var [company, setCompany] = React.useState(''); // honeypot
  var [state, setState] = React.useState('idle'); // idle | sending | done | error
  var [message, setMessage] = React.useState('');

  var submit = async (e) => {
    e.preventDefault();
    if (state === 'sending') return;
    setState('sending');
    setMessage('');
    try {
      var res = await fetch('/api/subscribe', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email: email, company: company }),
      });
      var payload = await res.json().catch(() => null);
      if (!res.ok) throw new Error((payload && payload.error) || '');
      track('newsletter_signup', { location: 'newsletter' });
      setState('done');
    } catch (err) {
      setState('error');
      setMessage(err.message || "We couldn't sign you up just now. Please try again in a moment.");
    }
  };

  if (state === 'done') {
    return (
      <p role="status" style={{ color: '#fff', fontSize: 'var(--text-md)', fontWeight: 600, margin: 0 }}>
        You're subscribed — thank you. Look out for our next note.
      </p>
    );
  }

  return (
    <div style={{ maxWidth: 480, margin: '0 auto' }}>
      <form onSubmit={submit} style={{ display: 'flex', gap: 10, alignItems: 'center', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.28)', borderRadius: 'var(--radius-pill)', padding: '6px 6px 6px 22px' }}>
        <label htmlFor="nh-newsletter-email" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)' }}>Your email address</label>
        <input
          id="nh-newsletter-email"
          type="email"
          value={email}
          onChange={(e) => { setEmail(e.target.value); if (state === 'error') setState('idle'); }}
          placeholder="Your email address"
          required
          autoComplete="email"
          style={{ flex: 1, minWidth: 0, background: 'transparent', border: 'none', outline: 'none', color: '#fff', fontFamily: 'var(--font-body)', fontSize: 'var(--text-sm)' }}
        />
        {/* Honeypot — hidden from people, catnip for bots. */}
        <input
          type="text"
          name="company"
          value={company}
          onChange={(e) => setCompany(e.target.value)}
          tabIndex={-1}
          autoComplete="off"
          aria-hidden="true"
          style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }}
        />
        <Button type="submit" variant="secondary" disabled={state === 'sending'} iconRight={state === 'sending' ? null : <I.ArrowRight width={16} height={16} />}>
          {state === 'sending' ? 'Signing up…' : 'Subscribe'}
        </Button>
      </form>
      {state === 'error' && (
        <p role="alert" style={{ color: 'var(--green-300)', fontSize: 'var(--text-sm)', margin: '12px 0 0' }}>{message}</p>
      )}
    </div>
  );
}

function StatBlock({ num, label }) {
  return (
    <div style={{ textAlign: 'center', padding: '28px 0' }}>
      <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(40px, 4vw, 58px)', lineHeight: 1, color: 'var(--navy-900)' }}>{num}</div>
      <div style={{ fontSize: 'var(--text-2xs)', letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--text-muted)', marginTop: 12, fontWeight: 700 }}>{label}</div>
    </div>
  );
}
function MiniCard({ icon, title, sub, img, offset }) {
  var Ic = I[icon];
  return (
    <Card padding="sm" className="nh-minicard" style={{ padding: 0, overflow: 'hidden', marginTop: offset ? 64 : 0 }}>
      <div style={{ position: 'relative', height: 200, background: 'var(--sand-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        {img
          ? <div style={{ position: 'absolute', inset: 0, backgroundImage: 'url(' + img + ')', backgroundSize: 'cover', backgroundPosition: 'center' }} />
          : <PhotoSlot label="Photo" style={{ position: 'absolute', inset: 0, borderRadius: 0, border: 'none' }} />}
        <span style={{ position: 'absolute', top: 12, right: 12, width: 30, height: 30, borderRadius: '50%', background: 'var(--surface-card)', boxShadow: 'var(--shadow-sm)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--green-700)' }}><Ic width={16} height={16} /></span>
      </div>
      <div style={{ padding: '14px 18px 18px' }}>
        <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--text-md)', color: 'var(--navy-900)' }}>{title}</div>
        <div style={{ fontSize: 'var(--text-xs)', color: 'var(--text-muted)', marginTop: 4 }}>{sub}</div>
      </div>
    </Card>
  );
}
window.HomePage = HomePage;