function Hero() {
  const [wordIdx, setWordIdx] = React.useState(0);
  const rotWords = ['Precision.', 'Reliability.', 'Durability.', 'Integrity.'];

  React.useEffect(() => {
    const t = setInterval(() => setWordIdx(i => (i + 1) % rotWords.length), 2400);
    return () => clearInterval(t);
  }, []);

  return (
    <div id="top" style={{
      position: 'relative',
      minHeight: '100vh',
      background: 'var(--paper)',
      overflow: 'hidden',
      display: 'flex',
      flexDirection: 'column',
      paddingTop: 96,
    }}>
      {/* Animated hexagon backdrop */}
      <HexBackdrop />

      {/* Gradient wash */}
      <div style={{
        position: 'absolute',
        top: 0, right: -200,
        width: 800, height: 800,
        background: 'radial-gradient(circle, rgba(212,160,23,0.10) 0%, transparent 60%)',
        pointerEvents: 'none',
      }} />

      <div style={{
        maxWidth: 1360,
        margin: '0 auto',
        padding: '40px 40px 80px',
        width: '100%',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        position: 'relative',
        zIndex: 2,
      }}>
        {/* Top rail */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 60, flexWrap: 'wrap', gap: 16 }}>
          <Kicker>Est. Silvassa · India · Flameproof &amp; Industrial Electrical</Kicker>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.15em', color: 'var(--steel-dark)', textTransform: 'uppercase', display: 'flex', alignItems: 'center', gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--amber)', boxShadow: '0 0 10px var(--amber)', flexShrink: 0 }} />
            Now dispatching · 48h window
          </div>
        </div>

        {/* Hero headline */}
        <div style={{ maxWidth: 1200 }}>
          <h1 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 'clamp(48px, 9.5vw, 148px)',
            fontWeight: 500,
            lineHeight: 0.92,
            letterSpacing: '-0.045em',
            color: 'var(--navy)',
            textWrap: 'balance',
          }}>
            <span style={{ display: 'block' }}>Precision components</span>
            <span style={{ display: 'block', color: 'var(--steel-dark)' }}>
              engineered for{' '}
              <span style={{
                position: 'relative',
                display: 'inline-block',
                color: 'var(--navy)',
                fontStyle: 'italic',
                fontWeight: 500,
              }}>
                <RotatingWord words={rotWords} idx={wordIdx} />
              </span>
            </span>
          </h1>

          {/* Sub */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: 40, alignItems: 'end', marginTop: 56, maxWidth: 1200 }} className="sse-hero-sub">
            <p style={{ fontSize: 20, lineHeight: 1.45, color: 'var(--navy-soft)', maxWidth: 560, textWrap: 'pretty' }}>
              Sakshi Saurabh Enterprises manufactures the complete range of flameproof electrical spare parts, precision plastic, and silicone products — trusted by OEMs, refineries and industrial plants across India and internationally.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 12 }}>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
                <Button variant="primary" href="#products">
                  Explore catalogue <Arrow />
                </Button>
                <Button variant="outline" href="assets/SSE-Brochure.pdf" download>
                  Download brochure
                </Button>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--steel-dark)', textTransform: 'uppercase' }}>
                PDF · 10 MB · Full catalogue
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stats marquee at bottom */}
      <StatMarquee />

      <style>{`
        @media (max-width: 900px) {
          .sse-hero-sub { grid-template-columns: 1fr !important; }
          .sse-hero-sub > div { align-items: flex-start !important; }
        }
      `}</style>
    </div>
  );
}

function RotatingWord({ words, idx }) {
  return (
    <span style={{ display: 'inline-block', position: 'relative', minWidth: 340, verticalAlign: 'baseline' }}>
      {words.map((w, i) => (
        <span key={w} style={{
          position: i === idx ? 'relative' : 'absolute',
          left: 0, top: 0,
          opacity: i === idx ? 1 : 0,
          transform: i === idx ? 'translateY(0)' : 'translateY(20px)',
          transition: 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
          whiteSpace: 'nowrap',
        }}>
          {w}
          <span style={{
            position: 'absolute',
            bottom: '0.08em',
            left: 0, right: '0.15em',
            height: 3,
            background: 'var(--amber)',
            transformOrigin: 'left',
            transform: i === idx ? 'scaleX(1)' : 'scaleX(0)',
            transition: 'transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.2s',
          }} />
        </span>
      ))}
    </span>
  );
}

// Animated hexagon backdrop — subtle kinetic
function HexBackdrop() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let raf;
    let hexes = [];

    const resize = () => {
      const dpr = window.devicePixelRatio || 1;
      const rect = canvas.getBoundingClientRect();
      canvas.width = rect.width * dpr;
      canvas.height = rect.height * dpr;
      ctx.scale(dpr, dpr);
      buildHexes(rect.width, rect.height);
    };

    const buildHexes = (w, h) => {
      hexes = [];
      const size = 42;
      const rowH = size * 1.5;
      const colW = size * Math.sqrt(3);
      const cols = Math.ceil(w / colW) + 2;
      const rows = Math.ceil(h / rowH) + 2;
      for (let r = 0; r < rows; r++) {
        for (let c = 0; c < cols; c++) {
          const x = c * colW + (r % 2 ? colW / 2 : 0);
          const y = r * rowH;
          hexes.push({ x, y, size, phase: Math.random() * Math.PI * 2, speed: 0.3 + Math.random() * 0.4 });
        }
      }
    };

    const drawHex = (x, y, size, alpha) => {
      ctx.beginPath();
      for (let i = 0; i < 6; i++) {
        const a = (Math.PI / 3) * i - Math.PI / 2;
        const px = x + size * Math.cos(a);
        const py = y + size * Math.sin(a);
        if (i === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py);
      }
      ctx.closePath();
      ctx.strokeStyle = `rgba(10, 26, 62, ${alpha})`;
      ctx.lineWidth = 1;
      ctx.stroke();
    };

    let start = performance.now();
    const tick = (t) => {
      const elapsed = (t - start) / 1000;
      const rect = canvas.getBoundingClientRect();
      ctx.clearRect(0, 0, rect.width, rect.height);
      hexes.forEach(h => {
        const pulse = (Math.sin(elapsed * h.speed + h.phase) + 1) / 2;
        const alpha = 0.03 + pulse * 0.06;
        drawHex(h.x, h.y, h.size * 0.9, alpha);
      });
      raf = requestAnimationFrame(tick);
    };

    resize();
    window.addEventListener('resize', resize);
    raf = requestAnimationFrame(tick);
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', resize); };
  }, []);

  return (
    <canvas ref={canvasRef} style={{
      position: 'absolute',
      inset: 0,
      width: '100%',
      height: '100%',
      pointerEvents: 'none',
      opacity: 0.8,
    }} />
  );
}

function StatMarquee() {
  const items = [
    '31+ Years of Manufacturing Expertise',
    '48-Hour Dispatch Guarantee',
    'A to Z Solutions — KG to PG Components',
    'Made in Silvassa · India',
    'Flameproof · Plastic · Silicone',
    '100+ Precision-Engineered SKUs',
    'Exporting Globally from India',
    'IEC / IS Standard Compliant',
  ];
  const doubled = [...items, ...items, ...items];
  return (
    <div style={{
      background: 'var(--navy)',
      color: 'var(--paper)',
      padding: '22px 0',
      overflow: 'hidden',
      position: 'relative',
      zIndex: 3,
      borderTop: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div style={{
        display: 'flex',
        gap: 60,
        animation: 'sse-marquee 60s linear infinite',
        whiteSpace: 'nowrap',
        width: 'max-content',
      }}>
        {doubled.map((item, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 60, fontFamily: 'var(--font-mono)', fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 500 }}>
            <span>{item}</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
              <polygon points="7,1 12.5,4 12.5,10 7,13 1.5,10 1.5,4" stroke="var(--amber)" strokeWidth="1.2" fill="none"/>
            </svg>
          </div>
        ))}
      </div>
      <style>{`
        @keyframes sse-marquee {
          from { transform: translateX(0); }
          to { transform: translateX(-33.333%); }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { Hero });
