/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSlider, TweakText */
const { useState, useEffect, useRef } = React;

/* =================== Brand mark · italic V monogram =================== */
const LogoV = ({ size = 28, showWord = false }) => (
  <svg viewBox="0 0 120 140" width={size} height={size * (140/120)} aria-label="Veldagency" style={{ display:'block' }}>
    <defs>
      <linearGradient id={`iri-v-${size}`} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%"  stopColor="#f3efe4"/>
        <stop offset="40%" stopColor="#e2dcce"/>
        <stop offset="70%" stopColor="#aaa496"/>
        <stop offset="100%" stopColor="#5a544c"/>
      </linearGradient>
    </defs>
    <text x="60" y="98"
      textAnchor="middle"
      fontFamily="'Instrument Serif', serif"
      fontStyle="italic"
      fontSize="130"
      fill={`url(#iri-v-${size})`}
      letterSpacing="-3">V</text>
    {showWord && (
      <text x="60" y="122"
        textAnchor="middle"
        fontFamily="'Inter Tight', sans-serif"
        fontSize="8"
        letterSpacing="6"
        fill="#aaa496">VELDAGENCY</text>
    )}
  </svg>
);

/* =================== Icons =================== */
const Ico = {
  arrow: (p) => (
    <svg viewBox="0 0 16 16" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M3 8h10M9 4l4 4-4 4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  arrowUR: (p) => (
    <svg viewBox="0 0 16 16" width={p.size||12} height={p.size||12} fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M5 11L11 5M5 5h6v6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  user: () => (
    <svg viewBox="0 0 20 20" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="10" cy="7" r="3"/><path d="M4 17c1-3 3.5-4 6-4s5 1 6 4" strokeLinecap="round"/>
    </svg>
  ),
  shield: () => (
    <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M8 1.5L2 4v4c0 3.5 2.5 5.8 6 6.5 3.5-.7 6-3 6-6.5V4L8 1.5z" strokeLinejoin="round"/>
    </svg>
  ),
  play: () => (
    <svg viewBox="0 0 16 16" width="14" height="14"><path fill="currentColor" d="M5 3l8 5-8 5V3z"/></svg>
  ),
  down: () => (
    <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M8 3v10M4 9l4 4 4-4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

/* =================== Brand wordmarks for strip =================== */
const TrustedBy = () => {
  const items = [
    {name:"Forbes", style:{ fontFamily:"'Veld Serif', serif", fontSize:18, letterSpacing:'.04em' }},
    {name:"Cosmopolitan", style:{ fontFamily:"'Veld Serif', serif", fontSize:14, letterSpacing:'.18em', textTransform:'uppercase' }},
    {name:"Maxim", style:{ fontFamily:"'Veld Serif', serif", fontSize:18, fontStyle:'italic', letterSpacing:'.06em' }},
    {name:"BUSINESS INSIDER", style:{ fontSize:11, fontWeight:700, letterSpacing:'.22em' }},
    {name:"playboy.", style:{ fontSize:15, fontWeight:600, letterSpacing:'.04em' }},
    {name:"GQ", style:{ fontFamily:"'Veld Serif', serif", fontSize:22, fontWeight:600, letterSpacing:'.05em' }},
    {name:"VOGUE", style:{ fontFamily:"'Veld Serif', serif", fontSize:18, fontWeight:600, letterSpacing:'.32em' }},
  ];
  return (
    <div className="strip">
      {items.map((it,i)=>(
        <div className="item" key={i} style={it.style}>{it.name}</div>
      ))}
    </div>
  );
};

/* =================== Hero =================== */
const Hero = ({ variant, accent, headline, sub, decor, videoSrc, videoBlur, videoIntensity, fogMix, onPickBlend }) => {
  const variants = {
    A: {
      h: <>A closed‑door operation for <span className="iri">creators who already win</span>.</>,
      sub: "Closed roster of 22 creators. End‑to‑end management — chat ops, traffic, legal, banking. 30‑day rolling contract, no exclusivity tricks.",
    },
    B: {
      h: <>The quiet team behind <span className="iri">top OnlyFans creators</span>.</>,
      sub: "An invitation‑only management house. Marketing, chatting, retention, compliance — engineered like a brand, not a side hustle.",
    },
    C: {
      h: <>Quiet money.<br/><span className="iri">Operational scale.</span></>,
      sub: "Veldagency runs full‑stack OnlyFans operations for a hand‑picked roster. From traffic to chat to compliance.",
    },
  };
  const v = variants[variant] || variants.A;
  const h = headline || v.h;
  const s = sub || v.sub;

  return (
    <section className="hero" data-variant={variant} data-screen-label="01 Hero">
      <div className="hero-frame">
        {/* cinematic background — Higgsfield video + optional CSS fog overlay */}
        <div className={"cine" + (videoSrc ? " has-video" : "")}>
          {videoSrc && (
            <video
              key={videoSrc}
              src={videoSrc}
              autoPlay muted loop playsInline
              style={{
                filter: `blur(${videoBlur ?? 6}px) saturate(118%) brightness(1.15) contrast(1.05)`,
                opacity: (videoIntensity ?? 100) / 100,
              }}
            />
          )}
          {(!videoSrc || (fogMix ?? 0) > 0) && (
            <div className="cine-fallback"
              style={{
                background: accent,
                opacity: videoSrc ? (fogMix ?? 0) / 100 : 1,
              }}
            />
          )}
        </div>

        {decor && (
          <div className="horizons">
            <svg preserveAspectRatio="none" viewBox="0 0 1200 800">
              <path d="M0,360 C300,360 360,260 600,260 C840,260 900,360 1200,360"/>
              <path d="M0,520 C300,520 360,620 600,620 C840,620 900,520 1200,520"/>
            </svg>
          </div>
        )}

        {decor && <div className="streaks"><span className="s"/><span className="s"/><span className="s"/><span className="s"/></div>}

        {/* Play badge removed — was decorative noise */}

        {/* Corner tags (signal-style) — neutral, no revenue claims */}
        {decor && variant !== 'B' && (
          <>
            <div className="corner-tag tl">
              <div className="knob">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M8 2L14 13H2L8 2z"/></svg>
              </div>
              <div className="meta"><b>Roster</b><i>22 active</i></div>
            </div>
            <div className="corner-tag tr">
              <div className="knob">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="8" cy="8" r="6"/><path d="M5 8h6M8 5v6" strokeLinecap="round"/></svg>
              </div>
              <div className="meta"><b>Q2 intake</b><i>3 seats open</i></div>
            </div>
            <div className="corner-tag bl">
              <div className="knob">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><circle cx="8" cy="8" r="6"/><circle cx="8" cy="8" r="2.5"/></svg>
              </div>
              <div className="meta"><b>Coverage</b><i>24/7 · MIA · LIS</i></div>
            </div>
            <div className="corner-tag br">
              <div className="knob">
                <svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="3" y="3" width="10" height="10" rx="2"/></svg>
              </div>
              <div className="meta"><b>Contract</b><i>30‑day rolling</i></div>
            </div>
          </>
        )}

        {/* Center stack */}
        <div className="hero-center">
          <div className="hero-eyebrow">
            <span className="dot"/>
            <span>Invitation‑only roster · 2026 intake</span>
            <span className="arr">→</span>
          </div>
          <h1 className="hero-h">{h}</h1>
          <p className="hero-sub">{s}</p>
          <div className="hero-ctas">
            <a className="btn btn-ghost" href="#apply">Apply as creator <Ico.arrowUR/></a>
            <a className="btn btn-light" href="#roles">Work with us</a>
          </div>
        </div>

        {/* Bottom row */}
        <div className="hero-foot">
          <div className="scroll-pill">
            <div className="ico"><Ico.down/></div>
            <span>01 / 04 · Scroll</span>
          </div>
          <div className="hero-tag-bot">
            <div className="lbl">Closed roster</div>
            <div className="ticks">
              <span className="on"/><span/><span/><span/>
            </div>
          </div>
        </div>
      </div>

      <TrustedBy/>
    </section>
  );
};

/* =================== Stats =================== */
const Stats = () => (
  <section className="sect-tight" data-screen-label="02 Stats">
    <div className="wrap">
      <div className="stats reveal d1">
        <div className="stat"><div className="n">$14M<sup>+</sup></div><div className="lbl">Roster net revenue · rolling 12 months</div></div>
        <div className="stat"><div className="n">22</div><div className="lbl">Creators on the closed roster</div></div>
        <div className="stat"><div className="n">4 of 5</div><div className="lbl">Retain past their first 12 months</div></div>
        <div className="stat"><div className="n">24/7</div><div className="lbl">Chat coverage · MIA · LIS · BKK</div></div>
      </div>
    </div>
  </section>
);

/* =================== Services =================== */
const Services = () => (
  <section className="sect" id="services" data-screen-label="03 Services">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <div className="sec-eyebrow"><span className="dot"/> Services · 01 / 02</div>
          <h2 className="sec-h">Two operations.<br/><span className="iri">One quiet machine.</span></h2>
        </div>
        <div className="sec-aside">We do two things, and we do them obsessively. No content production, no PR fluff. Revenue and retention — measured every day.</div>
      </div>

      <div className="services reveal d1">
        <div className="svc">
          <div className="tag"><span className="num">01</span><span>Account management</span></div>
          <h3>AI does the typing.<br/>Humans hit send.</h3>
          <p>A dedicated chat team paired with custom GPTs trained per creator. The model drafts every message from fan history and PPV ladder — the operator just steers and approves. Fewer keystrokes per fan, more PPVs sold, no flat replies.</p>
          <ul>
            <li><span>Chatters per creator</span><i>2 — 4</i></li>
            <li><span>AI draft on every reply</span><i>yes</i></li>
            <li><span>Response time</span><i>{`< 90s`}</i></li>
            <li><span>Reporting</span><i>daily</i></li>
          </ul>
        </div>
        <div className="svc">
          <div className="tag"><span className="num">02</span><span>Marketing & traffic</span></div>
          <h3>Cold attention,<br/>warmed into subscribers.</h3>
          <p>Reddit, X, TikTok funnels and paid placements. Creative briefs, A/B at scale, conversion stitched to chatter scripts. We own the loop.</p>
          <ul>
            <li><span>Channels in‑house</span><i>7</i></li>
            <li><span>Creatives / month</span><i>~280</i></li>
            <li><span>Avg sub CAC</span><i>$3.40</i></li>
            <li><span>Attribution</span><i>full‑stack</i></li>
          </ul>
        </div>
      </div>
    </div>
  </section>
);

/* =================== Cases =================== */
const Cases = () => {
  const cases = [
    { name:"Lana K.", role:"Joined Jan 2024",  before:"$8K",  after:"$54K", growth:"6.7×", grad:'radial-gradient(40% 50% at 60% 40%, rgba(226,220,206,.5), transparent 65%), radial-gradient(50% 60% at 30% 65%, rgba(110,104,94,.35), transparent 65%), #100f0d' },
    { name:"Selene",  role:"Joined Aug 2024",  before:"$11K", after:"$38K", growth:"3.4×", grad:'radial-gradient(50% 60% at 70% 30%, rgba(200,196,184,.35), transparent 65%), radial-gradient(45% 55% at 30% 70%, rgba(170,164,150,.4), transparent 65%), #100f0d' },
    { name:"Mira A.", role:"Joined Nov 2023",  before:"$6K",  after:"$31K", growth:"5.2×", grad:'radial-gradient(45% 55% at 65% 35%, rgba(226,220,206,.45), transparent 65%), radial-gradient(40% 50% at 25% 70%, rgba(200,196,184,.25), transparent 65%), #100f0d' },
  ];
  return (
    <section className="sect" id="cases" data-screen-label="04 Cases">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <div className="sec-eyebrow"><span className="dot"/> Roster · selected</div>
            <h2 className="sec-h">Numbers, <span className="iri">not narratives.</span></h2>
          </div>
          <div className="sec-aside">Names anonymized at request. Figures are rolling 30‑day net of platform fees, signed‑off monthly.</div>
        </div>

        <div className="cases reveal d1">
          {cases.map((c,i)=>(
            <div className="case" key={i}>
              <div className="avatar" style={{ background: c.grad }}/>
              <div>
                <h4>{c.name}</h4>
                <div className="role">{c.role}</div>
                <div className="nums">
                  <div><b>{c.before}</b><span>Before</span></div>
                  <div><b>{c.after}</b><span>Now / mo</span></div>
                  <div><b className="up">{c.growth}</b><span>Growth</span></div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =================== Process =================== */
const Process = () => {
  const steps = [
    { n:"01", h:"Application & screening", p:"Closed application. We review socials, fit and revenue potential. ~3% are invited to call.", d:"Week 0" },
    { n:"02", h:"Strategy & rebrand", p:"Positioning, naming, page architecture, pricing ladder. Photo + video briefs handed to your team.", d:"Week 1 — 2" },
    { n:"03", h:"Traffic on", p:"Reddit, X, TikTok funnels start. Paid placements layer in by week 3. Daily creative iteration.", d:"Week 2 — 4" },
    { n:"04", h:"Chat operation live", p:"Dedicated chatting shifts engage subs through PPV ladders and retention scripts. Reporting in your inbox daily.", d:"Week 4 →" },
    { n:"05", h:"Scale & protect", p:"Tax structuring, DMCA, contract reviews. We treat your account like a P&L line, not a hobby.", d:"Month 3 →" },
  ];
  return (
    <section className="sect" id="process" data-screen-label="05 Process">
      <div className="wrap">
        <div className="process">
          <div>
            <div className="sec-eyebrow"><span className="dot"/> The process</div>
            <h2 className="sec-h" style={{ marginTop: 16 }}>From application<br/>to <span className="iri">scale.</span></h2>
            <p style={{ color:'var(--ink-60)', fontSize:14, lineHeight:1.55, marginTop:24, maxWidth:280 }}>
              Five stages. Typical creator goes from sign to six‑figure month inside 90 days.
            </p>
          </div>
          <div className="process-steps reveal d1">
            {steps.map((s,i)=>(
              <div className="pstep" key={i}>
                <div className="num">{s.n}</div>
                <div>
                  <h4>{s.h}</h4>
                  <p>{s.p}</p>
                </div>
                <div className="dur">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* =================== Triple: Models / Chatters / Scouts =================== */
const Roles = () => (
  <section className="sect" id="roles" data-screen-label="06 Roles">
    <div className="wrap">
      <div className="sec-head reveal">
        <div>
          <div className="sec-eyebrow"><span className="dot"/> Three roles</div>
          <h2 className="sec-h">Three ways <span className="iri">in.</span></h2>
        </div>
        <div className="sec-aside">Veldagency is closed by default. We hire from three sides — creators, chatters and scouts. Every application is read personally.</div>
      </div>

      <div className="roles reveal d1">
        <div className="role-card models" id="creators">
          <div className="role-head">
            <span className="role-num">01</span>
            <span className="role-tag">For models</span>
          </div>
          <h3>You stay in front of camera.<br/>We run everything behind it.</h3>
          <p>Full management for hand‑picked creators. Transparent splits, no exclusivity tricks — we earn the next month every month.</p>
          <ul>
            <li>Transparent split, set on the intro call</li>
            <li>30‑day rolling exit, always</li>
            <li>US / EU LLC structure, quarterly tax, DMCA agent on retainer</li>
            <li>Native English chatters, 24/7 shifts</li>
            <li>Banking & payout rails for non‑US creators</li>
          </ul>
          <div className="role-foot">
            <span className="role-meta"><b>3</b> spots open · Q2 intake</span>
            <a className="btn btn-iri" href="#apply">Apply to roster <Ico.arrowUR/></a>
          </div>
        </div>

        <div className="role-card chatters" id="chatters">
          <div className="role-head">
            <span className="role-num">02</span>
            <span className="role-tag">For chatters · AI‑assisted</span>
          </div>
          <h3>Almost no typing.<br/>The AI does the work.</h3>
          <p>Our in‑house chat stack drafts every message from creator history, fan profile and PPV ladder. You read the draft, click send or tweak one word. No marathon typing, no scripts to memorise — the model writes in the creator's voice for you.</p>
          <ul>
            <li>Custom GPT per creator — voice, kinks, memory of every fan</li>
            <li>Auto‑draft + one‑click PPV variants in dashboard</li>
            <li>You handle ~3× more fans per shift than manual chatters</li>
            <li>Base + commission, paid weekly · range set on intro call</li>
            <li>Remote, fixed 6h shifts, US / EU hours</li>
            <li>No prior OF experience — 2‑week paid training on the stack</li>
          </ul>
          <div className="role-foot">
            <span className="role-meta"><b>5</b> shifts open · rolling</span>
            <a className="btn btn-ghost" href="#apply-chat">Apply as chatter <Ico.arrowUR/></a>
          </div>
        </div>

        <div className="role-card scouts" id="scouts">
          <div className="role-head">
            <span className="role-num">03</span>
            <span className="role-tag">For scouts</span>
          </div>
          <h3>Talent referrals.<br/>Quarterly payouts.</h3>
          <p>Bring us creators who pass screening and earn a share of their net for 12 months. Most active scouts ship 6–12 signed creators a year.</p>
          <ul>
            <li>Revenue share for 12 months per referral</li>
            <li>NDA‑protected, dashboard access</li>
            <li>Quarterly settlement, US / EU rails</li>
            <li>Crypto payout option for non‑US scouts</li>
          </ul>
          <div className="role-foot">
            <span className="role-meta"><b>open</b> · rolling intake</span>
            <a className="btn btn-ghost" href="#apply-scout">Join scout network <Ico.arrowUR/></a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* =================== FAQ =================== */
const FAQ = () => {
  const [open, setOpen] = useState(0);
  const qs = [
    { q:"Is Veldagency exclusive?", a:"Yes. We cap the roster at 25 creators concurrently. Every spot opens through application and a personal call — we don't take walk‑ins or referrals without screening." },
    { q:"What's the split?", a:"It depends on the work we take on — chat ops, traffic, legal, banking, all of it or just parts. We agree the split on the intro call, written into a 30‑day rolling contract. No marketing margins, no PPV commission, no 'training' deductions. Reporting is daily, audited monthly." },
    { q:"What if I'm just starting out?", a:"We sometimes sign creators under $5K/mo if positioning, look and work‑ethic align. Most of our roster joined between $10K and $40K and roughly doubled within the first 6 months." },
    { q:"Do you require exclusivity?", a:"No. Our contract is 30‑day rolling. If we're not the right fit you walk with your accounts, audience and IP intact. We earn the next month every month." },
    { q:"How is privacy handled?", a:"All real identities are NDA‑protected. We operate through screened legal entities, US/EU bank rails, DMCA agents on retainer and an in‑house compliance lead. Your real name never lands on a platform." },
    { q:"How are chatters hired?", a:"All chatters are English‑fluent, 18+, paired with our in‑house AI stack that drafts every reply trained on each creator's voice, history and fan memory. Operators read, approve or tweak — they don't write from scratch. Two weeks of paid training on the stack, then live shifts with a senior reviewer. No outsourced chat farms." },
    { q:"Do you work with creators outside the US?", a:"Yes. A meaningful share of our roster is based in the EU, UK, LATAM and CIS. We handle US/EU LLC structure, banking and payout rails — most creators never deal with US tax or compliance directly." },
  ];
  return (
    <section className="sect" id="faq" data-screen-label="07 FAQ">
      <div className="wrap">
        <div className="sec-head reveal">
          <div>
            <div className="sec-eyebrow"><span className="dot"/> FAQ</div>
            <h2 className="sec-h">Things we get <span className="iri">asked daily.</span></h2>
          </div>
          <div className="sec-aside">If you don't see your question, the call is the easiest place to ask. We answer everything on first call.</div>
        </div>
        <div className="faq reveal d1">
          {qs.map((it, i)=>(
            <div className={"faq-item" + (open === i ? " open" : "")} key={i} onClick={()=>setOpen(open===i?-1:i)}>
              <div className="faq-q">
                <span>{it.q}</span>
                <span className="plus">+</span>
              </div>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* =================== Apply =================== */
const Apply = () => {
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="apply" id="apply" data-screen-label="08 Apply">
      <div>
        <div className="sec-eyebrow" style={{ marginBottom: 16 }}><span className="dot"/> Apply · invitation‑only</div>
        <h2>Tell us who<br/>you are.<br/><span style={{ fontStyle:'italic', color:'var(--iri-a)' }}>We'll do the math.</span></h2>
      </div>
      <form className="form" onSubmit={submit}>
        {!sent ? (
          <>
            <input placeholder="Stage name or @handle" required/>
            <input placeholder="Email" type="email" required/>
            <select defaultValue="">
              <option value="" disabled>Current monthly revenue</option>
              <option>{`< $5K`}</option>
              <option>$5K — $20K</option>
              <option>$20K — $60K</option>
              <option>{`$60K+`}</option>
            </select>
            <select defaultValue="">
              <option value="" disabled>I'm applying as…</option>
              <option>Creator (model)</option>
              <option>Chatter</option>
              <option>Scout</option>
            </select>
            <button className="submit" type="submit">Send application <Ico.arrow/></button>
          </>
        ) : (
          <div style={{
            padding: '24px 22px', borderRadius: 16,
            background: 'rgba(226,220,206,.08)', border:'.5px solid rgba(226,220,206,.3)',
            color:'var(--ink-80)', fontSize:14, lineHeight:1.55
          }}>
            <div style={{ color:'var(--iri-a)', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', marginBottom:8 }}>Received</div>
            We screen everything personally. If there's a fit, you'll hear from us within 72 hours.
          </div>
        )}
      </form>
    </section>
  );
};

/* =================== Footer =================== */
const Footer = () => (
  <>
    <footer className="foot" data-screen-label="09 Footer">
      <div className="brand">
        <LogoV size={56} showWord={true}/>
        <p style={{ marginTop: 16, lineHeight: 1.55, maxWidth: 240 }}>Closed‑roster management house for premium OnlyFans creators. Operated out of Miami & Lisbon.</p>
      </div>
      <div>
        <h5>Roster</h5>
        <ul>
          <li><a href="#cases">Selected results</a></li>
          <li><a href="#creators">For creators</a></li>
          <li><a href="#process">Process</a></li>
          <li><a href="#apply">Apply</a></li>
        </ul>
      </div>
      <div>
        <h5>Roles</h5>
        <ul>
          <li><a href="#creators">For models</a></li>
          <li><a href="#chatters">For chatters</a></li>
          <li><a href="#scouts">For scouts</a></li>
          <li><a href="#apply">Apply</a></li>
        </ul>
      </div>
      <div>
        <h5>Contact</h5>
        <ul>
          <li><a href="mailto:roster@veldagency.com">roster@veldagency.com</a></li>
          <li><a href="mailto:team@veldagency.com">team@veldagency.com</a></li>
          <li><a href="mailto:scouts@veldagency.com">scouts@veldagency.com</a></li>
          <li><a href="#">@veldagency</a></li>
        </ul>
      </div>
    </footer>
    <div className="foot-bot">
      <div>© 2026 Veldagency Holdings, LLC · Closed roster</div>
      <div style={{ display:'flex', gap:24 }}>
        <a href="#" style={{ color:'inherit', textDecoration:'none' }}>Privacy</a>
        <a href="#" style={{ color:'inherit', textDecoration:'none' }}>Terms</a>
        <a href="#" style={{ color:'inherit', textDecoration:'none' }}>Compliance</a>
      </div>
    </div>
  </>
);

/* =================== Nav =================== */
/* =================== Nav =================== */
const useClock = () => {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 30_000);
    return () => clearInterval(id);
  }, []);
  return now;
};
const fmtTZ = (d, tz) => d.toLocaleTimeString('en-GB', { timeZone: tz, hour: '2-digit', minute: '2-digit' });

const Nav = () => {
  const now = useClock();
  return (
    <header className="nav">
      <div className="nav-left">
        <div className="nav-brand">
          <LogoV size={26}/>
          <b>Veldagency</b>
        </div>
        <div className="nav-status" title="Closed roster — currently 22 of 25 seats filled">
          <span className="pulse"/>
          <span className="lbl">Roster · 22 / 25</span>
          <span className="hint">3 seats open</span>
        </div>
      </div>

      <nav className="nav-pill">
        <a className="active" href="#">Home</a>
        <a href="#services">Services</a>
        <a href="#cases">Roster</a>
        <a href="#process">Process</a>
        <a href="#faq">FAQ</a>
        <span className="sep"/>
        <a href="#roles" className="nav-pill-cta">Join the team <Ico.arrowUR/></a>
        <a href="#" className="nav-pill-ico" title="Compliance"><Ico.shield/></a>
      </nav>

      <div className="nav-right">
        <div className="nav-clock" title="Office hours">
          <span className="zone"><b>MIA</b> {fmtTZ(now,'America/New_York')}</span>
          <span className="zone-sep"/>
          <span className="zone"><b>LIS</b> {fmtTZ(now,'Europe/Lisbon')}</span>
        </div>
        <a className="nav-cta" href="#apply">
          <span className="ico"><Ico.user/></span>
          Apply
        </a>
      </div>
    </header>
  );
};

/* =================== Root =================== */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "variant": "A",
  "accentPalette": ["#e2dcce", "#aaa496", "#6e685e"],
  "decor": true,
  "headline": "",
  "sub": "",
  "fogIntensity": 90,
  "fogSpread": 55,
  "fogX": 72,
  "fogY": 32,
  "videoSrc": "media/hero-cine-01.mp4",
  "videoBlur": 6,
  "videoIntensity": 100,
  "fogMix": 0
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [a,b,c] = t.accentPalette;

  // Scroll reveal — flip .reveal → .in-view as elements enter viewport
  useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in-view'); io.unobserve(e.target); } });
    }, { threshold: 0.15, rootMargin: '0px 0px -8% 0px' });
    document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);

  // build the cinematic gradient from the chosen palette — matches reference fog spread
  const fI = (t.fogIntensity ?? 90) / 100;   // overall opacity multiplier
  const fS = (t.fogSpread ?? 55) / 100;      // spread multiplier (0..1 → 0.6..1.6 size)
  const sz = 0.6 + fS;                       // resulting size scalar
  const fx = t.fogX ?? 72;
  const fy = t.fogY ?? 32;
  const aA = (v) => Math.min(1, v * fI).toFixed(2);
  const accentBg = `
    radial-gradient(${(38*sz).toFixed(0)}% ${(50*sz).toFixed(0)}% at ${fx}% ${fy}%, ${hexA(a,aA(.92))}, transparent 72%),
    radial-gradient(${(55*sz).toFixed(0)}% ${(60*sz).toFixed(0)}% at ${fx-6}% ${fy+14}%, ${hexA(b,aA(.55))}, transparent 75%),
    radial-gradient(${(45*sz).toFixed(0)}% ${(55*sz).toFixed(0)}% at ${fx+10}% ${fy+27}%, ${hexA(c,aA(.45))}, transparent 72%),
    radial-gradient(60% 50% at 50% ${fy+50}%, ${hexA(c,aA(.28))}, transparent 70%),
    radial-gradient(30% 35% at ${100-fx}% 18%, ${hexA(a,aA(.18))}, transparent 72%)
  `;

  // push palette into CSS vars for global accent
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty('--iri-a', a);
    r.style.setProperty('--iri-b', b);
    r.style.setProperty('--iri-c', c);
  }, [a,b,c]);

  return (
    <>
      <Nav/>
      <Hero
        variant={t.variant}
        accent={accentBg}
        headline={t.headline || null}
        sub={t.sub || null}
        decor={t.decor}
        videoSrc={t.videoSrc || ""}
        videoBlur={t.videoBlur}
        videoIntensity={t.videoIntensity}
        fogMix={t.fogMix}
        onPickBlend={(patch) => setTweak(patch)}
      />
      <Stats/>
      <Services/>
      <Cases/>
      <Process/>
      <Roles/>
      <FAQ/>
      <Apply/>
      <Footer/>

      <TweaksPanel title="Tweaks · Veldagency">
        <TweakSection label="Hero" />
        <TweakRadio label="Layout"
          value={t.variant}
          options={[{value:'A',label:'Center'},{value:'B',label:'Left'},{value:'C',label:'Type'}]}
          onChange={(v)=>setTweak('variant', v)}/>
        <TweakToggle label="Decor (tags, streaks)"
          value={t.decor} onChange={(v)=>setTweak('decor', v)}/>
        <TweakText label="Custom headline" value={t.headline}
          placeholder="(use default)"
          onChange={(v)=>setTweak('headline', v)}/>
        <TweakSection label="Cinematic plate" />
        <TweakSelect label="Source" value={t.videoSrc}
          options={[
            { value: '', label: 'CSS fog (placeholder)' },
            { value: 'media/hero-cine-01.mp4', label: 'Higgsfield · 01' },
            { value: 'media/hero-cine-02.mp4', label: 'Higgsfield · 02' },
            { value: 'media/hero-cine-03.mp4', label: 'Higgsfield · 03' },
          ]}
          onChange={(v)=>setTweak('videoSrc', v)}/>
        <TweakSlider label="Video blur" value={t.videoBlur} min={0} max={80} unit="px"
          onChange={(v)=>setTweak('videoBlur', v)}/>
        <TweakSlider label="Video intensity" value={t.videoIntensity} min={20} max={100} unit="%"
          onChange={(v)=>setTweak('videoIntensity', v)}/>
        <TweakSlider label="Fog over video" value={t.fogMix} min={0} max={100} unit="%"
          onChange={(v)=>setTweak('fogMix', v)}/>
        <TweakSection label="Iridescent accent" />
        <TweakColor label="Palette" value={t.accentPalette}
          options={[
            ['#e2dcce', '#aaa496', '#6e685e'],
            ['#e8e6dc', '#a4a098', '#5a5854'],
            ['#d8d4c8', '#8a8478', '#3a3632'],
            ['#f0e0c8', '#c4a880', '#6a553a'],
            ['#c7b0ff', '#8a7bff', '#4f7dff'],
            ['#a7f3d0', '#5eead4', '#0ea5e9'],
          ]}
          onChange={(v)=>setTweak('accentPalette', v)}/>
        <TweakSlider label="Fog intensity" value={t.fogIntensity} min={20} max={130} unit="%"
          onChange={(v)=>setTweak('fogIntensity', v)}/>
        <TweakSlider label="Fog spread" value={t.fogSpread} min={20} max={120} unit="%"
          onChange={(v)=>setTweak('fogSpread', v)}/>
        <TweakSlider label="Fog X" value={t.fogX} min={20} max={90} unit="%"
          onChange={(v)=>setTweak('fogX', v)}/>
        <TweakSlider label="Fog Y" value={t.fogY} min={5} max={70} unit="%"
          onChange={(v)=>setTweak('fogY', v)}/>
      </TweaksPanel>
    </>
  );
}

/* helpers */
function hexA(hex, alpha) {
  const h = hex.replace('#','');
  const r = parseInt(h.substring(0,2),16);
  const g = parseInt(h.substring(2,4),16);
  const b = parseInt(h.substring(4,6),16);
  return `rgba(${r},${g},${b},${alpha})`;
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);