// VARIANT D — "Split-screen scroll-pinned" — FINAL
// Printer pinned on the left half of the viewport throughout the hero.
// Right side scrolls content past — printer builds continuously.
// Clean printer (no overlays/dark bg) + TE-inspired bundle picker + mono/tech voice.

const GT3D_LINKS = {
  instagram: 'https://www.instagram.com/gt3dprints/',
  // Google Business Profile: GT3D Prints, 308 11a St NW, Calgary
  review: 'https://www.google.com/maps/search/GT3D+Prints+Calgary', // TODO: replace with write-review link (placeid)
  email: 'requestsgt3d@gmail.com',
};

// ─────────────────────────────────────────────────────────────────────────────
// TEMPORARY CLOSURE
//
// TO REOPEN: set GT3D_STATUS.open = true. That single flag restores the banner,
// the nav CTA, the pricing/lead-time copy, and the Formspree quote form. Nothing
// else needs to be edited — the form JSX and submitBrief() are still intact below.
// ─────────────────────────────────────────────────────────────────────────────
const GT3D_STATUS = {
  open: false,
  returns: 'spring 2027',
  reason: 'the operator has had to return to school for the year',
};
// ─────────────────────────────────────────────────────────────────────────────

// Verbatim Google reviews from the GT3D Prints Business Profile (5.0 ★, 8 reviews).
// DO NOT edit the quote text — these are real customer reviews and must stay
// word-for-word. To feature a different one, pull it from the profile as written.
const GT3D_REVIEWS = [
  {
    name: 'Benny Le',
    item: 'quality + speed',
    text: 'I ordered my 3D prints, and they turned out to be amazing quality prints, and done so very quickly. I would highly recommend this 3D printing service if you value speed and quality. Thank you Griffin!',
  },
  {
    name: 'Sophie Bagley',
    item: 'custom jewelry holder',
    text: 'I ordered a custom jewelry holder and it perfectly holds everything I requested. I would definitely recommend ordering from here it was fast and beautiful!',
  },
  {
    name: 'Brady Morgan',
    item: 'bike part',
    text: 'Ordered a bike part and it fits perfect! It was ready for pickup right away, super easy process. Would definitely recommend',
  },
  {
    name: 'Ruby',
    item: 'planters',
    text: 'I got plant pots from here. They were great quality: they held water well and were very durable while still looking decorative. Would definitely recommend!',
  },
  {
    name: 'Diego Phillips',
    item: 'custom print',
    text: 'I was honestly so happy with the speed and quality of what was made for me. He exceeded my expectations on what I wanted made. 10/10 would really recommend!',
  },
  {
    name: 'Rachelle Tranquille',
    item: 'custom print',
    text: 'Amazing product and great customer service! My custom 3D print was ready quickly and turned out great. Highly recommended!',
  },
];

const VariantD = ({ model, annot }) => {
  const heroRef = React.useRef(null);
  const progress = useScrollProgress(heroRef, { pinEnd: 0.95 });

  const temp = (205 + Math.sin(progress * 40) * 4).toFixed(1);
  const bedTemp = (58 + Math.sin(progress * 20) * 1.2).toFixed(1);
  const speed = (60 + Math.sin(progress * 60) * 8).toFixed(0);

  // ---------- contact form state ----------
  const [formState, setFormState] = React.useState('idle'); // idle|sending|ok|dupe|err
  const [lastSent, setLastSent] = React.useState(null);

  const submitBrief = async (e) => {
    e.preventDefault();
    // block double-clicks and repeat submissions while locked
    if (formState === 'sending' || formState === 'ok') return;
    const fd = new FormData(e.currentTarget);
    // duplicate guard: same name + contact + description as the last successful send
    const fingerprint = [fd.get('name'), fd.get('contact'), fd.get('description')]
      .join('|').toLowerCase().replace(/\s+/g, ' ').trim();
    if (lastSent && fingerprint === lastSent) {
      setFormState('dupe');
      setTimeout(() => setFormState('idle'), 4000);
      return;
    }
    setFormState('sending');
    fd.set('_subject', 'New GT3D Quote Request');
    try {
      const res = await fetch('https://formspree.io/f/xykngkav', {
        method:'POST', body: fd, headers:{ 'Accept':'application/json' }
      });
      if (res.ok) {
        setFormState('ok');
        setLastSent(fingerprint);
        e.target.reset();
        // lock the form on "sent ✓" for 8s before allowing another request
        setTimeout(() => setFormState('idle'), 8000);
      }
      else setFormState('err');
    } catch { setFormState('err'); }
  };

  // smooth-scroll helper for nav links + buttons
  const scrollTo = (id) => (e) => {
    if (e) e.preventDefault();
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className={`wf wf-d ${GT3D_STATUS.open ? '' : 'is-closed'}`} data-screen-label="gt3d — home">
      {!GT3D_STATUS.open && (
        <div className="wf-closed-banner" role="status">
          <div className="wf-closed-banner-inner">
            <span className="wf-closed-dot" />
            <span className="wf-closed-tag">status</span>
            <span className="wf-closed-msg">
              <strong>temporarily closed.</strong> gt3d is not taking new orders — back {GT3D_STATUS.returns}.
            </span>
            <a href="#contact" onClick={scrollTo('contact')} className="wf-closed-more">details ↓</a>
          </div>
        </div>
      )}

      <div className="wf-nav wf-nav-d">
        <div className="wf-logo-d"><span className="wf-logo-d-mark">◈</span> gt3d<span className="wf-logo-d-slash">//</span><span className="wf-logo-d-sub">studio</span></div>
        <div className="wf-nav-links">
          {[
            ['01','services'],['02','process'],['03','pricing'],['04','reviews'],['05','contact']
          ].map(([n,l])=>(
            <a key={l} href={`#${l}`} onClick={scrollTo(l)}><span className="wf-nav-n">{n}/</span>{l}</a>
          ))}
          <SketchBtn
            label={GT3D_STATUS.open ? 'request quote →' : 'closed — read notice ↓'}
            primary={GT3D_STATUS.open}
            onClick={scrollTo('contact')}
          />
        </div>
      </div>

      {/* floating top actions — review bubble + instagram */}
      <div className="wf-top-actions">
        <a href={GT3D_LINKS.review} target="_blank" rel="noopener noreferrer" className="wf-review-pill">
          <span className="wf-review-star">★</span> leave a google review
        </a>
        <a href={GT3D_LINKS.instagram} target="_blank" rel="noopener noreferrer" className="wf-ig-top" aria-label="gt3d on instagram" title="@gt3dprints">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
            <rect x="2.5" y="2.5" width="19" height="19" rx="5.5" />
            <circle cx="12" cy="12" r="4.4" />
            <circle cx="17.3" cy="6.7" r="1.15" fill="currentColor" stroke="none" />
          </svg>
        </a>
      </div>

      {/* HERO — split: left pinned printer (sticky), right scrolling content */}
      <section ref={heroRef} className="wf-hero-d">
        <Annotation side="right" top={6} show={annot}>Left pane pinned / sticky. Right pane scrolls 4 frames past it while printer builds.</Annotation>

        <div className="wf-hero-d-left">
          <div className="wf-hero-d-sticky">
            {/* HUD: file + progress */}
            <div className="wf-hud">
              <div className="wf-hud-row">
                <span className="wf-hud-dot" />
                <span>file · hex_planter_v3.gcode</span>
                <span className="wf-hud-pct">{(progress*100).toFixed(1)}%</span>
              </div>
              <div className="wf-hero-d-prog">
                <div className="wf-hero-d-prog-bar" style={{width: `${progress*100}%`}} />
                {[20,40,60,80].map(t=>(<span key={t} className="wf-hero-d-prog-tick" style={{left: `${t}%`}} />))}
              </div>
              <div className="wf-hud-row wf-hud-row-sub">
                <span>layer {String(Math.floor(progress*42)).padStart(2,'0')}/42</span>
                <span>ext {temp}°c</span>
                <span>bed {bedTemp}°c</span>
                <span>fan {speed}%</span>
              </div>
            </div>

            {/* printer — clean, no overlays */}
            <div className="wf-printer-frame">
              <PrinterScene progress={progress} model={model} width={520} height={520} label={false} />
            </div>

            {/* spec panel */}
            <div className="wf-hero-d-specs">
              <div><div className="wf-spec-key">model</div><div className="wf-spec-val">hex_planter_v3</div></div>
              <div><div className="wf-spec-key">material</div><div className="wf-spec-val">pla · terracotta</div></div>
              <div><div className="wf-spec-key">nozzle</div><div className="wf-spec-val">0.4mm @ 210°c</div></div>
              <div><div className="wf-spec-key">layer_h</div><div className="wf-spec-val">0.20mm</div></div>
              <div><div className="wf-spec-key">infill</div><div className="wf-spec-val">15% gyroid</div></div>
              <div><div className="wf-spec-key">weight</div><div className="wf-spec-val">{(progress * 82).toFixed(0)}g / 82g</div></div>
            </div>
          </div>
        </div>

        <div className="wf-hero-d-right">
          {/* frame 1 — intro */}
          <div className="wf-frame">
            <div className="wf-frame-head">
              <span>§ 01</span>
              <span className="wf-frame-head-line" />
              <span>intro</span>
            </div>
            <h1 className="sk-h1-tech">
              custom<span className="wf-num">/</span>3d<br/>
              printing<span className="wf-num">_</span><br/>
              <em>anything.</em>
            </h1>
            <p className="wf-lede">one maker. a small fleet of printers. calgary-based. small-batch, hand-inspected prints — from a single cable clip to a 200-unit run.</p>
            {!GT3D_STATUS.open && (
              <p className="wf-lede wf-closed-lede">
                <strong>the studio is closed right now.</strong> gt3d is a one-person shop and {GT3D_STATUS.reason}, so new orders, quotes and rush jobs are paused until {GT3D_STATUS.returns}. everything below describes the service as it runs when open.
              </p>
            )}
            <div className="wf-kv">
              <div><span>location</span><span>calgary · ab · canada</span></div>
              <div><span>method</span><span>fdm · pla · petg</span></div>
              <div><span>lead_time</span><span>{GT3D_STATUS.open ? '1–3 days standard · 24–48h rush' : `paused · resuming ${GT3D_STATUS.returns}`}</span></div>
              <div><span>status</span><span>{GT3D_STATUS.open ? 'open · taking orders' : 'closed · not taking orders'}</span></div>
            </div>
            <div className="sk-cta-row">
              <SketchBtn
                label={GT3D_STATUS.open ? 'request a quote →' : 'read the closure notice ↓'}
                primary
                onClick={scrollTo('contact')}
              />
              <SketchBtn label="view process ↗" onClick={()=>window.open(GT3D_LINKS.instagram,'_blank','noopener')} />
            </div>
          </div>

          {/* frame 2 — what we print */}
          <div className="wf-frame">
            <div className="wf-frame-head">
              <span>§ 02</span>
              <span className="wf-frame-head-line" />
              <span>objects</span>
            </div>
            <h2 className="sk-h2-tech">
              <span className="wf-num">01</span> planters.<br/>
              <span className="wf-num">02</span> stands.<br/>
              <span className="wf-num">03</span> minis.<br/>
              <span className="wf-num">04</span> parts.
            </h2>
            <p className="wf-lede">anything under 256mm³. send a photo, a sketch, a link, or an .stl — whatever you've got.</p>
            <div className="wf-kv wf-kv-compact">
              <div><span>range</span><span>3cm → 25cm</span></div>
              <div><span>colors</span><span>∞ · 34 in stock</span></div>
              <div><span>revisions</span><span>1–2 included</span></div>
            </div>
          </div>

          {/* frame 3 — pipeline */}
          <div className="wf-frame" id="process">
            <div className="wf-frame-head">
              <span>§ 03</span>
              <span className="wf-frame-head-line" />
              <span>pipeline</span>
            </div>
            <div className="wf-frame-steps">
              {[
                ['01','brief','msg · photo · sketch · .stl file'],
                ['02','quote','price range + timeline · same day'],
                ['03','print','slice · print · hand-inspect'],
                ['04','deliver','free pickup · shipping at cost'],
              ].map(([n,t,d])=>(
                <div key={n} className="wf-frame-step">
                  <span className="wf-frame-step-n">{n}</span>
                  <span className="wf-frame-step-t">{t}</span>
                  <span className="wf-frame-step-arrow">→</span>
                  <span className="wf-frame-step-d">{d}</span>
                </div>
              ))}
            </div>
          </div>

          {/* frame 4 — origin / promo */}
          <div className="wf-frame">
            <div className="wf-frame-head">
              <span>§ 04</span>
              <span className="wf-frame-head-line" />
              <span>origin</span>
            </div>
            <h2 className="sk-h2-tech">one maker.<br/><em>many printers.</em><br/>calgary/ca.</h2>
            <p className="wf-lede">not a marketplace. not a factory. every order is sliced, printed, and inspected by the same person in a studio on the northwest side of the city.</p>
          </div>
        </div>
      </section>

      {/* spec ticker */}
      <div className="wf-ticker wf-ticker-d">
        <span>{GT3D_STATUS.open
          ? '> pla · petg · 0.20mm layers · 0.4mm nozzle · 24hr rush · ∞ colors · canada shipping · 100% custom · pla · petg · 0.20mm layers · 0.4mm nozzle · 24hr rush'
          : `> studio closed · not taking orders · reopening ${GT3D_STATUS.returns} · studio closed · not taking orders · reopening ${GT3D_STATUS.returns} · studio closed · not taking orders · reopening ${GT3D_STATUS.returns}`}</span>
      </div>

      {/* services catalog */}
      <section className="wf-section" id="services">
        <div className="wf-sec-head-tech">
          <SectionLabel n="§ 05">services / catalog</SectionLabel>
          <div className="wf-sec-count">06 categories</div>
        </div>
        <div className="wf-spec-rows">
          <div className="wf-spec-row wf-spec-row-head">
            <span>#</span>
            <span>category</span>
            <span>description</span>
            <span className="wf-right">range</span>
            <span className="wf-right">·</span>
          </div>
          {[
            ['gaming_hobby','miniatures, terrain, dice towers, props','$8–60'],
            ['custom_gifts','keychains, figures, nameplates, ornaments','$12–45'],
            ['home_decor','planters, wall art, organizers, hooks','$18–80'],
            ['functional','brackets, mounts, replacement parts, jigs','$15–100'],
            ['cosplay_props','armor plates, accessories, wearable parts','$25–175'],
            ['design+print','idea → cad → print · 1–2 revisions','$60–175'],
          ].map(([t,d,p],i)=>(
            <div key={t} className="wf-spec-row">
              <span className="wf-spec-row-n">{String(i+1).padStart(2,'0')}</span>
              <span className="wf-spec-row-t">{t}</span>
              <span className="wf-spec-row-d">{d}</span>
              <span className="wf-spec-row-p">{p}</span>
              <span className="wf-spec-row-a">→</span>
            </div>
          ))}
        </div>
      </section>

      {/* speed callout */}
      <section className="wf-callout wf-callout-dark wf-callout-tech">
        <div className="wf-callout-tech-label">§ 06 / {GT3D_STATUS.open ? 'speed' : 'status'}</div>
        {GT3D_STATUS.open ? (
          <>
            <h2 className="sk-h2-tech">01—03d<br/>turnaround.</h2>
            <div className="wf-callout-tech-meta">
              <div><span>standard</span><code>1–3 days</code></div>
              <div><span>rush</span><code>24–48 hrs · +50%</code></div>
              <div><span>response</span><code>≤ same day</code></div>
            </div>
            <SketchBtn label="request a rush quote →" primary onClick={scrollTo('contact')} />
          </>
        ) : (
          <>
            <h2 className="sk-h2-tech">closed<br/>until {GT3D_STATUS.returns}.</h2>
            <div className="wf-callout-tech-meta">
              <div><span>new orders</span><code>not accepted</code></div>
              <div><span>rush jobs</span><code>unavailable</code></div>
              <div><span>reopening</span><code>{GT3D_STATUS.returns}</code></div>
            </div>
            <SketchBtn label="read the full notice ↓" primary onClick={scrollTo('contact')} />
          </>
        )}
      </section>

      {/* pricing tiers */}
      <section className="wf-section" id="pricing">
        <div className="wf-sec-head-tech">
          <SectionLabel n="§ 07">pricing / tiers</SectionLabel>
          <div className="wf-sec-count">all cad {GT3D_STATUS.open ? '' : '· not bookable while closed'}</div>
        </div>
        <div className="wf-price-table wf-price-table-tech">
          <div className="wf-price-row wf-price-row-head">
            <div>tier</div>
            <div>price</div>
            <div>size</div>
            <div>turnaround</div>
            <div>inclusions</div>
            <div className="wf-right">·</div>
          </div>
          {[
            ['small','$8–15','≤ 8cm','1–2 days','pla/petg · 1 revision'],
            ['medium','$18–40','8–15cm','2–3 days','std + specialty · 2 revisions', true],
            ['large','$45–100','15cm+','3–5 days','premium finish · progress pics'],
            ['design+print','$60–175','custom','5–7 days','cad from idea or file'],
            ['rush','+50%','any','24–48h','priority queue'],
          ].map(r=>(
            <a key={r[0]} href="#contact" onClick={scrollTo('contact')} className={`wf-price-row wf-price-row-link ${r[5]?'wf-price-row-hl':''}`}>
              <div className="wf-price-cell wf-price-name">{r[0]}</div>
              <div className="wf-price-cell sk-price-mono">{r[1]}</div>
              <div className="wf-price-cell">{r[2]}</div>
              <div className="wf-price-cell">{r[3]}</div>
              <div className="wf-price-cell">{r[4]}</div>
              <div className="wf-price-cell wf-price-cta">{GT3D_STATUS.open ? 'quote →' : 'closed'}</div>
            </a>
          ))}
        </div>
      </section>

      {/* Maker narrative */}
      <section className="wf-maker wf-maker-d">
        <div>
          <SectionLabel n="§ 08">origin / canada</SectionLabel>
          <h2 className="sk-h2-tech">designed<br/>in canada.</h2>
          <p className="wf-lede">a one-person studio on the edge of calgary. everything you order is printed, cleaned, and checked by hand, on a single machine, by the same person who answered your email.</p>
          <div className="wf-kv">
            <div><span>studio</span><span>calgary · ab · 51.04°n</span></div>
            <div><span>operator</span><span>1</span></div>
            <div><span>printers</span><span>1 · fdm · 256 × 256 × 256</span></div>
            <div><span>inspection</span><span>by hand, every unit</span></div>
          </div>
        </div>
        <a
          href={GT3D_LINKS.review}
          target="_blank"
          rel="noopener noreferrer"
          className="wf-rating-card"
        >
          <div className="wf-rating-stars">★★★★★</div>
          <div className="wf-rating-num">5.0</div>
          <div className="wf-rating-sub">8 reviews · google</div>
          <div className="wf-rating-rule" />
          <div className="wf-rating-note">every review left for gt3d, so far, is five stars.</div>
          <div className="wf-rating-link">read them on google ↗</div>
        </a>
      </section>

      {/* reviews — verbatim from the google business profile */}
      <section className="wf-section" id="reviews">
        <div className="wf-sec-head-tech">
          <SectionLabel n="§ 09">reviews / customers</SectionLabel>
          <div className="wf-sec-count">5.0 ★ · 8 on google</div>
        </div>
        <div className="wf-reviews-grid">
          {GT3D_REVIEWS.map((r, i) => (
            <SketchBox key={r.name} className="wf-review-card">
              <div className="wf-review-head">
                <span className="wf-review-n">{String(i + 1).padStart(2, '0')}</span>
                <span className="wf-review-item">{r.item}</span>
                <span className="wf-review-stars">★★★★★</span>
              </div>
              <p className="wf-review-quote">{r.text}</p>
              <div className="wf-review-foot">
                <span className="wf-review-name">{r.name}</span>
                <span className="wf-review-src">via google</span>
              </div>
            </SketchBox>
          ))}
        </div>
        <a href={GT3D_LINKS.review} target="_blank" rel="noopener noreferrer" className="wf-reviews-all">
          read all 8 reviews on google ↗
        </a>
      </section>

      {/* made_for */}
      <section className="wf-section">
        <div className="wf-sec-head-tech">
          <SectionLabel n="§ 10">made_for</SectionLabel>
          <div className="wf-sec-count">08 segments</div>
        </div>
        <div className="wf-grid-4 wf-who-grid-d">
          {[
            ['gamers','d&d · rc · cosplay'],
            ['homeowners','decor · gifts · fixes'],
            ['small_biz','signage · swag'],
            ['medical','demo · anatomy'],
            ['schools','stem · awards'],
            ['contractors','brackets · jigs'],
            ['events','props · favors'],
            ['makers','prototypes · parts'],
          ].map(([t,d])=>(
            <SketchBox key={t} className="wf-who wf-who-d">
              <div className="wf-who-d-n">◈</div>
              <div className="wf-who-d-t">{t}</div>
              <div className="wf-who-d-d">{d}</div>
            </SketchBox>
          ))}
        </div>
      </section>

      {/* contact */}
      <section className="wf-section wf-contact" id="contact">
        <div className="wf-contact-left">
          <SectionLabel n="§ 11">{GT3D_STATUS.open ? 'contact / quote' : 'contact / closure notice'}</SectionLabel>
          <h2 className="sk-h2-tech">{GT3D_STATUS.open ? 'send a brief.' : 'temporarily closed.'}</h2>
          <p className="wf-lede">
            {GT3D_STATUS.open
              ? 'describe what you need. attach a photo, sketch, or file if you have one. response within the same day.'
              : `gt3d prints is a one-person studio, and ${GT3D_STATUS.reason}. the printers are packed up, so no new orders, quotes or rush jobs are being taken until ${GT3D_STATUS.returns}.`}
          </p>
          {!GT3D_STATUS.open && (
            <p className="wf-lede">
              if you sent a request through this site or called and haven’t heard back — that one’s on me, and an apology is on its way to you directly. thanks for your patience.
            </p>
          )}
          <div className="wf-kv">
            <div><span>email</span><span><a href={`mailto:${GT3D_LINKS.email}`} className="wf-link wf-link-u">{GT3D_LINKS.email}</a></span></div>
            <div><span>instagram</span><span><a href={GT3D_LINKS.instagram} target="_blank" rel="noopener noreferrer" className="wf-link wf-link-u">@gt3dprints ↗</a></span></div>
            <div><span>response</span><span>{GT3D_STATUS.open ? '≤ same day' : 'delayed — email is monitored occasionally'}</span></div>
            <div><span>reopening</span><span>{GT3D_STATUS.open ? 'open now' : GT3D_STATUS.returns}</span></div>
          </div>
          <div className="wf-kv" style={{marginTop:14}}>
            <div><span>reviews</span><span>happy with your print? <a href={GT3D_LINKS.review} target="_blank" rel="noopener noreferrer" className="wf-link wf-link-u">leave a google review ↗</a></span></div>
          </div>
        </div>
        {!GT3D_STATUS.open && (
          <SketchBox className="wf-form wf-form-d wf-closed-card">
            <div className="wf-form-d-head">
              <span>▸ intake_offline</span>
              <span className="wf-form-d-dot is-closed" />
            </div>
            <div className="wf-closed-card-title">quote requests are turned off</div>
            <p className="wf-closed-card-body">
              the request form has been disabled rather than left running, so nothing gets sent into an
              inbox that won’t be answered. no order, deposit or quote is being accepted until the studio
              reopens in {GT3D_STATUS.returns}.
            </p>
            <div className="wf-closed-card-list">
              <div><span>01</span><span>existing requests — you’ll get a direct reply, no action needed</span></div>
              <div><span>02</span><span>new work — please check back {GT3D_STATUS.returns}</span></div>
              <div><span>03</span><span>anything urgent — email below, expect a slow reply</span></div>
            </div>
            <div className="wf-closed-card-actions">
              <a href={`mailto:${GT3D_LINKS.email}?subject=GT3D%20—%20after%20reopening`} className="wf-closed-mail">
                {GT3D_LINKS.email} →
              </a>
              <a href={GT3D_LINKS.instagram} target="_blank" rel="noopener noreferrer" className="wf-closed-ig">
                follow @gt3dprints for the reopen ↗
              </a>
            </div>
            <div className="wf-closed-card-foot">
              notice posted {new Date().toLocaleDateString('en-CA', { year: 'numeric', month: 'long' })} · calgary, ab
            </div>
          </SketchBox>
        )}

        {GT3D_STATUS.open && (
        <SketchBox as="form" className="wf-form wf-form-d" onSubmit={submitBrief}>
          <div className="wf-form-d-head">
            <span>▸ new_brief</span>
            <span className={`wf-form-d-dot ${formState==='sending'?'is-sending':''}`} />
          </div>
          <div className="wf-form-row">
            <div>
              <div className="wf-spec-key">name</div>
              <input className="wf-input" name="name" type="text" placeholder="your name" required />
            </div>
            <div>
              <div className="wf-spec-key">contact</div>
              <input className="wf-input" name="contact" type="text" placeholder="email or phone" required />
            </div>
          </div>
          <div className="wf-spec-key">project_type</div>
          <select className="wf-input wf-select" name="project_type" defaultValue="">
            <option value="">— select —</option>
            <option>home / décor</option>
            <option>gaming / hobby</option>
            <option>cosplay / props</option>
            <option>functional part</option>
            <option>custom gift</option>
            <option>prototype</option>
            <option>rush order</option>
            <option>other</option>
          </select>
          <div className="wf-spec-key">describe your project</div>
          <textarea className="wf-input wf-textarea" name="description" placeholder="size, color, quantity, timeline — anything helps." required />
          <SketchBtn
            label={
              formState==='sending' ? 'sending…' :
              formState==='ok'      ? 'sent ✓ — we’ll be in touch' :
              formState==='dupe'    ? 'already received ✓ — no need to resend' :
              formState==='err'     ? 'error — email us directly' :
              'send brief →'
            }
            primary
            type="submit"
            style={{
              marginTop:14, display:'block', textAlign:'center', width:'100%',
              ...(formState==='sending' || formState==='ok' ? {opacity:.65, pointerEvents:'none'} : {})
            }}
          />
          <input type="hidden" name="_subject" value="New GT3D Quote Request" />
        </SketchBox>
        )}
      </section>

      {/* meta strip */}
      <div className={`wf-meta-strip ${GT3D_STATUS.open ? '' : 'is-closed'}`}>
        {GT3D_STATUS.open ? (
          <>
            <span>free pickup in calgary</span>
            <span>·</span>
            <span>shipping at cost, canada-wide</span>
            <span>·</span>
            <span>7-day satisfaction on stock prints</span>
          </>
        ) : (
          <>
            <span>studio closed</span>
            <span>·</span>
            <span>no orders, pickups or shipping until {GT3D_STATUS.returns}</span>
            <span>·</span>
            <span>thanks for your patience</span>
          </>
        )}
      </div>

      <footer className="wf-footer wf-footer-d">
        <div className="wf-footer-d-left">
          <div className="wf-logo-d"><span className="wf-logo-d-mark">◈</span> gt3d<span className="wf-logo-d-slash">//</span><span className="wf-logo-d-sub">studio</span></div>
        </div>
        <div className="wf-footer-d-links">
          {['process','pricing','reviews','contact'].map(l=>(
            <a key={l} href={`#${l}`} onClick={scrollTo(l)} className="wf-link">{l}</a>
          ))}
          <a href={GT3D_LINKS.instagram} target="_blank" rel="noopener noreferrer" className="wf-link">instagram ↗</a>
          <a href={GT3D_LINKS.review} target="_blank" rel="noopener noreferrer" className="wf-link">review us ↗</a>
        </div>
        <div className="wf-footer-d-meta">
          <span>calgary/ab/ca</span>
          <span>·</span>
          <span>©2026</span>
        </div>
      </footer>
    </div>
  );
};

window.VariantD = VariantD;