/* global React */
// Variation 2 — Bold high-contrast Hormozi-style
// Yellow accent, neo-brutalist offsets, big numbers, clear value-prop

const V2 = ({ headline = "Build your dream in home in half the time without lifting a finger — and pocket the builder's $1.5M–$2M margin.", cta = "Get the $1.5M case study" } = {}) => {
  const [openFaq, setOpenFaq] = React.useState(-1);
  // headline supports the form "Stop paying a builder $400,000 to build YOUR house."
  // We render the strikethrough on a $-amount and highlight on a quoted token.
  const renderHeadline = () => {
    // try to find dollar amount and ALL-CAPS word for highlight
    const dollarMatch = headline.match(/\$[\d.,]+M(?:[–\-]\$[\d.,]+M)?|\$[\d,]+/);
    const yourMatch = headline.match(/\bYOUR\b|\bME\b|\bMARGIN\b|\bHALF\b/);
    if (!dollarMatch && !yourMatch) return headline;
    let parts = [{ t: headline }];
    if (dollarMatch) {
      const idx = headline.indexOf(dollarMatch[0]);
      parts = [
        { t: headline.slice(0, idx) },
        { t: dollarMatch[0], strike: true },
        { t: headline.slice(idx + dollarMatch[0].length) },
      ];
    }
    if (yourMatch) {
      const next = [];
      for (const p of parts) {
        if (p.strike) { next.push(p); continue; }
        const m = p.t.match(/\bYOUR\b|\bME\b|\bMARGIN\b|\bHALF\b/);
        if (!m) { next.push(p); continue; }
        const idx = p.t.indexOf(m[0]);
        next.push({ t: p.t.slice(0, idx) });
        next.push({ t: m[0], hl: true });
        next.push({ t: p.t.slice(idx + m[0].length) });
      }
      parts = next;
    }
    return parts.map((p, i) => {
      if (p.strike) return <span key={i} className="strike">{p.t}</span>;
      if (p.hl) return <span key={i} className="hl">{p.t}</span>;
      return <React.Fragment key={i}>{p.t}</React.Fragment>;
    });
  };
  const offers = [
    { num: "01", value: "Saves $40k–$120k", title: "Trade rates, not retail markup", desc: "You buy materials at the same prices builders do — concrete, steel, joinery, fixtures. Without this you'd pay 15–30% retail markup on every invoice." },
    { num: "02", value: "Saves $25k–$80k", title: "3+ competing quotes on every trade", desc: "Every chippie, sparky, plumber, tiler quoted against two others — you pick. Without this you'd take whatever number the builder's preferred sub gave them." },
    { num: "03", value: "Cuts idle days to zero", title: "Trades sequenced day-by-day, no waiting", desc: "Right trade, right day, right order — industry average builds run 24+ months partly because the site sits idle two days a week. Tight sequencing is the PM's job; my last project ran 13 months slab-to-handover." },
    { num: "04", value: "Removes the after-hours panic", title: "Someone on site so you don't have to be", desc: "I'm there when trades arrive, when concrete pours, when the inspector calls. Without this you'd take leave from your real job to babysit a site you don't know how to read." },
    { num: "05", value: "Defects caught at the cause", title: "Mistakes caught before they're buried in concrete", desc: "Plans, set-outs, and workmanship checked at every gate. Without this you'd find the slab is 40mm out at lock-up — and you'd be the one paying to fix it." },
    { num: "06", value: "Council-proof paperwork", title: "Permits, certificates, and Certificate of Occupancy — done", desc: "Owner-Builder Certificate of Consent, building permit, energy report, final occupancy. Without this your build can't legally start, finish, or be insured." },
    { num: "07", value: "Stops $30k+ variations", title: "Contracts and variations read line-by-line", desc: "Every quote, contract, and mid-build variation reviewed before you sign. Without this you'd discover the $14k 'provisional sum' was actually $44k after lock-up." },
    { num: "08", value: "Direct line, day or night", title: "My mobile, not a call centre", desc: "Text me at 7pm Sunday when the tiler hasn't shown up. Without this you'd be on hold with a builder's office while your $2M project drifts another week." },
    { num: "09", value: "BONUS", title: "47-step Owner-Builder permit checklist", desc: "The exact paperwork sequence I use myself — PDF, sequenced for Victoria. Bundled free with the case study." },
    { num: "10", value: "BONUS", title: "Cost-savings spreadsheet (editable)", desc: "The exact model I run with clients. Plug in your block, your brief, your builder quote — see your real savings, line by line. Bundled free with the case study." },
  ];
  const faqs = [
    { q: "How much can I really save?", a: "$200k–$1.5M+ on a custom home. Builder margins are 15–25%. On a $2M build, that's $300–500k of pure margin you'd otherwise hand over. Procurement and direct trade rates add another 10–20% on top." },
    { q: "Is owner-building risky?", a: "Going it alone? Yes. With a project manager who's done it before? No riskier than engaging a builder — and you keep the margin. The risk people usually talk about is the operational risk, which is exactly what I take off your plate." },
    { q: "Where do you work?", a: "Melbourne and regional Victoria for full management. Document review and consulting Australia-wide." },
    { q: "How are you priced?", a: "Hourly for consultancy. Fixed-fee or % of build for full management — always materially less than a builder's margin. I'll quote you once we know your scope." },
  ];

  return (
    <div className="v2">
      <div className="pre-hero">

      </div>

      <header className="topbar">
        <div className="wordmark" style={{ fontSize: 20 }}>
          OWNERS<span className="wm-bracket">/</span>BUILDERS
        </div>
        <div style={{ display: "flex", gap: 14, alignItems: "center" }}>
          <a href="magnet.html" className="cta" style={{textDecoration:"none"}}>{cta}</a>
        </div>
      </header>

      {/* hero */}
      <section className="hero">
        <div className="badge">★ Last project: $10M build, $1.5M retained</div>
        <h1 className="headline">
          {renderHeadline()}
        </h1>
        <p className="sub">
          Build the same custom home you've drawn in your head, without being on site, without reading a set-out, without chasing a sub-contractor — and keep the <strong>$1.5M–$2M</strong> a registered builder would have charged as margin on a premium custom build. The PM does every job a builder does. The margin stays with you.
        </p>
        <div className="hero-ctas">
          <a href="magnet.html" className="btn btn-primary" style={{textDecoration:"none"}}>📩 {cta}</a>
          <a href="#offer" className="btn btn-ghost">See what's included</a>
        </div>
        <div className="hero-trust">
          <span>10+ years PM experience</span>
          <span>None of the lifting</span>
          <span>$1.5M–$2M margin retained last project</span>
        </div>
      </section>

      {/* HERO PHOTO STRIP - real project images */}
      <section className="container" style={{ paddingBottom: 24 }}>
        <div style={{ display: "grid", gridTemplateColumns: "2fr 1fr 1fr 1fr 1fr", gap: 12, height: 380 }}>
          <img src="images/IMG_0374.jpg" alt="The $10M Melbourne home — street exterior" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} />
          <img src="images/IMG_0115.jpg" alt="Formal living room with marble fireplace" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} />
          <img src="images/IMG_0112.jpg" alt="Dining room with marble table and bronze chandelier" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} />
          <img src="images/IMG_0128.jpg" alt="Custom void and feature pendant" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} />
          <img src="images/IMG_0167.jpg" alt="Travertine stair detail" style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 8 }} />
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", marginTop: 14, fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--v2-muted)" }}>
          <span>The $10M Melbourne build · 2024–2025</span>
          <span><a href="magnet.html" style={{ color: "inherit", textDecoration: "underline", textUnderlineOffset: 3 }}>See the full case study →</a></span>
        </div>
      </section>

      {/* proof */}
      <section className="proof">
        <div className="container">
          <div className="proof-grid">
            <div>
              <div className="proof-num">13mo</div>
              <div className="proof-lab">Last project · slab to handover</div>
            </div>
            <div>
              <div className="proof-num">0</div>
              <div className="proof-lab">Site visits required from you</div>
            </div>
            <div>
              <div className="proof-num">$1.5M</div>
              <div className="proof-lab">Margin retained last project</div>
            </div>
            <div>
              <div className="proof-num">10yr+</div>
              <div className="proof-lab">PM experience</div>
            </div>
          </div>
        </div>
      </section>

      {/* vs comparison */}
      <section className="container section">
        <div className="vs-head">
          <div className="vs-tag">The math</div>
          <h2 className="vs-title">None of the lifting. You keep the margin.</h2>
          <p className="sub" style={{ margin: "0 auto" }}>Same house. Same trades. Same finishes. One arrangement keeps the builder's $1.5M–$2M margin. The other puts it in your pocket.</p>
        </div>
        <div className="vs">
          <div className="vs-col bad">
            <div className="vs-h">Traditional builder <span className="pill">keeps the margin</span></div>
            <ul className="vs-list">
              <li>Builder's 15–25% margin baked into every quote (~$2M on a $10M build)</li>
              <li>Retail-equivalent rates on materials and labour</li>
              <li>Variations cost 30–50% over base</li>
              <li>You're called for variations, decisions, defects — unpredictably</li>
              <li>Industry average build runs 24+ months</li>
              <li>You're a customer, not the decision-maker</li>
            </ul>
          </div>
          <div className="vs-col good">
            <div className="vs-h">PM-led owner-build <span className="pill" style={{ background: "var(--v2-accent-ink)", color: "var(--v2-accent)" }}>you keep $1.5M–$2M</span></div>
            <ul className="vs-list">
              <li>You keep the entire builder's margin — $1.5M–$2M on a premium build</li>
              <li>Trade rates on materials and labour — builder's prices, not retail</li>
              <li>Variations cost what they cost — no margin stacking</li>
              <li>Zero site visits required from you — PM is on site, not you</li>
              <li>Tight sequencing — last project ran in 13 months</li>
              <li>You make the calls; PM handles the work</li>
            </ul>
          </div>
        </div>
      </section>

      {/* offer / what you get */}
      <section className="offer-wrap" id="offer">
        <div className="container section">
          <div className="vs-head">
            <div className="vs-tag">Service one · End-to-end project management · $5M+ builds</div>
            <h2 className="vs-title">Your dream home, without lifting a finger — and you keep the margin.</h2>
            <p style={{ color: "color-mix(in oklab, var(--v2-paper) 70%, transparent)", marginTop: 14, fontSize: 18, lineHeight: 1.55, maxWidth: "62ch", marginInline: "auto" }}>The full engagement, sized for premium custom builds from <strong>$5M+</strong>. A permanent PM on your project from permits to occupancy. A registered builder bundles all of this into a 15–25% margin you never see itemised. I unbundle it, charge a fixed fee that's a fraction of that margin, and you keep the rest — <strong style={{ color: "var(--v2-accent)" }}>$1.5M–$2M on a premium custom build.</strong></p>
          </div>
          <div className="offer offer-main">
            {offers.filter(o => o.value !== "BONUS").map((o, i) => (
              <div className="offer-card" key={i}>
                <div className="num">{o.num} · {o.value}</div>
                <div className="check">✓</div>
                <h3>{o.title}</h3>
                <p>{o.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 36, paddingTop: 28, borderTop: "1px dashed color-mix(in oklab, var(--v2-paper) 25%, transparent)" }}>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--v2-accent)", marginBottom: 18, textAlign: "center" }}>★ Bundled free with the case study · yours to keep either way</div>
            <div className="offer offer-bonus">
              {offers.filter(o => o.value === "BONUS").map((o, i) => (
                <div className="offer-card" key={i} style={{ background: "color-mix(in oklab, var(--v2-accent) 12%, transparent)", borderColor: "color-mix(in oklab, var(--v2-accent) 35%, transparent)" }}>
                  <div className="num" style={{ color: "var(--v2-accent)" }}>{o.num} · BONUS</div>
                  <div className="check" style={{ background: "var(--v2-accent)", color: "var(--v2-ink)" }}>★</div>
                  <h3>{o.title}</h3>
                  <p>{o.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* PRICE ANCHOR — the math */}
      <section className="container" style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20, alignItems: "stretch" }}>
          <div style={{ border: "2px solid var(--v2-ink)", borderRadius: 12, padding: "32px 28px", background: "color-mix(in oklab, var(--v2-warn) 8%, var(--v2-paper))", position: "relative" }}>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--v2-muted)", marginBottom: 8 }}>Hire a builder</div>
            <div style={{ fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 6, textDecoration: "line-through", textDecorationColor: "var(--v2-warn)", textDecorationThickness: 4, textDecorationSkipInk: "none" }}>$300k–$500k</div>
            <div style={{ fontSize: 15, color: "var(--v2-muted)", marginBottom: 16 }}>builder's margin on a $2M build, never itemised</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 15 }}>
              <li>✗ 15–25% margin baked into every line</li>
              <li>✗ Trade quotes you never see</li>
              <li>✗ Materials at retail markup</li>
              <li>✗ 24-month build is normal</li>
              <li>✗ Variations you find out about at lock-up</li>
            </ul>
          </div>
          <div style={{ border: "3px solid var(--v2-ink)", borderRadius: 12, padding: "32px 28px", background: "var(--v2-accent)", position: "relative", boxShadow: "8px 8px 0 var(--v2-ink)" }}>
            <div style={{ position: "absolute", top: -14, right: 20, background: "var(--v2-ink)", color: "var(--v2-paper)", fontFamily: "Geist Mono, monospace", fontSize: 11, padding: "5px 10px", borderRadius: 4, letterSpacing: "0.1em", textTransform: "uppercase", whiteSpace: "nowrap" }}>What I charge</div>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--v2-ink)", opacity: 0.7, marginBottom: 8 }}>Owner-build with me</div>
            <div style={{ fontSize: "clamp(36px, 4vw, 56px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 6, color: "var(--v2-ink)" }}>A fraction of that.</div>
            <div style={{ fontSize: 15, color: "var(--v2-ink)", opacity: 0.85, marginBottom: 16 }}>fixed fee or % of build, quoted to your scope</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8, fontSize: 15, color: "var(--v2-ink)" }}>
              <li>✓ Every saving lands with you</li>
              <li>✓ You see and approve every quote</li>
              <li>✓ Materials at trade rates</li>
              <li>✓ Last project: 13 months</li>
              <li>✓ Fixed fee in writing — no margin stacking, no hourly creep</li>
            </ul>
          </div>
        </div>
        <p style={{ textAlign: "center", marginTop: 36, fontSize: 17, color: "color-mix(in oklab, var(--v2-paper) 75%, transparent)", maxWidth: "62ch", marginInline: "auto", lineHeight: 1.55 }}>
          The exact fee depends on your build. I'll quote you on the call and put it in writing. Whatever the number is, the guarantee below means it's <em>capped by your savings</em> — not the other way around.
        </p>
      </section>

      {/* big testimonial */}
      <section className="container section">
        <div className="ts">
          <div className="qmark">"</div>
          <blockquote>
            The project I've just finished was delivered under an Owner-Builder's licence. Rather than engaging a traditional builder, the client hired a project manager with over 10 years of experience to run the entire job. <em>On a build of this size, the standard builder's margin is in the $1.5M–$2M range — the client kept that, less the PM fee</em> — and the build was completed in just 13 months, a job that would typically take more than 24 months under a traditional builder arrangement.
          </blockquote>
          <div className="who">
            <div className="av"></div>
            <div>
              <div className="name">Recent owner-builder client</div>
              <div className="role">$10M custom home · Melbourne · 2024–2025</div>
            </div>
          </div>
        </div>
      </section>

      {/* MATH CALLOUT — how the $1.5M figure works */}
      <section className="container" style={{ paddingTop: 0, paddingBottom: 60 }}>
        <div style={{ border: "2px solid var(--v2-ink)", borderRadius: 12, padding: "36px 32px", background: "var(--v2-paper)", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 36, alignItems: "center" }}>
          <div>
            <div className="vs-tag" style={{ marginBottom: 12 }}>How the math works</div>
            <h3 style={{ fontSize: "clamp(24px, 2.4vw, 34px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1, margin: "0 0 14px", textWrap: "balance" }}>
              No phantom builder quote. Just industry-standard margin, minus my fee.
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, margin: 0, color: "var(--v2-muted)" }}>
              I'm not going to show you a tender that didn't happen. The $1.5M figure is what the client kept by <em>not</em> paying a registered builder's margin on a $10M build — a margin you can verify with public industry data (HIA, Master Builders, ABS).
            </p>
          </div>
          <div style={{ display: "grid", gap: 10, fontFamily: "Geist Mono, monospace", fontSize: 15 }}>
            <img src="images/IMG_0374.jpg" alt="The $10M home — exterior" style={{ width: "100%", height: 220, objectFit: "cover", borderRadius: 8, marginBottom: 6 }} />
            <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 18px", background: "color-mix(in oklab, var(--v2-ink) 5%, transparent)", borderRadius: 8 }}>
              <span>Build cost</span><strong>$10,000,000</strong>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 18px", background: "color-mix(in oklab, var(--v2-ink) 5%, transparent)", borderRadius: 8 }}>
              <span>× Industry-std margin (20%)</span><strong>$2,000,000</strong>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "14px 18px", background: "color-mix(in oklab, var(--v2-ink) 5%, transparent)", borderRadius: 8 }}>
              <span>− PM fee (this project)</span><strong>$350,000</strong>
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", padding: "16px 18px", background: "var(--v2-accent)", borderRadius: 8, border: "2px solid var(--v2-ink)" }}>
              <span style={{ color: "var(--v2-ink)" }}>= Margin retained</span><strong style={{ color: "var(--v2-ink)" }}>$1,650,000</strong>
            </div>
            <div style={{ fontSize: 11, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--v2-muted)", marginTop: 6, lineHeight: 1.5 }}>
              Rounded down to $1.5M for buffer. Industry margin source: HIA / MBA custom-residential benchmarks (15–25%).
            </div>
          </div>
        </div>
      </section>

      {/* OPTION B — À LA CARTE consulting */}
      <section className="offer-wrap" id="consulting" style={{ background: "color-mix(in oklab, var(--v2-paper) 92%, var(--v2-ink))" }}>
        <div className="container section">
          <div className="vs-head">
            <div className="vs-tag" style={{ color: "var(--v2-muted)" }}>Service two · Consulting · any project size</div>
            <h2 className="vs-title" style={{ color: "var(--v2-ink)" }}>Or hire me for just the bits you can't do alone.</h2>
            <p className="sub" style={{ margin: "0 auto", color: "var(--v2-muted)" }}>Whatever you're building — a $400k renovation, a $1.5M new home, or a $20M project — you can engage me for individual services. Fixed scope, quoted up front, no ongoing commitment.</p>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginBottom: 28 }}>
            {[
              { t: "Subbie list", d: "My trade contact book — one trade, several, or the lot. Names, rates, what they're good at." },
              { t: "Trade tendering", d: "Tender packs issued, quotes evaluated, recommendations on who to pick — for a single trade or every trade on the job." },
              { t: "Contract letting", d: "Trade contracts drafted, scope locked, terms agreed. Variations clauses written so they don't bite later." },
              { t: "Design management", d: "Architect and consultant coordination — keeping drawings, engineering, and energy reports moving in sequence." },
              { t: "Permits & approvals", d: "Certificate of Consent, building permit pathway, council referrals, surveyor liaison. Sorted." },
              { t: "Document review", d: "Plans, builder quotes, contracts, variations — read line-by-line by someone who's seen what goes wrong." },
              { t: "Budget & estimating", d: "Cost plan for your build before you commit. Honest numbers, line by line, with contingency modelled." },
              { t: "Site supervision", d: "One-off site walks or per-visit reviews. Eyes on the job at the gates that matter most." },
              { t: "Variation review", d: "Mid-build, a builder hits you with a variation. I review it before you sign. Quietly saves $30k–$50k a job." },
              { t: "Progress claim certification", d: "Bank or lender needs a competent sign-off on a progress payment? I do the inspection and issue the cert." },
              { t: "Occupancy & defects", d: "Final inspections, certificate of occupancy, defects list, statutory warranty handover. The last mile, done right." },
              { t: "Custom scope", d: "Got something specific I haven't listed? Tell me what you need on the call — I'll quote it." },
            ].map((s, i) => (
              <div key={i} style={{ background: "var(--v2-paper)", border: "1.5px solid var(--v2-ink)", borderRadius: 10, padding: 22, position: "relative" }}>
                <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 10, letterSpacing: 0.1, textTransform: "uppercase", color: "var(--v2-muted)", marginBottom: 10 }}>
                  /0{i+1} · Quoted on enquiry
                </div>
                <h3 style={{ fontSize: 19, fontWeight: 700, letterSpacing: "-0.02em", margin: "0 0 8px", color: "var(--v2-ink)" }}>{s.t}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.5, color: "var(--v2-muted)", margin: 0 }}>{s.d}</p>
              </div>
            ))}
          </div>

          {/* Callback form */}
          <div style={{ border: "3px solid var(--v2-ink)", background: "var(--v2-accent)", borderRadius: 12, padding: "clamp(28px, 4vw, 44px)", boxShadow: "10px 10px 0 var(--v2-ink)", marginTop: 32 }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 36, alignItems: "center" }}>
              <div>
                <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--v2-ink)", opacity: 0.7, marginBottom: 12 }}>Quote your scope · I call you back</div>
                <h3 style={{ fontSize: "clamp(26px, 3vw, 38px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.05, margin: "0 0 14px", color: "var(--v2-ink)", textWrap: "balance" }}>
                  Tell me what you need. <em style={{ background: "var(--v2-ink)", color: "var(--v2-accent)", padding: "4px 8px", fontStyle: "normal", display: "inline-block", lineHeight: 1.15 }}>I'll call you back ASAP.</em>
                </h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--v2-ink)", opacity: 0.85, margin: 0 }}>One line on what you're trying to do. I'll ring you back, ask a few questions, and tell you straight whether I can help — and what it would cost if I can.</p>
              </div>
              <form onSubmit={async (e) => {
                e.preventDefault();
                const f = e.target;
                const btn = f.querySelector('button[type="submit"]');
                const originalText = btn.textContent;
                btn.disabled = true;
                btn.textContent = 'Sending…';
                const body = {
                  first_name: f.elements.name.value.trim(),
                  phone: f.elements.phone.value.trim(),
                  email: f.elements.email.value.trim(),
                  need: f.elements.need.value.trim() || null,
                  utm_source: new URLSearchParams(location.search).get('utm_source'),
                  utm_medium: new URLSearchParams(location.search).get('utm_medium'),
                  utm_campaign: new URLSearchParams(location.search).get('utm_campaign'),
                };
                try {
                  const r = await fetch('https://ckbmdydinhzsggfgjajo.supabase.co/functions/v1/consult-callback', {
                    method: 'POST',
                    headers: {
                      'Content-Type': 'application/json',
                      apikey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNrYm1keWRpbmh6c2dnZmdqYWpvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzk4MjIyNjAsImV4cCI6MjA5NTM5ODI2MH0.FFvY4opCktItZHhExRtvlUCrysH1a63o0zVmf_vqu9k',
                    },
                    body: JSON.stringify(body),
                  });
                  if (!r.ok) throw new Error('callback failed');
                  const j = await r.json();
                  // Replace form with success state
                  f.innerHTML = '<div style="padding:24px;background:var(--v2-ink);color:var(--v2-accent);border:2px solid var(--v2-ink);border-radius:8px;font-weight:600;text-align:center;">✓ ' + (j.message || ('Thanks ' + body.first_name.split(' ')[0] + ", I'll call you back ASAP.")) + '</div>';
                } catch (err) {
                  btn.disabled = false;
                  btn.textContent = originalText;
                  alert('Something went wrong. Please try again, or email mile@owners-builders.com.au.');
                }
              }} style={{ display: "grid", gap: 10 }}>
                <input name="name" type="text" required placeholder="First name" style={{ padding: "14px 16px", border: "2px solid var(--v2-ink)", borderRadius: 8, background: "var(--v2-paper)", color: "var(--v2-ink)", font: "inherit", fontSize: 15 }} />
                <input name="phone" type="tel" required placeholder="Mobile number" style={{ padding: "14px 16px", border: "2px solid var(--v2-ink)", borderRadius: 8, background: "var(--v2-paper)", color: "var(--v2-ink)", font: "inherit", fontSize: 15 }} />
                <input name="email" type="email" required placeholder="Email" style={{ padding: "14px 16px", border: "2px solid var(--v2-ink)", borderRadius: 8, background: "var(--v2-paper)", color: "var(--v2-ink)", font: "inherit", fontSize: 15 }} />
                <textarea name="need" rows="2" placeholder="One line on what you need (optional)" style={{ padding: "14px 16px", border: "2px solid var(--v2-ink)", borderRadius: 8, background: "var(--v2-paper)", color: "var(--v2-ink)", font: "inherit", fontSize: 14, resize: "vertical", fontFamily: "inherit" }}></textarea>
                <button type="submit" style={{ padding: "16px 22px", border: "2px solid var(--v2-ink)", background: "var(--v2-ink)", color: "var(--v2-accent)", borderRadius: 8, font: "inherit", fontWeight: 700, fontSize: 15, textTransform: "uppercase", letterSpacing: "0.04em", cursor: "pointer", boxShadow: "5px 5px 0 var(--v2-paper)", transition: "transform .12s, box-shadow .12s" }} onMouseOver={(e) => { e.currentTarget.style.transform = "translate(-2px,-2px)"; e.currentTarget.style.boxShadow = "7px 7px 0 var(--v2-paper)"; }} onMouseOut={(e) => { e.currentTarget.style.transform = ""; e.currentTarget.style.boxShadow = "5px 5px 0 var(--v2-paper)"; }}>
                  📞 Call me back →
                </button>
                <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--v2-ink)", opacity: 0.6, lineHeight: 1.5, marginTop: 4 }}>Your details stay private · no spam · used to call back and send case study only</div>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* GUARANTEE — risk reversal */}
      <section className="container section">
        <div className="ts" style={{ background: "var(--v2-paper)", border: "3px solid var(--v2-ink)" }}>
          <div className="qmark" style={{ color: "var(--v2-warn)" }}>★</div>
          <div className="vs-tag" style={{ marginBottom: 14, marginTop: 24 }}>The promise</div>
          <h3 style={{ fontSize: "clamp(28px,3vw,42px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.05, margin: "0 0 18px", textWrap: "balance" }}>
            If the model doesn't stack up for your project, <em style={{ background: "var(--v2-accent)", padding: "4px 8px", fontStyle: "normal", display: "inline-block", lineHeight: 1.15 }}>I'll tell you on the call.</em>
          </h3>
          <p style={{ fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: "60ch" }}>
            I can't promise you a specific dollar saving without knowing your build, your block, and a real builder quote to compare against. What I can promise: a transparent fixed fee, quoted up front in writing, no margin stacked into anything. And a 15-minute call where I give you a defensible model of what the savings look like for <em>your</em> project — not someone else's. If the model doesn't make financial sense for your build, I'll say so before you commit a dollar.
          </p>
        </div>
      </section>

      {/* SCARCITY callout */}
      <section className="container" style={{ paddingBottom: 40 }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, textAlign: "center" }}>
          <div style={{ border: "2px solid var(--v2-ink)", borderRadius: 10, padding: 24, background: "color-mix(in oklab, var(--v2-warn) 10%, var(--v2-paper))" }}>
            <div style={{ fontSize: 32, fontWeight: 700 }}>3</div>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--v2-muted)", marginTop: 6 }}>Spots open · 2026</div>
          </div>
          <div style={{ border: "2px solid var(--v2-ink)", borderRadius: 10, padding: 24, background: "color-mix(in oklab, var(--v2-accent) 22%, var(--v2-paper))" }}>
            <div style={{ fontSize: 32, fontWeight: 700 }}>12min</div>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--v2-muted)", marginTop: 6 }}>Read the case study</div>
          </div>
          <div style={{ border: "2px solid var(--v2-ink)", borderRadius: 10, padding: 24, background: "var(--v2-paper)" }}>
            <div style={{ fontSize: 32, fontWeight: 700 }}>48hr</div>
            <div style={{ fontFamily: "Geist Mono, monospace", fontSize: 12, textTransform: "uppercase", letterSpacing: "0.08em", color: "var(--v2-muted)", marginTop: 6 }}>Quote turnaround</div>
          </div>
        </div>
      </section>

      {/* MID-PAGE CTA */}
      <section style={{ padding: "40px 24px", textAlign: "center" }}>
        <div className="hero-ctas" style={{ justifyContent: "center" }}>
            <a href="magnet.html" className="btn btn-primary" style={{textDecoration:"none"}}>📩 {cta} →</a>
          </div>
          
      </section>

      {/* faq */}
      <section className="container section">
        <div className="vs-head">
          <div className="vs-tag">FAQ</div>
          <h2 className="vs-title">The questions you'll ask anyway</h2>
        </div>
        <div className="faq">
          {faqs.map((f, i) => (
            <div className="faq-item" key={i} onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <div className="faq-q"><span>{f.q}</span><span>{openFaq === i ? "−" : "+"}</span></div>
              {openFaq === i && <div className="faq-a">{f.a}</div>}
            </div>
          ))}
        </div>
      </section>

      {/* PORTRAIT / ON-SITE strip before final CTA */}
      <section className="container" style={{ paddingTop: 0, paddingBottom: 80 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 48, alignItems: "center" }}>
          <img src="images/IMG_0128.jpg" alt="Architectural feature — stair and crystal chandelier" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover", borderRadius: 10 }} />
          <div>
            <div className="vs-tag" style={{ marginBottom: 14 }}>Who you're hiring</div>
            <h3 style={{ fontSize: "clamp(28px, 3.2vw, 44px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.05, margin: "0 0 18px", textWrap: "balance" }}>
              Ten years running residential builds. Built for clients who want their own house, not a builder's project.
            </h3>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--v2-muted)", margin: "0 0 12px" }}>
              I've spent the last decade running residential builds as a project manager — handling permits, procurement, tendering, site management, contracts, occupancy. Every operational job a registered builder runs.
            </p>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: "var(--v2-muted)", margin: 0 }}>
              I work with owner-builders because the math is undeniable. A competent project manager working for an honest fee saves the client a builder's margin — which on most premium custom homes is six or seven figures.
            </p>
          </div>
        </div>
      </section>

      {/* PROCESS STRIP — slab to handover */}
      <section className="container" style={{ paddingTop: 0, paddingBottom: 80 }}>
        <div style={{ marginBottom: 24 }}>
          <div className="vs-tag" style={{ marginBottom: 8 }}>Last project · 13 months · slab to handover</div>
          <h3 style={{ fontSize: "clamp(24px, 2.6vw, 36px)", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.1, margin: 0, textWrap: "balance" }}>
            Every stage, run by me. Every trade, tendered. Every dollar, your dollar.
          </h3>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12 }}>
          <figure style={{ margin: 0 }}>
            <img src="images/IMG_3556.jpg" alt="Slab pour with rebar" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 8 }} />
            <figcaption style={{ marginTop: 8, fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--v2-muted)" }}><strong style={{ color: "var(--v2-ink)" }}>M02 — Slab</strong> · structure</figcaption>
          </figure>
          <figure style={{ margin: 0 }}>
            <img src="images/IMG_4100.jpg" alt="Frame stage" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 8 }} />
            <figcaption style={{ marginTop: 8, fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--v2-muted)" }}><strong style={{ color: "var(--v2-ink)" }}>M04 — Frame</strong> · timber and structural steel</figcaption>
          </figure>
          <figure style={{ margin: 0 }}>
            <img src="images/IMG_4810.jpg" alt="Services rough-in" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 8 }} />
            <figcaption style={{ marginTop: 8, fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--v2-muted)" }}><strong style={{ color: "var(--v2-ink)" }}>M08 — Services</strong> · hydraulic, mech, electrical</figcaption>
          </figure>
          <figure style={{ margin: 0 }}>
            <img src="images/IMG_0167.jpg" alt="Finished travertine staircase" style={{ width: "100%", aspectRatio: "4/3", objectFit: "cover", borderRadius: 8 }} />
            <figcaption style={{ marginTop: 8, fontFamily: "Geist Mono, monospace", fontSize: 11, letterSpacing: "0.06em", textTransform: "uppercase", color: "var(--v2-muted)" }}><strong style={{ color: "var(--v2-ink)" }}>M13 — Handover</strong> · keys to the client</figcaption>
          </figure>
        </div>
      </section>

      {/* final */}
      <section className="final">
        <div className="badge" style={{ marginBottom: 24 }}>★ Free · 18 pages · 12-min read</div>
        <h2>Read the case study.<br/>Keep the margin.</h2>
        <p style={{ fontSize: 19, maxWidth: "60ch", margin: "0 auto 36px", lineHeight: 1.5 }}>
          12 minutes with this PDF will tell you whether owner-building stacks up for your project. If it doesn't, you've lost an email. If it does, you're $200k–$1.5M ahead before you've spoken to anyone.
        </p>
        <div className="hero-ctas" style={{ justifyContent: "center" }}>
            <a href="magnet.html" className="btn btn-primary" style={{textDecoration:"none"}}>📩 {cta} →</a>
          </div>
          
      </section>

      <footer className="footer">
        <div className="wordmark">OWNERS<span className="wm-bracket">/</span>BUILDERS</div>
        <div>owners-builders.com.au · Melbourne, VIC</div>
        <div>© 2026</div>
      </footer>
    </div>
  );
};

window.V2 = V2;