// Section 1 — Hero. H1 left (word stagger), device cluster right.
function Hero() {
  const words = ['Sua', 'vitrine', 'digital.'];
  const [m, setM] = React.useState(false);
  React.useEffect(() => { setM(true); }, []);
  const anim = (i) => ({
    display: 'inline-block', marginRight: '.26em',
    transform: m ? 'none' : 'translateY(40px) rotate(3deg)', opacity: m ? 1 : 0,
    transition: `transform .7s var(--ease-out) ${i * 0.06}s, opacity .7s var(--ease-out) ${i * 0.06}s`,
  });
  const fade = (d) => ({ transform: m ? 'none' : 'translateY(16px)', opacity: m ? 1 : 0,
    transition: `transform .6s var(--ease-out) ${d}s, opacity .6s var(--ease-out) ${d}s` });
  return (
    <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 92 }}>
      <HeroMesh />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 56, alignItems: 'center', paddingTop: 40, paddingBottom: 96 }}>
          {/* left */}
          <div>
            <div style={fade(0.5)}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 15px', borderRadius: 999,
                background: 'var(--paper)', border: '1px solid var(--line)', fontSize: 13, fontWeight: 500, color: 'var(--ink-2)', boxShadow: 'var(--shadow-sm)' }}>
                <Star /> 10 negócios locais já no ar
              </span>
            </div>
            <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 'clamp(46px, 6.4vw, 92px)',
              lineHeight: 1.0, letterSpacing: '-.015em', color: 'var(--ink-2)', margin: '24px 0 0' }}>
              <span style={anim(0)}>Sua</span><span style={anim(1)}>vitrine</span><span style={anim(2)}>digital.</span>
              <br />
              <span style={{ ...anim(3), fontStyle: 'italic', color: 'var(--brand)' }}>Pronta em 48h.</span>
            </h1>
            <p style={{ ...fade(0.7), fontSize: 19, lineHeight: 1.55, color: 'var(--muted)', margin: '22px 0 0', maxWidth: '40ch' }}>
              Site profissional, no ar com domínio próprio e manutenção mensal. Sem complicação, com a sua cara.
            </p>
            <div style={{ ...fade(0.82), display: 'flex', gap: 13, marginTop: 30, flexWrap: 'wrap' }}>
              <MagneticButton href="#previa" className="btn btn-primary btn-lg">Ver minha prévia grátis <Icon name="arrow" size={18} color="#fff" /></MagneticButton>
              <a href="#casos" className="btn btn-ghost btn-lg">Ver casos</a>
            </div>
            <div className="meta-row" style={{ ...fade(0.95), marginTop: 26 }}>
              <span className="chk"><Icon name="check" size={16} /> Em 48h</span>
              <span className="chk"><Icon name="check" size={16} /> Domínio próprio</span>
              <span className="chk"><Icon name="check" size={16} /> A partir de R$79/mês</span>
            </div>
          </div>
          {/* right */}
          <div style={{ ...fade(0.6), transform: m ? 'scale(1)' : 'scale(.94)', transition: 'transform .8s var(--ease-out) .4s, opacity .8s var(--ease-out) .4s' }}>
            <DeviceMock />
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroMesh() {
  return (
    <div aria-hidden="true" style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'none' }}>
      <div style={{ position: 'absolute', width: 560, height: 560, left: '-10%', top: '-14%', background: 'radial-gradient(circle, rgba(15,107,92,.16), transparent 65%)', filter: 'blur(60px)' }} />
      <div style={{ position: 'absolute', width: 620, height: 620, right: '-14%', top: '0%', background: 'radial-gradient(circle, rgba(191,232,221,.5), transparent 62%)', filter: 'blur(72px)' }} />
      <div style={{ position: 'absolute', width: 440, height: 440, left: '40%', top: '24%', background: 'radial-gradient(circle, rgba(16,36,31,.08), transparent 60%)', filter: 'blur(80px)' }} />
    </div>
  );
}

function MagneticButton({ children, className, href, ...rest }) {
  const ref = React.useRef(null);
  const [d, setD] = React.useState({ x: 0, y: 0 });
  const onMove = e => {
    const r = ref.current.getBoundingClientRect();
    setD({ x: ((e.clientX - r.left) / r.width - .5) * 9, y: ((e.clientY - r.top) / r.height - .5) * 9 });
  };
  const style = { transform: `translate(${d.x}px, ${d.y}px)`, transition: 'transform .25s var(--ease-out)' };
  return (
    <a ref={ref} href={href} className={className} style={style} onMouseMove={onMove} onMouseLeave={() => setD({ x: 0, y: 0 })} {...rest}>{children}</a>
  );
}

window.Hero = Hero;
window.MagneticButton = MagneticButton;