const Hero = () => {
  const [scrollY, setScrollY] = React.useState(0);
  const [mounted, setMounted] = React.useState(false);
  const heroRef = React.useRef(null);

  React.useEffect(() => {
    setMounted(true);
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Mouse parallax
  const [mouse, setMouse] = React.useState({ x: 0, y: 0 });
  React.useEffect(() => {
    const onMove = (e) => {
      const x = (e.clientX / window.innerWidth - 0.5) * 2;
      const y = (e.clientY / window.innerHeight - 0.5) * 2;
      setMouse({ x, y });
    };
    window.addEventListener('mousemove', onMove);
    return () => window.removeEventListener('mousemove', onMove);
  }, []);

  const parY = scrollY * 0.3;

  return (
    <section ref={heroRef} id="top" className="relative min-h-screen pt-24 overflow-hidden" data-screen-label="01 Hero">
      {/* Blueprint grid background, parallax */}
      <div
        className="absolute inset-0 bp-grid opacity-60"
        style={{ transform: `translateY(${parY * 0.4}px)` }}
      ></div>
      <div
        className="absolute inset-0 bp-grid-fine opacity-30"
        style={{ transform: `translateY(${parY * 0.2}px)` }}
      ></div>

      {/* Top measurement bar */}
      <div className="absolute top-20 left-0 right-0 px-6 md:px-10 pointer-events-none">
        <div className="max-w-[1400px] mx-auto flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Crosshair size={8} className="text-stone" />
            <DimLabel>X: 0000.00</DimLabel>
          </div>
          <DimLabel>R-001 / HERO / SHEET 01 OF 12</DimLabel>
          <div className="flex items-center gap-2">
            <DimLabel>SCALE 1:1</DimLabel>
            <Crosshair size={8} className="text-stone" />
          </div>
        </div>
      </div>

      <div className="relative max-w-[1400px] mx-auto px-6 md:px-10 pt-20 pb-32">
        {/* Top kicker */}
        <div className={`flex items-center gap-3 mb-12 transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`}>
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full bg-sepia opacity-60 animate-ping rounded-full"></span>
            <span className="relative inline-flex rounded-full h-2 w-2 bg-sepia"></span>
          </span>
          <DimLabel>v.4.0 · Disponível agora · Compatível com BIM</DimLabel>
        </div>

        {/* Title */}
        <div className="grid grid-cols-12 gap-x-6 gap-y-4">
          <div className="col-span-12 md:col-span-9">
            <h1 className="font-serif font-light tracking-tightest leading-[0.92] text-[clamp(3rem,9vw,9.5rem)]">
              <span className={`block transition-all duration-[1200ms] ease-out ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`}>
                A planta-baixa
              </span>
              <span className={`block italic transition-all duration-[1400ms] ease-out ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`} style={{ transitionDelay: '180ms', color: 'var(--sepia)' }}>
                financeira
              </span>
              <span className={`block transition-all duration-[1600ms] ease-out ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-12'}`} style={{ transitionDelay: '360ms' }}>
                do seu escritório.
              </span>
            </h1>
          </div>

          {/* Right column — technical specs */}
          <aside className={`col-span-12 md:col-span-3 md:pt-4 transition-all duration-1000 ${mounted ? 'opacity-100' : 'opacity-0'}`} style={{ transitionDelay: '700ms' }}>
            <div className="border-t pt-4" style={{ borderColor: 'var(--rule-strong)' }}>
              <DimLabel className="block mb-3">/ Sumário Técnico</DimLabel>
              <div className="space-y-2 font-mono text-[11px]" style={{ color: 'var(--ash)' }}>
                <div className="flex justify-between"><span>Honorários</span><span>·····</span><span>↗</span></div>
                <div className="flex justify-between"><span>Custos por projeto</span><span>·····</span><span>↗</span></div>
                <div className="flex justify-between"><span>Cash-flow</span><span>·····</span><span>↗</span></div>
                <div className="flex justify-between"><span>Contratos</span><span>·····</span><span>↗</span></div>
                <div className="flex justify-between"><span>Projetos</span><span>·····</span><span>↗</span></div>
              </div>
            </div>
          </aside>
        </div>

        {/* Subtitle + CTAs */}
        <div className="mt-16 grid grid-cols-12 gap-x-6">
          <div className={`col-span-12 md:col-span-6 transition-all duration-1000 ${mounted ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-6'}`} style={{ transitionDelay: '900ms' }}>
            <p className="text-lg md:text-xl leading-relaxed" style={{ color: 'var(--ash)' }}>
              ArchPlan é o ERP desenhado para arquitetos. Organiza clientes, propostas, contratos, financeiro e projetos em uma rotina clara para o escritório.
            </p>

            <div className="flex flex-wrap items-center gap-4 mt-10">
              <a href="/cadastro" className="btn-primary">
                <span>Cadastrar</span>
                <span>→</span>
              </a>
              <a href="#demo" className="btn-ghost">
                <span>Ver demo</span>
                <span>↓</span>
              </a>
            </div>

            <div className="flex items-center gap-6 mt-10 font-mono text-[10px] uppercase tracking-wider2" style={{ color: 'var(--stone)' }}>
              <span>· 7 dias grátis</span>
              <span>· Sem cartão</span>
              <span>· Migração assistida</span>
            </div>
          </div>

          {/* Right column — animated blueprint */}
          <div className="col-span-12 md:col-span-6 mt-12 md:mt-0">
            <BlueprintFloor mounted={mounted} mouse={mouse} />
          </div>
        </div>

        {/* Scroll indicator */}
        <div className="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 pointer-events-none">
          <DimLabel>Role para explorar</DimLabel>
          <div className="w-px h-10 relative overflow-hidden" style={{ background: 'var(--rule-strong)' }}>
            <div className="absolute top-0 w-px h-4 bg-ink animate-[scrollHint_2s_ease-in-out_infinite]" style={{ background: 'var(--ink)' }}></div>
          </div>
        </div>
      </div>

      <style>{`
        @keyframes scrollHint {
          0% { transform: translateY(-100%); }
          100% { transform: translateY(250%); }
        }
      `}</style>
    </section>
  );
};

// Animated architectural blueprint that draws itself
const BlueprintFloor = ({ mounted, mouse }) => {
  const offsetX = mouse.x * 8;
  const offsetY = mouse.y * 8;

  return (
    <div className="relative aspect-[5/4] w-full corner-ticks" style={{ borderColor: 'var(--rule)' }}>
      <span className="tl"></span><span className="tr"></span>

      <div className="absolute inset-0 bp-grid-fine opacity-40"></div>

      <div className="absolute top-3 left-3 right-3 flex justify-between font-mono text-[9px] uppercase tracking-wider2" style={{ color: 'var(--stone)' }}>
        <span>FLR-PLN-01</span>
        <span>↺ AUTO</span>
      </div>
      <div className="absolute bottom-3 left-3 right-3 flex justify-between font-mono text-[9px] uppercase tracking-wider2" style={{ color: 'var(--stone)' }}>
        <span>1:50</span>
        <span>A · PROJ</span>
        <span>22.04.26</span>
      </div>

      <svg
        viewBox="0 0 500 400"
        className="absolute inset-0 w-full h-full"
        style={{ transform: `translate(${offsetX}px, ${offsetY}px)`, transition: 'transform 0.6s cubic-bezier(.2,.7,.2,1)' }}
      >
        <defs>
          <pattern id="hatch" patternUnits="userSpaceOnUse" width="6" height="6" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="6" stroke="currentColor" strokeWidth="0.4" opacity="0.3" />
          </pattern>
        </defs>

        {/* Outer wall - drawn first */}
        <g style={{ color: 'var(--ink)' }}>
          <rect
            x="40" y="40" width="420" height="320"
            fill="none" stroke="currentColor" strokeWidth="2"
            strokeDasharray="1500" strokeDashoffset={mounted ? 0 : 1500}
            style={{ transition: 'stroke-dashoffset 2.5s cubic-bezier(.2,.7,.2,1) 300ms' }}
          />

          {/* Inner walls */}
          <line x1="40" y1="180" x2="280" y2="180" stroke="currentColor" strokeWidth="1.4"
            strokeDasharray="240" strokeDashoffset={mounted ? 0 : 240}
            style={{ transition: 'stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) 1200ms' }}
          />
          <line x1="280" y1="40" x2="280" y2="260" stroke="currentColor" strokeWidth="1.4"
            strokeDasharray="220" strokeDashoffset={mounted ? 0 : 220}
            style={{ transition: 'stroke-dashoffset 1.8s cubic-bezier(.2,.7,.2,1) 1500ms' }}
          />
          <line x1="280" y1="260" x2="460" y2="260" stroke="currentColor" strokeWidth="1.4"
            strokeDasharray="180" strokeDashoffset={mounted ? 0 : 180}
            style={{ transition: 'stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1) 1800ms' }}
          />

          {/* Doors (arc swings) */}
          <path d="M 280 180 A 30 30 0 0 1 310 210" fill="none" stroke="currentColor" strokeWidth="0.6" opacity="0.6"
            strokeDasharray="60" strokeDashoffset={mounted ? 0 : 60}
            style={{ transition: 'stroke-dashoffset 1s ease-out 2200ms' }}
          />
          <line x1="280" y1="180" x2="310" y2="180" stroke="currentColor" strokeWidth="0.6"
            opacity={mounted ? 1 : 0} style={{ transition: 'opacity 0.5s 2200ms' }}
          />

          {/* Furniture as filled squares */}
          <g opacity={mounted ? 1 : 0} style={{ transition: 'opacity 1s 2400ms' }}>
            <rect x="80" y="80" width="60" height="35" fill="currentColor" opacity="0.85" />
            <rect x="160" y="80" width="80" height="20" fill="none" stroke="currentColor" strokeWidth="0.8" />
            <circle cx="200" cy="140" r="18" fill="none" stroke="currentColor" strokeWidth="0.8" />
            <line x1="190" y1="130" x2="210" y2="150" stroke="currentColor" strokeWidth="0.4" />
            <line x1="210" y1="130" x2="190" y2="150" stroke="currentColor" strokeWidth="0.4" />

            <rect x="320" y="80" width="100" height="40" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.8" />
            <rect x="320" y="140" width="40" height="80" fill="none" stroke="currentColor" strokeWidth="0.8" />
            <rect x="380" y="180" width="40" height="40" fill="currentColor" opacity="0.85" />

            <rect x="80" y="220" width="160" height="120" fill="url(#hatch)" stroke="currentColor" strokeWidth="0.6" />

            <rect x="320" y="290" width="120" height="50" fill="none" stroke="currentColor" strokeWidth="0.8" />
            <line x1="380" y1="290" x2="380" y2="340" stroke="currentColor" strokeWidth="0.4" />
          </g>

          {/* Dimension lines */}
          <g opacity={mounted ? 1 : 0} style={{ transition: 'opacity 0.8s 3000ms', color: 'var(--sepia)' }}>
            <line x1="40" y1="20" x2="460" y2="20" stroke="currentColor" strokeWidth="0.4" />
            <line x1="40" y1="15" x2="40" y2="25" stroke="currentColor" strokeWidth="0.4" />
            <line x1="460" y1="15" x2="460" y2="25" stroke="currentColor" strokeWidth="0.4" />
            <text x="250" y="14" fontSize="8" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">12.40 m</text>

            <line x1="20" y1="40" x2="20" y2="360" stroke="currentColor" strokeWidth="0.4" />
            <line x1="15" y1="40" x2="25" y2="40" stroke="currentColor" strokeWidth="0.4" />
            <line x1="15" y1="360" x2="25" y2="360" stroke="currentColor" strokeWidth="0.4" />
            <text x="14" y="200" fontSize="8" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle" transform="rotate(-90 14 200)">9.60 m</text>
          </g>

          {/* Annotations */}
          <g opacity={mounted ? 1 : 0} style={{ transition: 'opacity 0.6s 3300ms' }}>
            <text x="160" y="135" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">CONTAS A RECEBER</text>
            <text x="370" y="105" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">FLUXO DE CAIXA</text>
            <text x="160" y="285" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">CENTRO DE CUSTOS</text>
            <text x="380" y="319" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">RELATÓRIOS</text>
          </g>

          {/* North arrow */}
          <g transform="translate(440, 60)" opacity={mounted ? 1 : 0} style={{ transition: 'opacity 0.6s 3500ms' }}>
            <circle r="14" fill="none" stroke="currentColor" strokeWidth="0.6" />
            <path d="M 0 -10 L 4 8 L 0 4 L -4 8 Z" fill="currentColor" />
            <text y="-16" fontSize="7" fill="currentColor" fontFamily="JetBrains Mono" textAnchor="middle">N</text>
          </g>
        </g>
      </svg>

      {/* Floating cursor pulse */}
      <div className="absolute" style={{ left: '40%', top: '55%', opacity: mounted ? 1 : 0, transition: 'opacity 0.6s 3500ms' }}>
        <div className="relative">
          <div className="absolute inset-0 w-4 h-4 -translate-x-1/2 -translate-y-1/2 rounded-full pulse-ring" style={{ background: 'var(--sepia)' }}></div>
          <div className="w-1.5 h-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full" style={{ background: 'var(--sepia)' }}></div>
        </div>
      </div>
    </div>
  );
};

window.Hero = Hero;
