// Hero.jsx — broad homepage hero, speaks to both audiences (convert + build)
const Hero = () => {
  const [show, setShow] = React.useState(false);
  const [isMobile, setIsMobile] = React.useState(window.innerWidth <= 768);
  React.useEffect(() => { const t = setTimeout(() => setShow(true), 60); return () => clearTimeout(t); }, []);
  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth <= 768);
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  const fadeUp = (delay) => ({
    opacity: show ? 1 : 0,
    transform: show ? 'translate3d(0,0,0)' : 'translate3d(0,16px,0)',
    transition: `opacity 700ms cubic-bezier(0.2,0,0,1) ${delay}ms, transform 700ms cubic-bezier(0.2,0,0,1) ${delay}ms`
  });

  return (
    <section style={{ paddingTop: isMobile ? 64 : 120, paddingBottom: isMobile ? 80 : 144, position: 'relative' }}>
      <div className="container">
        <div style={{ maxWidth: 1100 }}>

          <h1 style={{ marginBottom: isMobile ? 24 : 40, maxWidth: 1000, ...fadeUp(140) }}>
            We build compliant telehealth infrastructure for operators who want to scale and eventually sell.
          </h1>
          <p className="body-l" style={{ maxWidth: 640, marginBottom: isMobile ? 28 : 40, color: 'var(--fg-2)', ...fadeUp(300) }}>
            Prescriber networks, pharmacy relationships, compliant processing, state licensing, and exit positioning. Built from scratch or converted from an existing brand.
          </p>

          {/* Two-path selector */}
          <div style={{
            display: 'flex',
            flexDirection: isMobile ? 'column' : 'row',
            gap: 12,
            marginBottom: isMobile ? 16 : 20,
            ...fadeUp(420)
          }}>
            <a href="/build" className="btn btn-primary" style={{ textDecoration: 'none', flex: isMobile ? 'unset' : '0 0 auto' }}>
              Build a new brand
            </a>
            <a href="/convert" className="btn btn-secondary" style={{ textDecoration: 'none', flex: isMobile ? 'unset' : '0 0 auto' }}>
              Convert an existing brand
            </a>
          </div>
          <div style={{ ...fadeUp(500) }}>
            <a href="/apply" style={{ fontSize: 13, color: 'var(--fg-3)', textDecoration: 'underline', textUnderlineOffset: 3 }}>
              Not sure which path? Apply and we'll figure it out together.
            </a>
          </div>
        </div>
      </div>

      {/* Stats strip */}
      <div className="container" style={{ marginTop: isMobile ? 56 : 120, ...fadeUp(620) }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)'
        }}>
          {[
            ['States covered', '47'],
            ['Time to first prescription', '4 weeks'],
            ['FDA actions on platform', '0'],
            ['Fund freezes in 3+ years', '0'],
          ].map(([k, v], i) => (
            <div key={k} style={{
              padding: isMobile ? '20px 16px' : '24px 24px',
              borderRight: isMobile ? (i % 2 === 0 ? '1px solid var(--border)' : 'none') : (i < 3 ? '1px solid var(--border)' : 'none'),
              borderBottom: (isMobile && i < 2) ? '1px solid var(--border)' : 'none'
            }}>
              <div className="eyebrow" style={{ color: 'var(--fg-3)', marginBottom: 8, fontSize: isMobile ? 10 : 11 }}>{k}</div>
              <div style={{ fontSize: isMobile ? 22 : 28, fontWeight: 700, letterSpacing: '-0.03em' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Hero = Hero;