// Hero.jsx — animated plumb bob falls into place, type settles
// Exposes window.PlumbHero

const PlumbHero = ({ onJoin }) => {
  const { useState, useEffect, useRef } = React;
  const [phase, setPhase] = useState(0); // 0 = pre, 1 = line drawn, 2 = bob landed, 3 = type in
  const lineRef = useRef(null);

  useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 180);   // line draws
    const t2 = setTimeout(() => setPhase(2), 1100);  // bob lands
    const t3 = setTimeout(() => setPhase(3), 1450);  // type settles
    return () => { [t1,t2,t3].forEach(clearTimeout); };
  }, []);

  return (
    <section className="hero" data-screen-label="hero">
      {/* Drafting corners specific to hero */}
      <div className="hero-corners" aria-hidden="true">
        <span className="hc tl">doc 001 · plumb · sheet 1 of 1</span>
        <span className="hc tr">rev a · 2026</span>
        <span className="hc bl">— gravity, true. always.</span>
        <span className="hc br">true from drawing to delivery</span>
      </div>

      {/* Faint drafting grid */}
      <div className="hero-grid" aria-hidden="true" />

      <div className="hero-inner page">
        {/* Eyebrow */}
        <div className={`hero-eyebrow ${phase >= 3 ? 'in' : ''}`}>
          <span className="hairspan" />
          <span>constraint-aware design copilot for hardware engineers</span>
        </div>

        {/* The bob — anchored top, line draws, bob falls */}
        <div className="bob-stage" aria-hidden="true">
          <div className={`bob-line ${phase >= 1 ? 'in' : ''}`} ref={lineRef} />
          <div className={`bob-bob ${phase >= 2 ? 'in' : ''}`}>
            <svg viewBox="0 0 60 110" width="60" height="110" xmlns="http://www.w3.org/2000/svg">
              <rect x="26" y="0" width="8" height="14" fill="#1A1A1A"/>
              <path d="M 8 14 L 52 14 L 30 110 Z" fill="#1A1A1A"/>
              <path d="M 8 14 L 30 14 L 30 110 Z" fill="#0d0d0d"/>
              <line x1="30" y1="14" x2="30" y2="108" stroke="#000" strokeOpacity="0.18" strokeWidth="0.6"/>
            </svg>
          </div>
        </div>

        {/* Headline */}
        <h1 className={`display hero-h ${phase >= 3 ? 'in' : ''}`}>
          <span className="line">Find out what your design</span>
          <span className="line">costs <em>while you can still</em></span>
          <span className="line">change it.</span>
        </h1>

        {/* Sub + CTA */}
        <div className={`hero-sub ${phase >= 3 ? 'in' : ''}`}>
          <p className="lead">
            Plumb sits between CAD and the shop floor. Watches every save.
            Tells you — within seconds — what the change just cost,
            how long it added, and whether the shop will push back.
          </p>

          <div className="hero-cta">
            <button className="btn" onClick={(e) => { window.attachRipple && window.attachRipple(e); onJoin(); }}>
              <span>Request access</span>
              <span className="arrow">→</span>
            </button>
            <a href="#how" className="btn ghost"
               onClick={(e) => { e.preventDefault(); window.attachRipple && window.attachRipple(e); window.smoothScrollTo && window.smoothScrollTo('how'); }}>
              <span>How it works</span>
            </a>
          </div>

          {/* Live readout strip */}
          <div className="hero-readout stagger" aria-label="example readout">
            <div className="hr-row stx">
              <span className="hr-icon prussian">$</span>
              <span className="hr-k">cost / unit</span>
              <span className="hr-v readout">$24.80</span>
              <span className="hr-d readout neg">−$1.30</span>
            </div>
            <div className="hr-row stx">
              <span className="hr-icon prussian">◴</span>
              <span className="hr-k">lead time</span>
              <span className="hr-v readout">9 d <span className="hr-range">to 14</span></span>
              <span className="hr-d readout">±0</span>
            </div>
            <div className="hr-row stx">
              <span className="hr-icon redline">⚠</span>
              <span className="hr-k">flags</span>
              <span className="hr-v readout">2 open</span>
              <span className="hr-d readout">wall &lt; 3mm</span>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero {
          position: relative;
          min-height: 100vh;
          padding: 0 0 96px;
          overflow: hidden;
        }
        .hero-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(to right, rgba(26,26,26,0.045) 1px, transparent 1px),
            linear-gradient(to bottom, rgba(26,26,26,0.045) 1px, transparent 1px);
          background-size: 64px 64px;
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 95%);
          -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 95%);
          pointer-events: none;
        }
        .hero-corners {
          position: absolute; inset: 0;
          padding: 24px 32px;
          font-family: var(--font-mono);
          font-size: 10px;
          color: rgba(26,26,26,0.34);
          letter-spacing: 0.08em;
          pointer-events: none;
        }
        @media (min-width: 768px) { .hero-corners { padding: 28px 48px; } }
        @media (min-width: 1280px) { .hero-corners { padding: 32px 64px; } }
        .hc { position: absolute; }
        .hc.tl { top: 24px; left: 32px; }
        .hc.tr { top: 24px; right: 32px; }
        .hc.bl { bottom: 24px; left: 32px; }
        .hc.br { bottom: 24px; right: 32px; }
        @media (min-width: 768px) {
          .hc.tl, .hc.bl { left: 48px; }
          .hc.tr, .hc.br { right: 48px; }
        }
        @media (min-width: 1280px) {
          .hc.tl, .hc.bl { left: 64px; }
          .hc.tr, .hc.br { right: 64px; }
        }

        .hero-inner {
          position: relative;
          padding-top: clamp(96px, 14vh, 180px);
        }

        .hero-eyebrow {
          display: flex; align-items: center; gap: 14px;
          font-family: var(--font-mono);
          font-size: 11px;
          letter-spacing: 0.1em;
          color: rgba(26,26,26,0.55);
          opacity: 0;
          transform: translateY(6px);
          transition: opacity 500ms var(--ease-standard) 60ms,
                      transform 500ms var(--ease-standard) 60ms;
        }
        .hero-eyebrow.in { opacity: 1; transform: none; }
        .hairspan { display: inline-block; width: 36px; height: 1px; background: rgba(26,26,26,0.4); }

        .bob-stage {
          position: absolute;
          top: 0;
          right: 8%;
          width: 80px;
          height: 100%;
          pointer-events: none;
          display: none;
        }
        @media (min-width: 900px) { .bob-stage { display: block; } }

        .bob-line {
          position: absolute;
          top: 0; left: 50%;
          width: 1px;
          background: var(--color-graphite);
          /* scaleY = settle (0..1 from intro animation) + scroll-driven extension (up to ~2x) */
          transform: translateX(-50%) scaleY(calc(var(--bob-settle, 0) + var(--bob-fall, 0) * 1.6));
          transform-origin: top center;
          height: clamp(160px, 26vh, 280px);
          transition: none;
          will-change: transform;
        }
        .bob-line.in { --bob-settle: 1; transition: --bob-settle 900ms cubic-bezier(0.4, 0, 0.2, 1); }
        @property --bob-settle {
          syntax: '<number>';
          inherits: true;
          initial-value: 0;
        }

        .bob-bob {
          position: absolute;
          left: 50%;
          /* Top base: hero line length. Then translateY adds the scroll fall. */
          top: clamp(160px, 26vh, 280px);
          /* y = base settle (-14px) + scroll-driven additional fall */
          --bob-y: calc(-14px + var(--bob-fall, 0) * (clamp(160px, 26vh, 280px) * 1.6) + var(--py-bob-line, 0px));
          --bob-scale: 0.6;
          transform: translate(-50%, var(--bob-y)) scale(var(--bob-scale));
          opacity: 0;
          transition:
            opacity 320ms var(--ease-standard),
            --bob-scale 380ms cubic-bezier(0.16, 1.0, 0.3, 1.05);
          will-change: transform;
        }
        .bob-bob.in {
          --bob-scale: 1;
          opacity: 1;
        }
        @property --bob-scale {
          syntax: '<number>';
          inherits: true;
          initial-value: 0.6;
        }

        .hero-h {
          margin-top: 24px;
          max-width: 18ch;
        }
        .hero-h .line {
          display: block;
          opacity: 0;
          transform: translateY(14px);
          transition: opacity 600ms var(--ease-standard), transform 600ms var(--ease-standard);
        }
        .hero-h.in .line:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
        .hero-h.in .line:nth-child(2) { opacity: 1; transform: none; transition-delay: 80ms; }
        .hero-h.in .line:nth-child(3) { opacity: 1; transform: none; transition-delay: 160ms; }

        .hero-sub {
          margin-top: 36px;
          max-width: 640px;
          opacity: 0;
          transform: translateY(8px);
          transition: opacity 600ms var(--ease-standard) 280ms,
                      transform 600ms var(--ease-standard) 280ms;
        }
        .hero-sub.in { opacity: 1; transform: none; }
        .hero-sub .lead { margin: 0 0 32px; }

        .hero-cta {
          display: flex; gap: 12px; flex-wrap: wrap;
          margin-bottom: 56px;
        }

        .hero-readout {
          display: grid;
          grid-template-columns: 1fr;
          gap: 0;
          max-width: 520px;
          background: var(--color-surface-white);
          border: 1px solid var(--border-default);
          border-radius: 3px;
          overflow: hidden;
        }
        .hr-row {
          display: grid;
          grid-template-columns: 24px 1fr auto auto;
          align-items: center;
          gap: 14px;
          padding: 12px 16px;
          border-bottom: 1px solid rgba(26,26,26,0.08);
        }
        .hr-row:last-child { border-bottom: 0; }
        .hr-icon {
          font-family: var(--font-mono);
          font-size: 14px;
          width: 24px; text-align: center;
        }
        .hr-icon.prussian { color: var(--color-prussian); }
        .hr-icon.redline { color: var(--color-redline); }
        .hr-k {
          font-family: var(--font-mono);
          font-size: 11px;
          color: rgba(26,26,26,0.55);
          letter-spacing: 0.04em;
        }
        .hr-v {
          font-size: 13px;
          color: var(--color-graphite);
          font-weight: 500;
        }
        .hr-range { color: rgba(26,26,26,0.45); font-weight: 400; }
        .hr-d {
          font-size: 11px;
          color: rgba(26,26,26,0.5);
          padding: 2px 6px;
          background: rgba(26,26,26,0.04);
          border-radius: 2px;
          min-width: 60px;
          text-align: right;
        }
        .hr-d.neg { color: var(--color-prussian); background: rgba(27,58,92,0.07); }
      `}</style>
    </section>
  );
};

window.PlumbHero = PlumbHero;