// ===== Blueprint CTA =====
// "Got your own blueprint?" — a rotating drafting table. Five blueprint
// sheets of the things we actually build (WEBSITE, CRM, DATABASE,
// AUTOMATION, DASHBOARD) draw themselves in sequence behind the copy, each
// with annotations, dimension chains and an updating title block — saying:
// whatever your blueprint is, we can draft it.
// GSAP cycles the sheets while the section is on screen; with no GSAP or
// reduced motion, the first sheet is simply visible, fully drawn.

function BlueprintSheets() {
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (
      window.__pdaReduceMotion ||
      typeof gsap === 'undefined' ||
      typeof ScrollTrigger === 'undefined'
    ) {
      return;
    }
    const root = ref.current;
    if (!root) return;

    const ctx = gsap.context(() => {
      const sheets = root.querySelectorAll('.bp-sheet');
      const tl = gsap.timeline({ repeat: -1, paused: true });
      sheets.forEach((sheet) => {
        const draws = sheet.querySelectorAll('.bp-draw');
        const fades = sheet.querySelectorAll('.bp-fade');
        tl.set(sheet, { opacity: 1 })
          .fromTo(draws,
            { strokeDasharray: 1, strokeDashoffset: 1 },
            { strokeDashoffset: 0, duration: 1.5, stagger: 0.04, ease: 'power1.inOut' })
          .fromTo(fades,
            { opacity: 0 },
            { opacity: 1, duration: 0.5, stagger: 0.04 }, '-=0.5')
          .to(sheet, { opacity: 0, duration: 0.55, ease: 'power2.in' }, '+=3');
      });
      ScrollTrigger.create({
        trigger: root,
        start: 'top 80%',
        end: 'bottom 20%',
        onToggle: (self) => (self.isActive ? tl.play() : tl.pause()),
      });
    }, root);
    return () => ctx.revert();
  }, []);

  const D = { className: 'bp-draw', pathLength: 1 };
  const MONO = { fontFamily: "'Space Grotesk', monospace", letterSpacing: 2 };

  return (
    <div className="bp-plan" aria-hidden="true" ref={ref}>
      <svg viewBox="0 0 1200 640" fill="none" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="bp-grid" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M40 0 H0 V40" stroke="rgba(80,140,200,.08)" strokeWidth="1" fill="none" />
          </pattern>
          <pattern id="bp-grid-major" width="200" height="200" patternUnits="userSpaceOnUse">
            <path d="M200 0 H0 V200" stroke="rgba(80,140,200,.13)" strokeWidth="1" fill="none" />
          </pattern>
        </defs>

        {/* shared chrome: grid paper, corner crosshairs, title block frame */}
        <rect x="0" y="0" width="1200" height="640" fill="url(#bp-grid)" />
        <rect x="0" y="0" width="1200" height="640" fill="url(#bp-grid-major)" />
        <g stroke="rgba(94,178,222,.3)" strokeWidth="1">
          <path d="M188 110 H212 M200 98 V122" />
          <path d="M988 110 H1012 M1000 98 V122" />
          <path d="M188 530 H212 M200 518 V542" />
          <path d="M988 530 H1012 M1000 518 V542" />
        </g>
        <g>
          <rect x="860" y="552" width="300" height="74" fill="rgba(14,18,30,.55)"
            stroke="rgba(94,178,222,.45)" strokeWidth="1.5" />
          <path d="M860 576 H1160 M860 600 H1160 M1030 552 V626"
            stroke="rgba(94,178,222,.3)" strokeWidth="1" />
          <g {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="592">DRAWN BY — PDA</text>
            <text x="1040" y="592">REV — ALWAYS</text>
            <text x="870" y="616">SCALE — AMBITION : 1</text>
            <text x="1040" y="616">DATE — TODAY</text>
          </g>
        </g>

        {/* ============ SHEET 1 — WEBSITE ============ */}
        <g className="bp-sheet" data-first="true">
          <g stroke="rgba(94,178,222,.5)" strokeWidth="2">
            <rect {...D} x="220" y="120" width="760" height="400" rx="8" />
            <path {...D} d="M220 162 H980" />
          </g>
          <g stroke="rgba(94,178,222,.4)" strokeWidth="1.5">
            <circle {...D} cx="246" cy="141" r="5" />
            <circle {...D} cx="266" cy="141" r="5" />
            <circle {...D} cx="286" cy="141" r="5" />
            <rect {...D} x="330" y="131" width="480" height="20" rx="10" />
            {/* nav */}
            <rect {...D} x="244" y="176" width="64" height="18" rx="4" />
            <path {...D} d="M790 185 H830 M850 185 H890 M910 185 H950" />
            {/* hero */}
            <rect {...D} x="244" y="212" width="712" height="118" rx="6" />
            <path {...D} d="M272 248 H560 M272 270 H480" />
            <rect {...D} x="272" y="292" width="110" height="26" rx="13" />
            <rect {...D} x="640" y="230" width="290" height="82" rx="4" />
            <path {...D} d="M640 230 L930 312 M930 230 L640 312" />
            {/* feature cards */}
            <rect {...D} x="244" y="352" width="220" height="100" rx="6" />
            <rect {...D} x="490" y="352" width="220" height="100" rx="6" />
            <rect {...D} x="736" y="352" width="220" height="100" rx="6" />
            <circle {...D} cx="276" cy="384" r="12" />
            <circle {...D} cx="522" cy="384" r="12" />
            <circle {...D} cx="768" cy="384" r="12" />
            <path {...D} d="M260 416 H440 M260 432 H380" />
            <path {...D} d="M506 416 H686 M506 432 H626" />
            <path {...D} d="M752 416 H932 M752 432 H872" />
            {/* footer */}
            <path {...D} d="M244 482 H956" />
          </g>
          <g stroke="rgba(42,216,200,.45)" strokeWidth="1">
            <path {...D} d="M220 120 V78 M980 120 V78" />
            <path {...D} d="M220 86 H980 M220 86 L232 81 M220 86 L232 91 M980 86 L968 81 M980 86 L968 91" />
          </g>
          <g className="bp-fade" {...MONO} fontSize="15" fill="rgba(140,200,230,.55)">
            <text x="244" y="208">NAV</text>
            <text x="900" y="248">HERO</text>
            <text x="244" y="346">FEATURES</text>
            <text x="244" y="476">FOOTER</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="13" fill="rgba(42,216,200,.5)">
            <text x="560" y="74">FIRST IMPRESSION — 0.05s</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="568">PROJECT — WEBSITE</text>
            <text x="1040" y="568">SHEET A-01</text>
          </g>
        </g>

        {/* ============ SHEET 2 — CRM ============ */}
        <g className="bp-sheet">
          <g stroke="rgba(94,178,222,.5)" strokeWidth="2">
            <rect {...D} x="240" y="140" width="210" height="360" rx="8" />
            <rect {...D} x="495" y="140" width="210" height="360" rx="8" />
            <rect {...D} x="750" y="140" width="210" height="360" rx="8" />
            <path {...D} d="M240 184 H450 M495 184 H705 M750 184 H960" />
          </g>
          <g stroke="rgba(94,178,222,.4)" strokeWidth="1.5">
            {/* cards: 3 / 2 / 1 */}
            <rect {...D} x="256" y="200" width="178" height="56" rx="5" />
            <rect {...D} x="256" y="268" width="178" height="56" rx="5" />
            <rect {...D} x="256" y="336" width="178" height="56" rx="5" />
            <rect {...D} x="511" y="200" width="178" height="56" rx="5" />
            <rect {...D} x="511" y="268" width="178" height="56" rx="5" />
            <rect {...D} x="766" y="200" width="178" height="56" rx="5" />
            <path {...D} d="M270 222 H380 M270 240 H340" />
            <path {...D} d="M270 290 H380 M270 308 H340" />
            <path {...D} d="M270 358 H380 M270 376 H340" />
            <path {...D} d="M525 222 H635 M525 240 H595" />
            <path {...D} d="M525 290 H635 M525 308 H595" />
            <path {...D} d="M780 222 H890 M780 240 H850" />
          </g>
          {/* flow arrows between stages */}
          <g stroke="rgba(42,216,200,.5)" strokeWidth="1.5">
            <path {...D} d="M455 320 H490 M490 320 L478 313 M490 320 L478 327" />
            <path {...D} d="M710 320 H745 M745 320 L733 313 M745 320 L733 327" />
          </g>
          <g stroke="rgba(42,216,200,.45)" strokeWidth="1">
            <path {...D} d="M240 500 V548 M960 500 V548" />
            <path {...D} d="M240 540 H960" />
          </g>
          <g className="bp-fade" {...MONO} fontSize="15" fill="rgba(140,200,230,.55)">
            <text x="256" y="170">LEADS</text>
            <text x="511" y="170">QUALIFIED</text>
            <text x="766" y="170">WON</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="13" fill="rgba(42,216,200,.5)">
            <text x="520" y="534">NOTHING FALLS THROUGH</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="568">PROJECT — CRM</text>
            <text x="1040" y="568">SHEET A-02</text>
          </g>
        </g>

        {/* ============ SHEET 3 — DATABASE ============ */}
        <g className="bp-sheet">
          <g stroke="rgba(94,178,222,.5)" strokeWidth="2">
            <rect {...D} x="250" y="150" width="210" height="124" rx="6" />
            <rect {...D} x="700" y="140" width="210" height="148" rx="6" />
            <rect {...D} x="470" y="370" width="210" height="124" rx="6" />
            <path {...D} d="M250 182 H460 M700 172 H910 M470 402 H680" />
          </g>
          <g stroke="rgba(94,178,222,.4)" strokeWidth="1.5">
            <path {...D} d="M266 206 H380 M266 230 H350 M266 254 H410" />
            <path {...D} d="M716 198 H830 M716 222 H800 M716 246 H860 M716 270 H780" />
            <path {...D} d="M486 426 H600 M486 450 H570 M486 474 H630" />
            {/* key icons */}
            <circle {...D} cx="436" cy="206" r="5" />
            <path {...D} d="M441 206 H452 M448 206 V212" />
            <circle {...D} cx="886" cy="198" r="5" />
            <path {...D} d="M891 198 H902 M898 198 V204" />
          </g>
          {/* relations with crow's feet */}
          <g stroke="rgba(42,216,200,.5)" strokeWidth="1.5">
            <path {...D} d="M460 212 H580 V140 H700" />
            <path {...D} d="M700 140 L688 133 M700 140 L688 147" />
            <path {...D} d="M805 288 V330 H575 V370" />
            <path {...D} d="M575 370 L568 358 M575 370 L582 358" />
          </g>
          <g className="bp-fade" {...MONO} fontSize="15" fill="rgba(140,200,230,.55)">
            <text x="266" y="174">CUSTOMERS</text>
            <text x="716" y="164">ORDERS</text>
            <text x="486" y="394">INVOICES</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="13" fill="rgba(42,216,200,.5)">
            <text x="588" y="128">1 : N</text>
            <text x="612" y="352">1 : N</text>
            <text x="250" y="540">ONE SOURCE OF TRUTH</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="568">PROJECT — DATABASE</text>
            <text x="1040" y="568">SHEET A-03</text>
          </g>
        </g>

        {/* ============ SHEET 4 — AUTOMATION ============ */}
        <g className="bp-sheet">
          <g stroke="rgba(94,178,222,.5)" strokeWidth="2">
            <rect {...D} x="250" y="160" width="170" height="46" rx="23" />
            <path {...D} d="M540 150 L630 205 L540 260 L450 205 Z" />
            <rect {...D} x="740" y="182" width="190" height="46" rx="6" />
            <rect {...D} x="740" y="300" width="190" height="46" rx="6" />
            <rect {...D} x="450" y="380" width="190" height="46" rx="6" />
          </g>
          {/* clock detail on the trigger */}
          <g stroke="rgba(94,178,222,.4)" strokeWidth="1.5">
            <circle {...D} cx="282" cy="183" r="11" />
            <path {...D} d="M282 176 V183 L289 187" />
          </g>
          {/* flow arrows */}
          <g stroke="rgba(42,216,200,.5)" strokeWidth="1.5">
            <path {...D} d="M420 183 H445 M445 183 L433 176 M445 183 L433 190" />
            <path {...D} d="M630 205 H735 M735 205 L723 198 M735 205 L723 212" />
            <path {...D} d="M835 228 V295 M835 295 L828 283 M835 295 L842 283" />
            <path {...D} d="M540 260 V375 M540 375 L533 363 M540 375 L547 363" />
            {/* nurture loops back to the decision, dashed */}
            <path className="bp-draw" pathLength={1} strokeDasharray="4 6"
              d="M450 403 H360 V205 H445" />
            <path {...D} d="M445 205 L433 198 M445 205 L433 212" />
          </g>
          <g className="bp-fade" {...MONO} fontSize="14" fill="rgba(140,200,230,.55)">
            <text x="268" y="188">NEW LEAD</text>
            <text x="492" y="210">QUALIFIED?</text>
            <text x="758" y="210">SEND PROPOSAL</text>
            <text x="772" y="328">BOOK CALL</text>
            <text x="472" y="408">NURTURE EMAIL</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="13" fill="rgba(42,216,200,.5)">
            <text x="648" y="196">YES</text>
            <text x="552" y="290">NOT YET</text>
            <text x="250" y="540">RUNS WHILE YOU SLEEP</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="568">PROJECT — AUTOMATION</text>
            <text x="1040" y="568">SHEET A-04</text>
          </g>
        </g>

        {/* ============ SHEET 5 — DASHBOARD ============ */}
        <g className="bp-sheet">
          <g stroke="rgba(94,178,222,.5)" strokeWidth="2">
            <rect {...D} x="240" y="140" width="220" height="80" rx="6" />
            <rect {...D} x="490" y="140" width="220" height="80" rx="6" />
            <rect {...D} x="740" y="140" width="220" height="80" rx="6" />
            <rect {...D} x="240" y="250" width="340" height="250" rx="6" />
            <rect {...D} x="620" y="250" width="340" height="250" rx="6" />
          </g>
          <g stroke="rgba(94,178,222,.4)" strokeWidth="1.5">
            <path {...D} d="M256 196 H330 M506 196 H580 M756 196 H830" />
            {/* bar chart */}
            <path {...D} d="M268 470 V286 M268 470 H552" />
            <rect {...D} x="292" y="420" width="36" height="50" />
            <rect {...D} x="344" y="390" width="36" height="80" />
            <rect {...D} x="396" y="404" width="36" height="66" />
            <rect {...D} x="448" y="350" width="36" height="120" />
            <rect {...D} x="500" y="316" width="36" height="154" />
            {/* line chart */}
            <path {...D} d="M648 470 V286 M648 470 H932" />
            <path {...D} d="M664 440 L724 414 L784 426 L844 360 L904 318" />
            <circle {...D} cx="724" cy="414" r="4" />
            <circle {...D} cx="844" cy="360" r="4" />
            <circle {...D} cx="904" cy="318" r="4" />
          </g>
          <g className="bp-fade" {...MONO} fontSize="14" fill="rgba(140,200,230,.55)">
            <text x="256" y="172">LEADS / MO</text>
            <text x="506" y="172">REVENUE</text>
            <text x="756" y="172">HOURS SAVED</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="13" fill="rgba(42,216,200,.5)">
            <text x="240" y="540">SEE EVERYTHING AT A GLANCE</text>
            <text x="868" y="306">↑ THIS IS YOU</text>
          </g>
          <g className="bp-fade" {...MONO} fontSize="12" fill="rgba(140,200,230,.6)">
            <text x="870" y="568">PROJECT — DASHBOARD</text>
            <text x="1040" y="568">SHEET A-05</text>
          </g>
        </g>
      </svg>
      <div className="bp-scrim" />
    </div>
  );
}

function HomeBlueprintCTA() {
  return (
    <section className="bp-section" aria-label="Got your own blueprint?">
      <BlueprintSheets />
      <div className="container bp-inner">
        <h2 className="bp-heading">Got your own blueprint?</h2>
        <p className="bp-subheading">We&rsquo;ll build whatever you need.</p>
        <div className="bp-cta">
          <button
            className="btn btn-primary"
            onClick={() => window.PDAOpenBuilder && window.PDAOpenBuilder()}
          >
            <span className="btn-label">Let&rsquo;s Get To Work</span>
          </button>
        </div>
      </div>
    </section>
  );
}
window.HomeBlueprintCTA = HomeBlueprintCTA;