/* global React */
const { useState: useStateH, useEffect: useEffectH, useRef: useRefH } = React;

// Animated counter that pulses up
function useCountUp(target, duration = 1200) {
  const [v, setV] = useStateH(0);
  useEffectH(() => {
    let raf, start;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min((t - start) / duration, 1);
      setV(Math.floor(target * (1 - Math.pow(1 - p, 3))));
      if (p < 1) raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [target, duration]);
  return v;
}

// Live blueprint demo — a fake floor plan with measurement annotations animating in
function BlueprintDemo() {
  const area = useCountUp(556, 1400);
  const doors = useCountUp(5, 1200);
  const linear = useCountUp(124, 1500);

  return (
    <div className="hero-app" aria-label="ProTakeoff measuring a floor plan">
      <div className="hero-app-shell">
        <div className="hero-app-bar">
          <span className="dot dot-r"></span>
          <span className="dot dot-y"></span>
          <span className="dot dot-g"></span>
          <span className="hero-app-title mono">Ground floor — measure mode</span>
          <span className="hero-app-zoom mono">100%</span>
        </div>

        <div className="hero-app-canvas">
          <svg viewBox="0 0 600 380" preserveAspectRatio="xMidYMid meet" className="hero-svg">
            <defs>
              <pattern id="bp-grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(45,64,234,0.10)" strokeWidth="0.5"/>
              </pattern>
              <pattern id="bp-grid-major" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
                <path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(45,64,234,0.18)" strokeWidth="0.8"/>
              </pattern>
            </defs>

            {/* Background grid */}
            <rect width="600" height="380" fill="#FFFDF9"/>
            <rect width="600" height="380" fill="url(#bp-grid)"/>
            <rect width="600" height="380" fill="url(#bp-grid-major)"/>

            {/* Building outline */}
            <g stroke="#1A1A1A" strokeWidth="2.2" fill="none">
              <path d="M60 60 L460 60 L460 200 L520 200 L520 320 L60 320 Z"/>
            </g>

            {/* Interior walls */}
            <g stroke="#1A1A1A" strokeWidth="1.4" fill="none">
              <line x1="60" y1="180" x2="280" y2="180"/>
              <line x1="280" y1="60" x2="280" y2="320"/>
              <line x1="280" y1="240" x2="460" y2="240"/>
              <line x1="380" y1="60" x2="380" y2="180"/>
            </g>

            {/* Filled measurement region (animated) */}
            <g className="hero-fill">
              <path d="M62 62 L278 62 L278 178 L62 178 Z" fill="rgba(45,64,234,0.10)" stroke="#2D40EA" strokeWidth="1.5" strokeDasharray="4 4"/>
            </g>

            {/* Door swings (count items) */}
            <g stroke="#C2352D" strokeWidth="1.6" fill="none">
              <path d="M150 178 a18 18 0 0 1 18 -18" />
              <line x1="150" y1="178" x2="168" y2="178" strokeWidth="3"/>
              <path d="M270 110 a18 18 0 0 0 -18 -18" />
              <line x1="270" y1="110" x2="270" y2="92" strokeWidth="3"/>
              <path d="M380 150 a18 18 0 0 1 18 18" />
              <line x1="380" y1="150" x2="380" y2="168" strokeWidth="3"/>
              <path d="M460 280 a18 18 0 0 0 18 18" />
              <line x1="460" y1="280" x2="478" y2="280" strokeWidth="3"/>
              <path d="M280 290 a18 18 0 0 1 18 -18" />
              <line x1="280" y1="290" x2="298" y2="290" strokeWidth="3"/>
            </g>

            {/* Door counters — animated dots */}
            <g className="hero-counts">
              <DoorCount cx="158" cy="170" n="1"/>
              <DoorCount cx="262" cy="100" n="2"/>
              <DoorCount cx="390" cy="158" n="3"/>
              <DoorCount cx="468" cy="288" n="4"/>
              <DoorCount cx="288" cy="282" n="5"/>
            </g>

            {/* Dimension line (animated) */}
            <g className="hero-dim">
              <line x1="62" y1="44" x2="278" y2="44" stroke="#2D40EA" strokeWidth="1"/>
              <line x1="62" y1="40" x2="62" y2="48" stroke="#2D40EA" strokeWidth="1"/>
              <line x1="278" y1="40" x2="278" y2="48" stroke="#2D40EA" strokeWidth="1"/>
              <rect x="140" y="32" width="60" height="16" rx="3" fill="#FFFDF9" stroke="#2D40EA" strokeWidth="0.6"/>
              <text x="170" y="44" fontFamily="JetBrains Mono" fontSize="9" fill="#1A1A1A" textAnchor="middle">21'-7"</text>
            </g>

            {/* Cursor + crosshair */}
            <g className="hero-cursor">
              <circle cx="170" cy="120" r="14" fill="none" stroke="#2D40EA" strokeWidth="1" opacity="0.4"/>
              <circle cx="170" cy="120" r="3" fill="#2D40EA"/>
              <line x1="170" y1="60" x2="170" y2="180" stroke="rgba(45,64,234,0.4)" strokeWidth="0.6" strokeDasharray="3 3"/>
              <line x1="62" y1="120" x2="278" y2="120" stroke="rgba(45,64,234,0.4)" strokeWidth="0.6" strokeDasharray="3 3"/>
            </g>

            {/* Tape ruler floating */}
            <g transform="translate(420, 76)">
              <rect width="80" height="22" rx="4" fill="#1A1A1A"/>
              <text x="10" y="15" fontFamily="JetBrains Mono" fontSize="9" fill="#FFFFEB">SCALE 1/8" = 1'</text>
            </g>
          </svg>

          {/* Floating measurement readout */}
          <div className="hero-readout">
            <div className="readout-row">
              <span className="readout-label mono">Net area</span>
              <span className="readout-num serif-it">{area}.21<span className="readout-unit"> sf</span></span>
            </div>
            <div className="readout-row">
              <span className="readout-label mono">Doors</span>
              <span className="readout-num serif-it">{doors}</span>
            </div>
            <div className="readout-row">
              <span className="readout-label mono">Linear</span>
              <span className="readout-num serif-it">{linear}<span className="readout-unit"> lf</span></span>
            </div>
          </div>

          {/* Cost ticker */}
          <div className="hero-tape">
            <span className="tape-pulse"></span>
            <span className="mono">Live estimate</span>
            <span className="tape-amt serif-it">$48,260</span>
          </div>
        </div>

        {/* Toolbar */}
        <div className="hero-app-tools">
          <ToolBtn active><IconRuler size={14}/> <span>Length</span></ToolBtn>
          <ToolBtn><IconCount size={14}/> <span>Count</span></ToolBtn>
          <ToolBtn><IconLayers size={14}/> <span>Area</span></ToolBtn>
          <ToolBtn><IconScissors size={14}/> <span>Cutout</span></ToolBtn>
          <span className="hero-app-spacer"/>
          <span className="mono hero-app-page">PAGE A‑201 / 12</span>
        </div>
      </div>

      <style>{`
        .hero-app { position: relative; width: 100%; max-width: 720px; margin-left: auto; }
        .hero-app-shell {
          background: var(--cream-soft);
          border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
          border-radius: 28px;
          overflow: hidden;
          box-shadow:
            0 30px 80px rgba(26,26,26,0.18),
            0 1px 0 0 rgba(255,255,255,0.6) inset;
        }
        .hero-app-bar {
          display: flex; align-items: center; gap: 8px;
          padding: 12px 16px;
          border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
          background: color-mix(in srgb, var(--cream) 50%, transparent);
        }
        .hero-app-bar .dot { width: 10px; height: 10px; border-radius: 999px; }
        .dot-r { background: #C2352D; }
        .dot-y { background: #FFA946; }
        .dot-g { background: #034F46; }
        .hero-app-title { font-size: 11px; color: var(--ink-mute); margin-left: 14px; }
        .hero-app-zoom { font-size: 11px; color: var(--ink-mute); margin-left: auto; }
        .hero-app-canvas {
          position: relative;
          background: #FFFDF9;
          aspect-ratio: 600 / 380;
        }
        .hero-svg { width: 100%; height: 100%; display: block; }

        .hero-readout {
          position: absolute; top: 16px; right: 16px;
          background: var(--cream);
          border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
          border-radius: 16px;
          padding: 14px 16px;
          min-width: 168px;
          box-shadow: 0 12px 30px rgba(26,26,26,0.10);
        }
        .readout-row { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; }
        .readout-row + .readout-row { border-top: 1px dashed color-mix(in srgb, var(--ink) 12%, transparent); margin-top: 4px; padding-top: 8px; }
        .readout-label { font-size: 9px; color: var(--ink-mute); }
        .readout-num { font-size: 24px; line-height: 1; color: var(--ink); }
        .readout-unit { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-style: normal; color: var(--ink-mute); margin-left: 4px; }

        .hero-tape {
          position: absolute; bottom: 16px; left: 16px;
          display: flex; align-items: center; gap: 12px;
          background: var(--ink);
          color: var(--cream);
          padding: 10px 16px;
          border-radius: 999px;
          font-size: 11px;
        }
        .hero-tape .tape-pulse {
          width: 8px; height: 8px; border-radius: 999px; background: var(--orange);
          animation: pulse-soft 1.4s ease-in-out infinite;
        }
        .tape-amt { font-size: 16px; color: var(--cream); }

        .hero-app-tools {
          display: flex; align-items: center; gap: 4px;
          padding: 10px 12px;
          border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
          background: color-mix(in srgb, var(--cream) 60%, transparent);
        }
        .hero-app-spacer { flex: 1; }
        .hero-app-page { font-size: 10px; color: var(--ink-mute); }

        .hero-fill { animation: hero-fill-in 1.6s var(--ease-haptic) both; }
        @keyframes hero-fill-in { from { opacity: 0; } to { opacity: 1; } }
        .hero-cursor { animation: hero-cursor-drift 6s ease-in-out infinite; transform-origin: center; }
        @keyframes hero-cursor-drift {
          0%, 100% { transform: translate(0, 0); }
          25% { transform: translate(20px, -10px); }
          50% { transform: translate(-10px, 14px); }
          75% { transform: translate(-22px, -6px); }
        }
        .hero-dim { animation: hero-fade-in 1s 0.4s var(--ease-haptic) both; }
        @keyframes hero-fade-in { from { opacity: 0; } to { opacity: 1; } }

        @media (max-width: 720px) {
          .hero-readout { display: none; }
          .hero-tape { font-size: 10px; padding: 8px 12px; bottom: 10px; left: 10px; }
          .tape-amt { font-size: 13px; }
        }
      `}</style>
    </div>
  );
}

function DoorCount({ cx, cy, n }) {
  return (
    <g className="hero-count-pip" style={{ animationDelay: `${0.2 + n * 0.18}s` }}>
      <circle cx={cx} cy={cy} r="9" fill="#C2352D"/>
      <text x={cx} y={cy + 3} fontFamily="JetBrains Mono" fontSize="9" fill="#FFFFEB" textAnchor="middle" fontWeight="700">{n}</text>
      <style>{`
        .hero-count-pip { animation: count-pop 0.6s var(--ease-bounce) both; transform-origin: center; transform-box: fill-box; }
        @keyframes count-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
      `}</style>
    </g>
  );
}

function ToolBtn({ children, active }) {
  return (
    <button className={`tool-btn ${active ? 'tool-btn-active' : ''}`} type="button">
      {children}
      <style>{`
        .tool-btn {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 7px 11px;
          border-radius: 999px;
          font-size: 11px; font-weight: 600;
          color: var(--ink-soft);
          border: 1px solid transparent;
          transition: background 0.2s, color 0.2s, border-color 0.2s;
        }
        .tool-btn:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); }
        .tool-btn-active {
          background: var(--cream);
          color: var(--ink);
          border-color: color-mix(in srgb, var(--ink) 12%, transparent);
          box-shadow: 0 1px 0 0 var(--ink) inset;
        }
      `}</style>
    </button>
  );
}

function HeroFinalGifOverlay() {
  return (
    <div className="hero-gif-overlay" aria-label="ProTakeoff live measuring preview">
      <img src="uploads/finalgif.gif" alt="ProTakeoff measuring takeoffs on a construction plan" loading="eager"/>

      <style>{`
        .hero-gif-overlay {
          position: relative;
          width: min(1460px, 108vw);
          min-height: clamp(580px, 66vw, 980px);
          margin: -34px 0 0 clamp(-96px, -4vw, -42px);
          overflow: visible;
          isolation: isolate;
          pointer-events: none;
        }
        .hero-gif-overlay::before {
          content: "";
          position: absolute;
          inset: 4% -16% 0 -10%;
          border-radius: 28px;
          background: radial-gradient(ellipse at 62% 48%, rgba(132,204,22,0.15), transparent 64%);
          filter: blur(34px);
          opacity: 0.64;
          z-index: -1;
        }
        .hero-gif-overlay img {
          position: absolute;
          inset: 49% auto auto 50%;
          width: min(2120px, 242%);
          height: auto;
          max-width: none;
          transform: translate(-34%, -50%);
          border-radius: 0;
          opacity: 0.5;
          filter: saturate(0.96) contrast(1.05);
          mix-blend-mode: screen;
          -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 15%, #000 34%, #000 82%, transparent 100%),
            radial-gradient(ellipse 82% 70% at 58% 49%, #000 0%, #000 52%, rgba(0,0,0,0.62) 68%, transparent 88%);
          mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.18) 15%, #000 34%, #000 82%, transparent 100%),
            radial-gradient(ellipse 82% 70% at 58% 49%, #000 0%, #000 52%, rgba(0,0,0,0.62) 68%, transparent 88%);
          -webkit-mask-composite: source-in;
          mask-composite: intersect;
        }
        html[data-theme="cream"] .hero-gif-overlay img {
          opacity: 0.68;
          mix-blend-mode: multiply;
          filter: saturate(0.92) contrast(1.03);
        }
        @media (max-width: 1023px) {
          .hero-gif-overlay {
            min-height: 520px;
            margin: 0;
          }
          .hero-gif-overlay img {
            width: min(1560px, 236%);
            transform: translate(-50%, -50%);
            opacity: 0.5;
          }
        }
        @media (max-width: 640px) {
          .hero-gif-overlay {
            min-height: 380px;
          }
          .hero-gif-overlay img {
            width: 220%;
            opacity: 0.42;
          }
        }
      `}</style>
    </div>
  );
}

function VideoPlaylistModal({ open, onClose }) {
  const [activeIndex, setActiveIndex] = useStateH(0);
  const videos = [
    {
      id: 'HQ72fX-gK48',
      title: 'ProTakeoff Intro',
      kicker: 'How to use ProTakeoff for faster bids',
    },
    {
      id: '35PfpbpHGrs',
      title: 'Auto Rename',
      kicker: 'Rename drawing pages faster from the plan set.',
    },
    {
      id: 'ZLHDNAY56io',
      title: 'Assemblies',
      kicker: 'Build reusable estimating assemblies for repeat work.',
    },
    {
      id: 'J1IIrG1quvU',
      title: 'Edit Item Properties',
      kicker: 'Adjust item details, values, and estimate fields.',
    },
    {
      id: 'x30nPIMomXE',
      title: 'Overlay Pages',
      kicker: 'Compare revised drawings over the base sheet.',
    },
    {
      id: 'bFtEbmAeC_Q',
      title: 'Auto Count',
      kicker: 'Find repeated symbols and approve takeoff points.',
    },
  ];
  const active = videos[activeIndex];

  useEffectH(() => {
    if (!open) return;
    const onKey = (event) => {
      if (event.key === 'Escape') onClose();
    };
    const originalOverflow = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    window.addEventListener('keydown', onKey);
    return () => {
      document.body.style.overflow = originalOverflow;
      window.removeEventListener('keydown', onKey);
    };
  }, [open, onClose]);

  if (!open) return null;

  return (
    <div className="video-modal" role="dialog" aria-modal="true" aria-labelledby="video-modal-title">
      <button className="video-modal-backdrop" type="button" aria-label="Close video playlist" onClick={onClose}></button>
      <div className="video-modal-panel">
        <div className="video-modal-head">
          <div>
            <span className="video-modal-kicker mono">ProTakeoff playlist</span>
            <h2 id="video-modal-title" className="video-modal-title">Watch Intro</h2>
          </div>
          <button className="video-modal-close" type="button" onClick={onClose} aria-label="Close video playlist">
            <span></span>
            <span></span>
          </button>
        </div>

        <div className="video-modal-body">
          <div className="video-frame">
            <iframe
              key={active.id}
              src={`https://www.youtube.com/embed/${active.id}?si=4WkBvgznuFioR9T1&autoplay=1&rel=0`}
              title={`${active.title} video`}
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>

          <aside className="video-playlist" aria-label="Video playlist">
            <span className="video-playlist-label mono">Playlist</span>
            {videos.map((video, index) => (
              <button
                className={`video-playlist-item ${index === activeIndex ? 'active' : ''}`}
                type="button"
                key={video.id}
                onClick={() => setActiveIndex(index)}
                aria-pressed={index === activeIndex}
              >
                <span className="video-play-icon"><IconPlay size={11}/></span>
                <span className="video-play-copy">
                  <span>{video.title}</span>
                  <small>{video.kicker}</small>
                </span>
                <span className="video-play-index mono">{String(index + 1).padStart(2, '0')}</span>
              </button>
            ))}
            <a className="video-channel-link mono" href="https://www.youtube.com/@protakeoff" target="_blank" rel="noopener noreferrer">
              View YouTube channel
              <IconArrow size={12}/>
            </a>
          </aside>
        </div>
      </div>

      <style>{`
        .video-modal {
          position: fixed;
          inset: 0;
          z-index: 120;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 24px;
        }
        .video-modal-backdrop {
          position: absolute;
          inset: 0;
          background:
            radial-gradient(circle at 50% 20%, rgba(255,255,255,0.12), transparent 38%),
            rgba(0,0,0,0.78);
          backdrop-filter: blur(18px);
        }
        .video-modal-panel {
          position: relative;
          z-index: 1;
          width: min(1120px, 100%);
          max-height: min(760px, calc(100dvh - 48px));
          overflow: hidden;
          border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
          border-radius: 18px;
          background: #08080A;
          box-shadow: 0 36px 110px rgba(0,0,0,0.58);
          animation: video-modal-in 0.32s var(--ease-haptic) both;
        }
        @keyframes video-modal-in {
          from { opacity: 0; transform: translateY(14px) scale(0.985); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }
        .video-modal-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 18px;
          padding: 18px 18px 16px;
          border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .video-modal-kicker {
          display: block;
          margin-bottom: 6px;
          font-size: 10px;
          color: var(--ink-mute);
        }
        .video-modal-title {
          font-family: 'Inter', sans-serif;
          font-size: clamp(1.2rem, 2vw, 1.8rem);
          font-weight: 600;
          color: #FFFFFF;
          letter-spacing: -0.02em;
        }
        .video-modal-close {
          position: relative;
          width: 42px;
          height: 42px;
          flex: 0 0 auto;
          border: 1px solid rgba(255,255,255,0.14);
          border-radius: 999px;
          background: rgba(255,255,255,0.06);
          transition: transform 0.22s var(--ease-haptic), background 0.22s, border-color 0.22s;
        }
        .video-modal-close:hover {
          transform: translateY(-1px);
          background: rgba(255,255,255,0.12);
          border-color: rgba(255,255,255,0.28);
        }
        .video-modal-close span {
          position: absolute;
          left: 12px;
          right: 12px;
          top: 20px;
          height: 1.5px;
          background: #FFFFFF;
          border-radius: 999px;
        }
        .video-modal-close span:first-child { transform: rotate(45deg); }
        .video-modal-close span:last-child { transform: rotate(-45deg); }
        .video-modal-body {
          display: grid;
          grid-template-columns: 1fr;
        }
        @media (min-width: 900px) {
          .video-modal-body { grid-template-columns: minmax(0, 1fr) 320px; }
        }
        .video-frame {
          position: relative;
          aspect-ratio: 16 / 9;
          min-height: 240px;
          background: #000;
        }
        .video-frame iframe {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          border: 0;
          display: block;
        }
        .video-playlist {
          display: flex;
          flex-direction: column;
          gap: 12px;
          padding: 18px;
          overflow-y: auto;
          border-top: 1px solid rgba(255,255,255,0.1);
          background: rgba(255,255,255,0.03);
        }
        @media (min-width: 900px) {
          .video-playlist {
            border-top: none;
            border-left: 1px solid rgba(255,255,255,0.1);
          }
        }
        .video-playlist-label {
          font-size: 10px;
          color: var(--ink-mute);
        }
        .video-playlist-item {
          width: 100%;
          display: grid;
          grid-template-columns: 34px minmax(0, 1fr) auto;
          align-items: center;
          gap: 12px;
          padding: 12px;
          text-align: left;
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 12px;
          color: #FFFFFF;
          background: rgba(255,255,255,0.04);
          transition: transform 0.22s var(--ease-haptic), background 0.22s, border-color 0.22s;
        }
        .video-playlist-item:hover {
          transform: translateY(-1px);
          background: rgba(255,255,255,0.08);
          border-color: rgba(255,255,255,0.18);
        }
        .video-playlist-item.active {
          border-color: rgba(132,204,22,0.38);
          background: rgba(132,204,22,0.1);
        }
        .video-play-icon {
          width: 34px;
          height: 34px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 999px;
          color: #FFFFFF;
          background: rgba(255,255,255,0.12);
          transition: background 0.22s, color 0.22s;
        }
        .video-playlist-item.active .video-play-icon { color: #000; background: var(--signal); }
        .video-play-copy {
          display: flex;
          flex-direction: column;
          min-width: 0;
          gap: 3px;
        }
        .video-play-copy span {
          font-size: 13px;
          font-weight: 600;
          color: #FFFFFF;
        }
        .video-play-copy small {
          font-size: 11px;
          line-height: 1.35;
          color: rgba(255,255,255,0.58);
        }
        .video-play-index {
          color: rgba(255,255,255,0.36);
          font-size: 10px;
        }
        .video-channel-link {
          margin-top: auto;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          width: 100%;
          padding-top: 16px;
          border-top: 1px solid rgba(255,255,255,0.1);
          color: rgba(255,255,255,0.68);
          font-size: 10px;
          transition: color 0.22s;
        }
        .video-channel-link:hover { color: #FFFFFF; }
        @media (max-width: 640px) {
          .video-modal { padding: 12px; align-items: flex-start; }
          .video-modal-panel { max-height: calc(100dvh - 24px); overflow-y: auto; border-radius: 14px; }
          .video-modal-head { padding: 14px; }
          .video-modal-close { width: 38px; height: 38px; }
          .video-frame { min-height: 190px; }
        }
      `}</style>
    </div>
  );
}

// ============== HERO ==============
function Hero() {
  const [videoOpen, setVideoOpen] = useStateH(false);

  return (
    <section className="hero">
      <div className="hero-bg blueprint-bg" aria-hidden="true"></div>
      <div className="hero-final-bg" aria-hidden="true">
        <img src="uploads/finalgif.gif" alt=""/>
      </div>

      <div className="wrap hero-wrap">
        <div className="hero-grid">
          <div className="hero-text">
            <Reveal>
              <Eyebrow>Built for contractors · v3.4</Eyebrow>
            </Reveal>

            <Reveal delay={80}>
              <h1 className="display hero-h1">
                Win the bid <span className="serif-it accent-it">before</span><br/>
                the clock <span className="squiggle">runs out.</span>
              </h1>
            </Reveal>

            <Reveal delay={160}>
              <p className="hero-sub">
                Modern takeoff and estimating for contractors who care about speed and
                margin. Measure plans in minutes, build accurate estimates, and get the
                tools you need for a fraction of what others charge.
              </p>
            </Reveal>

            <Reveal delay={220}>
              <div className="hero-ctas">
                <a href="#download" className="btn btn-primary">
                  <IconWindows size={16}/>
                  Download for Windows
                  <span className="arrow"><IconArrow size={13}/></span>
                </a>
                <button
                  type="button"
                  onClick={() => setVideoOpen(true)}
                  className="btn btn-secondary"
                  aria-label="Open the ProTakeoff intro video playlist"
                >
                  <span className="arrow play"><IconPlay size={11}/></span>
                  Watch Intro
                </button>
              </div>
            </Reveal>

            <Reveal delay={300}>
              <ul className="hero-bullets">
                <li><IconCheck size={14}/> 30-day full trial</li>
                <li><IconCheck size={14}/> No credit card</li>
                <li><IconCheck size={14}/> Works offline · 100% local</li>
              </ul>
            </Reveal>
          </div>

        </div>

        {/* Proof strip */}
        <Reveal delay={400}>
          <div className="hero-proof">
            <div className="proof-cell">
              <span className="proof-num serif-it">4×</span>
              <span className="proof-label">faster takeoffs vs. manual</span>
            </div>
            <div className="proof-cell">
              <span className="proof-num serif-it">200+</span>
              <span className="proof-label">contractors estimating daily</span>
            </div>
            <div className="proof-cell">
              <span className="proof-num serif-it">12k</span>
              <span className="proof-label">bids quoted last quarter</span>
            </div>
            <div className="proof-cell">
              <span className="proof-num serif-it">$1.4B</span>
              <span className="proof-label">in scope measured · cumulative</span>
            </div>
          </div>
        </Reveal>
      </div>

      <style>{`
        .hero {
          position: relative;
          padding: 132px 0 80px;
          overflow: hidden;
          min-height: 100dvh;
        }
        @media (min-width: 1024px) { .hero { padding: 156px 0 96px; } }

        .hero-bg {
          position: absolute; inset: 0;
          z-index: 0;
          mask-image: radial-gradient(ellipse at center top, #000 30%, transparent 80%);
        }
        .hero-final-bg {
          position: absolute;
          inset: 0;
          z-index: 0;
          pointer-events: none;
          overflow: hidden;
        }
        .hero-final-bg img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          max-width: none;
          object-fit: cover;
          object-position: center center;
          opacity: 0.5;
          filter: saturate(0.9) contrast(1.06) brightness(0.82);
          mix-blend-mode: screen;
        }
        .hero-final-bg::after {
          content: "";
          position: absolute;
          inset: 0;
          background:
            linear-gradient(90deg, rgba(0,0,0,0.94) 0%, rgba(0,0,0,0.7) 24%, rgba(0,0,0,0.34) 54%, rgba(0,0,0,0.62) 100%),
            linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.12) 34%, rgba(0,0,0,0.7) 100%);
        }
        html[data-theme="cream"] .hero-final-bg img {
          opacity: 0.62;
          mix-blend-mode: multiply;
          filter: saturate(0.88) contrast(1.02) brightness(1.02);
        }
        html[data-theme="cream"] .hero-final-bg::after {
          background:
            linear-gradient(90deg, rgba(255,255,235,0.92) 0%, rgba(255,255,235,0.68) 28%, rgba(255,255,235,0.22) 58%, rgba(255,255,235,0.72) 100%),
            linear-gradient(180deg, rgba(255,255,235,0.82) 0%, rgba(255,255,235,0.12) 38%, rgba(255,255,235,0.78) 100%);
        }

        .hero-wrap { position: relative; z-index: 1; }
        .hero-text { position: relative; z-index: 3; }
        .hero-grid {
          display: grid; grid-template-columns: 1fr; gap: 56px;
          align-items: center;
        }
        @media (min-width: 1024px) {
          .hero-grid { grid-template-columns: minmax(420px, 0.72fr) 1fr; gap: 80px; }
        }

        .hero-h1 {
          font-size: clamp(2.6rem, 7.5vw, 6.4rem);
          margin-top: 22px;
          color: var(--ink);
        }
        .hero-h1 .accent-it { color: var(--forest); }
        [data-theme="forest"] .hero-h1 .accent-it { color: var(--orange); }
        [data-theme="blueprint"] .hero-h1 .accent-it { color: var(--sky); }

        .hero-sub {
          margin: 26px 0 0;
          max-width: 540px;
          font-size: clamp(1rem, 1.05vw + 0.7rem, 1.2rem);
          font-weight: 500;
          line-height: 1.5;
          color: var(--ink-soft);
        }

        .hero-ctas {
          position: relative;
          z-index: 5;
          display: flex; flex-wrap: wrap; gap: 12px;
          margin-top: 32px;
        }
        .hero-ctas .btn { padding: 16px 24px; cursor: pointer; }
        .hero-ctas .btn-secondary:hover {
          transform: translateY(-1px);
          background: color-mix(in srgb, var(--ink) 8%, transparent);
          border-color: color-mix(in srgb, var(--ink) 42%, transparent);
        }
        .hero-ctas .btn-secondary:active { transform: translateY(0); }
        .hero-ctas .play { background: var(--ink); color: var(--orange); }

        .hero-bullets {
          display: flex; flex-wrap: wrap; gap: 22px;
          margin-top: 24px;
          font-size: 13px; color: var(--ink-soft);
        }
        .hero-bullets li { display: inline-flex; align-items: center; gap: 6px; }
        .hero-bullets svg { color: var(--forest); }
        [data-theme="forest"] .hero-bullets svg { color: var(--orange); }

        .hero-proof {
          margin-top: 88px;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 20px;
          padding: 28px 8px;
          border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
          border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
        }
        @media (min-width: 768px) { .hero-proof { grid-template-columns: repeat(4, 1fr); } }

        .proof-cell { padding: 0 16px; display: flex; flex-direction: column; gap: 8px; }
        .proof-cell + .proof-cell { border-left: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
        @media (max-width: 767px) {
          .proof-cell:nth-child(odd) { border-left: none; }
          .proof-cell:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); padding-top: 18px; }
        }
        .proof-num { font-size: 38px; line-height: 1; color: var(--ink); }
        .proof-label { font-size: 12px; color: var(--ink-mute); font-weight: 500; }
      `}</style>
      <VideoPlaylistModal open={videoOpen} onClose={() => setVideoOpen(false)}/>
    </section>
  );
}

window.Hero = Hero;
