// Variant A — current Genesis web system, sharpened. Inter only, cool navy, gold #D4AF37.
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

// Single affiliate URL constant. Every CTA routes here so the discount auto-applies and
// the affiliate attribution is preserved. If Alex sets up Genesis-specific deep-link panels
// on his affiliate dashboard later, swap the per-tile URLs in VANGUARD_PANELS below.
const VANGUARD_AFFILIATE_URL = "https://vanguardperform.com/a/GENESIS10?utm_source=genesis&utm_medium=bloodworkpage&utm_campaign=launch";
const GENESIS_BUNDLE_URL = "https://takegenesis.com/products/dawn-dusk-bundle";

const VANGUARD_PANELS = {
  male: [
    { tier:"LITE",  price:140, markers:7  },
    { tier:"BASIC", price:250, markers:11, popular:true },
    { tier:"TOTAL", price:415, markers:16 },
  ],
  female: [
    { tier:"LITE",  price:120, markers:7  },
    { tier:"BASIC", price:242, markers:11, popular:true },
    { tier:"TOTAL", price:405, markers:18 },
  ],
};

// 10% off via GENESIS10. Display as $X with retail struck-through so the checkout
// price matches expectation. Trailing .00 stripped; real cents preserved when non-round.
function genesisPrice(p){
  return (p * 0.9).toFixed(2).replace(/\.00$/, "");
}

const aStyles = {
  bg: "#1a1a2e",
  surface: "#242833",
  strip: "#0f172a",
  text: "#ededeb",
  muted: "rgba(245,245,245,0.75)",
  dim: "#bbb",
  border: "rgba(255,255,255,0.08)",
  borderHi: "rgba(255,255,255,0.15)",
  gold: "#D4AF37",
  dusk: "#338FB1",
  green: "#16a34a",
};

function AHeadline({ goldHex, duskHex }){
  return (
    <h1 style={{
      margin:"20px 0 22px",
      fontFamily:"Inter", fontWeight:800, textTransform:"uppercase",
      fontSize:"clamp(48px, 8vw, 112px)", lineHeight:0.95, letterSpacing:"-0.03em",
      color:"#fff"
    }}>
      <span style={{color:goldHex}}>Dawn.</span>{" "}
      <span style={{color:duskHex}}>Dusk.</span>{" "}
      <span style={{color:"#fff"}}>Vanguard.</span>
    </h1>
  );
}

function APrimaryCTA({ goldHex }){
  return (
    <a href={VANGUARD_AFFILIATE_URL} style={{
      display:"inline-flex", alignItems:"center", gap:10,
      background:goldHex, color:"#111",
      padding:"18px 28px", borderRadius:6,
      fontFamily:"Inter", fontWeight:800, fontSize:14, letterSpacing:".18em", textTransform:"uppercase",
      textDecoration:"none",
      boxShadow:`0 10px 30px -8px ${goldHex}88, 0 0 0 1px ${goldHex}55`
    }}>Save 10% with GENESIS10 →</a>
  );
}

function AEyebrow({ children }){
  return (
    <div style={{display:"inline-flex", alignItems:"center", gap:10, fontFamily:"Inter", fontWeight:700, fontSize:11, letterSpacing:".32em", textTransform:"uppercase", color:aStyles.muted}}>
      <span style={{width:24, height:1, background:aStyles.gold}}/>
      {children}
    </div>
  );
}

function AProofStrip({ goldHex }){
  const isMobile = window.useIsMobile();
  return (
    <div style={{marginTop: isMobile ? 32 : 40, padding: isMobile ? "18px 0" : "20px 0", borderTop:`1px solid ${aStyles.border}`, borderBottom:`1px solid ${aStyles.border}`, display:"grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(6, 1fr)", gap: isMobile ? 18 : 12}}>
      {PROOF_ITEMS.map((p, i)=>(
        <div key={i} style={{display:"flex", flexDirection:"column", gap:4}}>
          <div style={{fontFamily:"Inter", fontWeight:800, fontSize:14, letterSpacing:".02em", color:"#fff"}}>{p.k}</div>
          <div style={{fontFamily:"Inter", fontWeight:600, fontSize:10, letterSpacing:".16em", textTransform:"uppercase", color:aStyles.muted}}>{p.v}</div>
        </div>
      ))}
    </div>
  );
}

function ASectionHeader({ eyebrow, title }){
  return (
    <div style={{marginBottom:40}}>
      <AEyebrow>{eyebrow}</AEyebrow>
      <h2 style={{margin:"16px 0 0", fontFamily:"Inter", fontWeight:800, fontSize:"clamp(32px, 4.4vw, 54px)", lineHeight:1.02, letterSpacing:"-0.02em", textTransform:"uppercase", color:"#fff", maxWidth:820}}>{title}</h2>
    </div>
  );
}

function AFactCard({ goldHex }){
  const isMobile = window.useIsMobile();
  return (
    <div style={{background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderRadius:10, overflow:"hidden"}}>
      <div style={{padding: isMobile ? "16px 18px" : "18px 24px", borderBottom:`1px solid ${aStyles.border}`, display:"flex", justifyContent:"space-between", alignItems:"center", flexWrap:"wrap", gap:8}}>
        <div style={{fontFamily:"Inter", fontWeight:800, fontSize:11, letterSpacing:".24em", textTransform:"uppercase", color:goldHex}}>Vanguard Performance Labs · Spec Sheet</div>
        {!isMobile && <div style={{fontFamily:"Inter", fontWeight:600, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.muted}}>Why we send people here</div>}
      </div>
      <div>
        {VANGUARD_FACTS.map((f, i)=>(
          <div key={f.k} style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "200px 1fr", gap: isMobile ? 6 : 0, padding: isMobile ? "18px 18px" : "20px 24px", borderTop: i===0 ? "none" : `1px solid ${aStyles.border}`, alignItems:"center"}}>
            <div style={{fontFamily:"Inter", fontWeight:700, fontSize:11, letterSpacing:".22em", textTransform:"uppercase", color:aStyles.muted}}>{f.k}</div>
            <div style={{fontFamily:"Inter", fontWeight:500, fontSize: isMobile ? 16 : 17, color:aStyles.text, lineHeight:1.45}}>{f.v}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function APanelTile({ p, goldHex }){
  const isMobile = window.useIsMobile();
  const discounted = genesisPrice(p.price);
  return (
    <a href={VANGUARD_AFFILIATE_URL}
       style={{
         position:"relative",
         display:"flex", flexDirection:"column",
         background: p.popular ? `linear-gradient(180deg, ${goldHex}10, ${goldHex}04)` : aStyles.surface,
         border: `1px solid ${p.popular ? goldHex + "55" : aStyles.border}`,
         borderRadius:10,
         padding: isMobile ? "24px 22px" : "28px 26px",
         textDecoration:"none",
         color:"inherit",
         transition:"transform .2s ease, border-color .2s ease, box-shadow .2s ease",
         cursor:"pointer",
       }}
       onMouseEnter={(e)=>{ e.currentTarget.style.transform="translateY(-2px)"; e.currentTarget.style.borderColor=goldHex; e.currentTarget.style.boxShadow=`0 12px 28px -12px ${goldHex}66`; }}
       onMouseLeave={(e)=>{ e.currentTarget.style.transform="translateY(0)"; e.currentTarget.style.borderColor = p.popular ? goldHex + "55" : aStyles.border; e.currentTarget.style.boxShadow="none"; }}>
      {p.popular && (
        <div style={{position:"absolute", top:14, right:14, fontFamily:"Inter", fontWeight:800, fontSize:9, letterSpacing:".22em", textTransform:"uppercase", color:goldHex, background:`${goldHex}1a`, padding:"4px 8px", borderRadius:3}}>
          Most Popular
        </div>
      )}
      <div style={{fontFamily:"Inter", fontWeight:800, fontSize:30, letterSpacing:"-0.02em", color:"#fff", lineHeight:1, marginBottom:16, marginTop: p.popular ? 28 : 0, textTransform:"uppercase"}}>
        {p.tier}
      </div>
      <div style={{display:"flex", alignItems:"baseline", gap:10, marginBottom:6}}>
        <span style={{fontFamily:"Inter", fontWeight:800, fontSize:30, color:"#fff", letterSpacing:"-0.01em", lineHeight:1}}>${discounted}</span>
        <span style={{fontFamily:"Inter", fontWeight:500, fontSize:15, color:aStyles.dim, textDecoration:"line-through", textDecorationColor:`${aStyles.dim}`}}>${p.price}</span>
      </div>
      <div style={{marginBottom:18, fontFamily:"Inter", fontWeight:600, fontSize:10, letterSpacing:".2em", textTransform:"uppercase", color:aStyles.dim}}>
        {p.markers} markers
      </div>
      <div style={{marginTop:"auto", paddingTop:16, borderTop:`1px solid ${aStyles.border}`, display:"flex", justifyContent:"space-between", alignItems:"center", gap:8}}>
        <span style={{fontFamily:"Inter", fontWeight:800, fontSize:11, letterSpacing:".22em", textTransform:"uppercase", color:goldHex}}>
          Order at Vanguard →
        </span>
        <span style={{fontFamily:"Inter", fontWeight:700, fontSize:9, letterSpacing:".2em", textTransform:"uppercase", color:aStyles.dim, whiteSpace:"nowrap"}}>
          GENESIS10 applied
        </span>
      </div>
    </a>
  );
}

function APanelRow({ label, panels, accentHex, goldHex }){
  const isMobile = window.useIsMobile();
  const cols = isMobile ? "1fr" : "repeat(3, 1fr)";
  return (
    <section style={{position:"relative", padding: isMobile ? "18px 14px 22px" : "22px 20px 26px", borderRadius:12, overflow:"hidden"}}>
      {/* ambient row tint — 6% accent hex at one corner, fades to transparent */}
      <div style={{position:"absolute", inset:0, background:`linear-gradient(135deg, ${accentHex}14, transparent 55%)`, pointerEvents:"none"}}/>
      <div style={{position:"absolute", inset:0, border:`1px solid ${accentHex}18`, borderRadius:12, pointerEvents:"none"}}/>
      <div style={{position:"relative", display:"flex", alignItems:"center", gap:14, marginBottom: isMobile ? 14 : 18}}>
        <div style={{width: isMobile ? 20 : 28, height:1, background:accentHex, opacity:.7}}/>
        <div style={{fontFamily:"Inter", fontWeight:800, fontSize:11, letterSpacing:".28em", textTransform:"uppercase", color:"#fff"}}>
          {label}
        </div>
        <div style={{flex:1, height:1, background:`linear-gradient(90deg, ${accentHex}55, transparent)`}}/>
      </div>
      <div style={{position:"relative", display:"grid", gridTemplateColumns: cols, gap: isMobile ? 14 : 18}}>
        {panels.map((p) => (
          <APanelTile key={p.tier} p={p} goldHex={goldHex}/>
        ))}
      </div>
    </section>
  );
}

function APanelGrid({ goldHex }){
  const isMobile = window.useIsMobile();
  const coolAccent = aStyles.dusk;   // men's — cool
  const warmAccent = "#C4A265";      // women's — warm gold
  return (
    <div>
      <div style={{display:"flex", flexDirection:"column", gap: isMobile ? 18 : 24}}>
        <APanelRow label="Men's Panels"   panels={VANGUARD_PANELS.male}   accentHex={coolAccent} goldHex={goldHex}/>
        <APanelRow label="Women's Panels" panels={VANGUARD_PANELS.female} accentHex={warmAccent} goldHex={goldHex}/>
      </div>
      <div style={{marginTop: isMobile ? 22 : 28, fontFamily:"Inter", fontWeight:600, fontSize:12, lineHeight:1.6, color:aStyles.dim, textAlign:"center"}}>
        Prefer to browse everything? <a href={VANGUARD_AFFILIATE_URL} style={{color:goldHex, textDecoration:"none", fontWeight:700}}>See Vanguard's full catalog →</a>
      </div>
    </div>
  );
}

function ACTABlock({ goldHex, label="Save 10% with GENESIS10 →", caption="10% off every panel. Discount applied automatically via the link." }){
  return (
    <div>
      <APrimaryCTA goldHex={goldHex}/>
      <div style={{marginTop:14, color:aStyles.muted, fontSize:13, letterSpacing:".02em"}}>{caption}</div>
      <div style={{marginTop:6, color:aStyles.dim, fontSize:12, fontStyle:"italic"}}>Not medical advice. Consult your doctor about your specific situation.</div>
    </div>
  );
}

function ACustomerReviews(){
  const isMobile = window.useIsMobile();
  const items = [
    {q:"I've been using Vanguard Performance for my quarterly bloodwork for over a year now. The process is incredibly simple - I can schedule everything online and get my results back in just a few days.", who:"Kyle H."},
    {q:"After dealing with insurance hassles for years, finding Vanguard Performance was a game-changer. I can order exactly the tests I want without jumping through hoops.", who:"Cynthia C."},
    {q:"I was skeptical at first about ordering bloodwork online, but Vanguard Performance made it so easy. They use Quest so there are plenty of lab locations to choose from.", who:"Darryl S."},
    {q:"As someone who tracks my biomarkers regularly, Vanguard Performance has been perfect for my needs. I can customize my panels and track trends over time.", who:"Brandon L."},
  ];
  return (
    <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 18 : 24}}>
      {items.map((it, i) => (
        <div key={i} style={{background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderRadius:10, padding: isMobile ? "28px 24px" : "32px 32px"}}>
          <div style={{fontSize:36, color:aStyles.gold, fontFamily:"Georgia, serif", lineHeight:0.8, marginBottom:6}}>“</div>
          <p style={{margin:0, fontSize: isMobile ? 15 : 16, lineHeight:1.6, color:aStyles.text}}>{it.q}</p>
          <div style={{marginTop:20, paddingTop:14, borderTop:`1px solid ${aStyles.border}`, display:"flex", justifyContent:"space-between", alignItems:"center", fontFamily:"Inter", fontWeight:700, fontSize:10, letterSpacing:".2em", textTransform:"uppercase", color:aStyles.muted, gap:8, flexWrap:"wrap"}}>
            <span>{it.who}</span>
            <span>Verified · Vanguard Customer</span>
          </div>
        </div>
      ))}
    </div>
  );
}

function AFaq({ goldHex }){
  const [open, setOpen] = useStateA(0);
  return (
    <div style={{borderTop:`1px solid ${aStyles.border}`}}>
      {FAQ_ITEMS.map((it, i)=>(
        <div key={i} style={{borderBottom:`1px solid ${aStyles.border}`}}>
          <button onClick={()=>setOpen(open===i?-1:i)} style={{width:"100%", background:"transparent", border:0, color:"#fff", padding:"24px 0", display:"flex", justifyContent:"space-between", alignItems:"center", cursor:"pointer", fontFamily:"Inter", fontWeight:700, fontSize:17, letterSpacing:"-0.01em", textAlign:"left"}}>
            <span>{it.q}</span>
            <span style={{color:goldHex, fontSize:22, transform:open===i?"rotate(45deg)":"none", transition:"transform .2s"}}>+</span>
          </button>
          <div style={{maxHeight:open===i?400:0, overflow:"hidden", transition:"max-height .35s ease"}}>
            <p style={{margin:"0 0 26px", color:aStyles.muted, fontSize:15, lineHeight:1.7, maxWidth:780}}>{it.a}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function VariantA({ goldHue }){
  const goldHex = goldHue === "warm" ? "#C4A265" : aStyles.gold;
  const duskHex = aStyles.dusk;
  const isMobile = window.useIsMobile();
  const pad = isMobile ? "40px 20px 24px" : "60px 24px 30px";
  const secPad = isMobile ? "60px 20px" : "100px 24px";
  const secPadTight = isMobile ? "12px 20px 60px" : "20px 24px 100px";
  return (
    <div style={{background:aStyles.bg, color:aStyles.text, paddingTop: isMobile ? 133 : 131, overflowX:"hidden"}}>
      {/* HERO */}
      <section style={{position:"relative", overflow:"hidden"}}>
        <div style={{position:"absolute", inset:0, background:`radial-gradient(1000px circle at 80% 30%, ${duskHex}22, transparent 60%), radial-gradient(900px circle at 10% 80%, ${goldHex}14, transparent 60%)`, pointerEvents:"none"}}/>
        <div style={{maxWidth:1200, margin:"0 auto", padding: pad, position:"relative"}}>
          <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.25fr 1fr", gap: isMobile ? 36 : 56, alignItems:"center"}}>
            <div>
              <AEyebrow>Genesis × Vanguard</AEyebrow>
              <AHeadline goldHex={goldHex} duskHex={duskHex}/>
              <div style={{fontFamily:"Inter", fontSize: isMobile ? 17 : 18, lineHeight:1.55, color:aStyles.text, maxWidth:540, marginBottom:32}}>
                <p style={{margin:"0 0 8px"}}>You take your supplements seriously.</p>
                <p style={{margin:"0 0 8px"}}>Guessing is for people who don't take their stack seriously.</p>
                <p style={{margin:0}}>Here is where we send the people who do both.</p>
                <div style={{margin:"18px 0 0", fontStyle:"italic", fontSize:14, lineHeight:1.5, color:aStyles.dim}}>
                  <span style={{marginRight:8}}>-</span>
                  Bloodwork isn't for the person who'd rather not know. If you're fine guessing, skip this page.
                </div>
              </div>
              <ACTABlock goldHex={goldHex}/>
            </div>
            {/* Hero data-vis moment */}
            <div style={{background:"rgba(0,0,0,0.35)", border:`1px solid ${aStyles.border}`, borderRadius:10, padding: isMobile ? "18px 16px 14px" : "22px 22px 18px", backdropFilter:"blur(6px)"}}>
              <div style={{display:"flex", justifyContent:"space-between", alignItems:"center", marginBottom:14, paddingBottom:12, borderBottom:`1px solid ${aStyles.border}`, gap:8, flexWrap:"wrap"}}>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".24em", textTransform:"uppercase", color:aStyles.muted}}>Sample Report · Reference Ranges</div>
                <div style={{fontFamily:"Inter", fontWeight:700, fontSize:10, letterSpacing:".2em", textTransform:"uppercase", color:goldHex, display:"flex", alignItems:"center", gap:6}}>
                  <span style={{width:6, height:6, borderRadius:"50%", background:"#c4604a"}}/>
                  02 flagged high · 02 low · 04 optimal
                </div>
              </div>
              <ReferenceRangeChart variant="A"/>
              <div style={{marginTop:12, paddingTop:10, borderTop:`1px solid ${aStyles.border}`, display:"flex", justifyContent:"space-between", fontFamily:"Inter", fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.dim}}>
                <span>Low</span><span>Optimal Band</span><span>High</span>
              </div>
            </div>
          </div>
          <AProofStrip goldHex={goldHex}/>
        </div>
      </section>

      {/* WHY BLOODWORK */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPad}}>
        <ASectionHeader eyebrow="Why Bloodwork" title="Two commitments. Same kind of person."/>
        <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 28 : 56, maxWidth:1100}}>
          <div>
            <p style={{margin:"0 0 18px", fontSize:18, lineHeight:1.65, color:aStyles.text}}>
              Genesis was built to make you feel better. The reports confirm it.
            </p>
            <p style={{margin:"0 0 18px", fontSize:18, lineHeight:1.65, color:aStyles.text}}>
              Bloodwork is the other move the serious optimization person makes. It tells you where you are, what you have, and what you still want to work on.
            </p>
          </div>
          <div>
            <p style={{margin:"0 0 18px", fontSize:18, lineHeight:1.65, color:aStyles.muted}}>
              Same kind of person does both. Two separate commitments that pair well together.
            </p>
            <div style={{marginTop:28, padding:"18px 20px", background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderLeft:`3px solid ${goldHex}`, borderRadius:6}}>
              <div style={{fontSize:14, color:aStyles.muted, lineHeight:1.55}}>
                Genesis does not prove its value through bloodwork. Bloodwork is a parallel commitment for the same audience.
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* WHY VANGUARD */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <ASectionHeader eyebrow="Why Vanguard" title="We looked at the landscape. This is where we send our people."/>
        <AFactCard goldHex={goldHex}/>
      </section>

      {/* CUSTOMER REVIEWS */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <ASectionHeader eyebrow="Customer Reviews" title="What Vanguard customers say."/>
        <ACustomerReviews/>
      </section>

      {/* WHICH PANEL */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <ASectionHeader eyebrow="Which Panel" title="Where to start."/>
        <APanelGrid goldHex={goldHex}/>
        <div style={{marginTop: isMobile ? 28 : 36, fontFamily:"Inter", fontWeight:600, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.dim, textAlign:"center"}}>
          4,000+ Quest labs · doctor-reviewed · 15 min · 10% off every panel
        </div>
      </section>

      {/* TRANSPARENCY */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <ASectionHeader eyebrow="Transparency" title="Why are we telling you this?"/>
        <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: isMobile ? 32 : 56, maxWidth:1100}}>
          <div>
            <p style={{margin:"0 0 18px", fontSize:17, lineHeight:1.7, color:aStyles.text}}>
              GENESIS10 is an affiliate code. When you use it, Vanguard pays Genesis a commission on your purchase.
            </p>
            <p style={{margin:"0 0 18px", fontSize:17, lineHeight:1.7, color:aStyles.muted}}>
              We want to name that openly because most affiliate pages in this space hide it. Here is the honest version. Genesis would recommend Vanguard even without the commission. We looked at the bloodwork landscape, we picked Vanguard, and the affiliate relationship is how they say thank you for the traffic.
            </p>
            <p style={{margin:"0 0 18px", fontSize:17, lineHeight:1.7, color:aStyles.muted}}>
              If Vanguard ever stops being the right call, we will say so here. You get 10% off. We get a commission. The math is on the table.
            </p>
            <p style={{margin:0, fontSize:17, lineHeight:1.7, color:aStyles.muted}}>
              Not satisfied with your bloodwork experience? Email team@takegenesis.com and we'll refund our commission back to you.
            </p>
          </div>
          <div>
            <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".22em", textTransform:"uppercase", color:aStyles.muted, marginBottom:14}}>Others We Evaluated</div>
            <div style={{display:"flex", flexDirection:"column", gap:0, border:`1px solid ${aStyles.border}`, borderRadius:8, overflow:"hidden"}}>
              {COMPETITORS.map((c, i)=>(
                <div key={c} style={{display:"grid", gridTemplateColumns:"1fr auto", padding:"16px 20px", background: i%2===0 ? aStyles.surface : "rgba(255,255,255,0.01)", borderBottom: i < COMPETITORS.length-1 ? `1px solid ${aStyles.border}` : "none", alignItems:"center"}}>
                  <div style={{fontFamily:"Inter", fontWeight:700, fontSize:15, color:"#fff"}}>{c}</div>
                  <div style={{fontFamily:"Inter", fontWeight:700, fontSize:10, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.dim}}>Legit, not chosen</div>
                </div>
              ))}
              <div style={{display:"grid", gridTemplateColumns:"1fr auto", padding:"16px 20px", background:`${goldHex}12`, borderTop:`1px solid ${goldHex}44`, alignItems:"center"}}>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize:15, color:"#fff"}}>Vanguard Performance Labs</div>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".2em", textTransform:"uppercase", color:goldHex}}>Our Pick</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ABOUT THE STACK */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <ASectionHeader eyebrow="About the Stack" title="Speaking of Genesis."/>
        <div style={{display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.2fr 1fr", gap: isMobile ? 28 : 56, alignItems:"start", maxWidth:1100}}>
          <div>
            <p style={{margin:"0 0 22px", fontSize:17, lineHeight:1.7, color:aStyles.text}}>
              If you landed here first, you may not yet know what the stack does.
            </p>
            <div style={{display:"grid", gridTemplateColumns:"1fr 1fr", gap: isMobile ? 14 : 20, marginBottom:22}}>
              <div style={{padding: isMobile ? "18px 16px" : "22px 22px", background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderRadius:8}}>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".28em", textTransform:"uppercase", color:goldHex, marginBottom:10}}>AM</div>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize: isMobile ? 24 : 30, color:"#fff", lineHeight:1, marginBottom:10, letterSpacing:"-0.01em"}}>Dawn</div>
                <div style={{fontFamily:"Inter", fontWeight:600, fontSize: isMobile ? 10 : 11, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.muted, lineHeight:1.5}}>35 ingredients · Blood flow · Focus · Recovery</div>
              </div>
              <div style={{padding: isMobile ? "18px 16px" : "22px 22px", background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderRadius:8}}>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".28em", textTransform:"uppercase", color:duskHex, marginBottom:10}}>PM</div>
                <div style={{fontFamily:"Inter", fontWeight:800, fontSize: isMobile ? 24 : 30, color:"#fff", lineHeight:1, marginBottom:10, letterSpacing:"-0.01em"}}>Dusk</div>
                <div style={{fontFamily:"Inter", fontWeight:600, fontSize: isMobile ? 10 : 11, letterSpacing:".18em", textTransform:"uppercase", color:aStyles.muted, lineHeight:1.5}}>15 ingredients · Sleep depth · Recovery</div>
              </div>
            </div>
            <p style={{margin:"0 0 16px", fontSize:16, lineHeight:1.7, color:aStyles.muted}}>
              Between them, 42 unique ingredients. Two scoops. No pills.
            </p>
            <a href={GENESIS_BUNDLE_URL} style={{display:"inline-flex", alignItems:"center", gap:8, marginTop:4, color:goldHex, textDecoration:"none", fontFamily:"Inter", fontWeight:800, fontSize:12, letterSpacing:".22em", textTransform:"uppercase"}}>Start with Dawn + Dusk →</a>
          </div>
          <div style={{background:aStyles.surface, border:`1px solid ${aStyles.border}`, borderRadius:10, padding:"28px 30px"}}>
            <div style={{fontSize:44, color:goldHex, fontFamily:"Georgia, serif", lineHeight:1, marginBottom:6}}>“</div>
            <p style={{margin:0, fontSize:18, lineHeight:1.55, color:aStyles.text, fontWeight:500}}>
              Top of the market product. Definitely not for a noob. If you are looking for the highest quality blend of supps without the hassle of putting together a stack yourself, this is well worth the cost.
            </p>
            <div style={{marginTop:16, fontFamily:"Inter", fontWeight:700, fontSize:11, letterSpacing:".2em", textTransform:"uppercase", color:aStyles.muted}}>Ben W. · Verified Genesis Bundle Customer</div>
          </div>
        </div>
      </section>

      {/* CONCIERGE */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: secPadTight}}>
        <AConcierge goldHex={goldHex}/>
      </section>

      {/* FAQ */}
      <section style={{maxWidth:1200, margin:"0 auto", padding: isMobile ? "12px 20px 80px" : "20px 24px 120px"}}>
        <ASectionHeader eyebrow="FAQ" title="Frequently asked."/>
        <AFaq goldHex={goldHex}/>
      </section>
    </div>
  );
}

function AConcierge({ goldHex }){
  const [email, setEmail] = useStateA("");
  const [state, setState] = useStateA("idle"); // idle | submitting | sent | error
  const [errMsg, setErrMsg] = useStateA("");
  const isMobile = window.useIsMobile();

  const onSubmit = async (e) => {
    e.preventDefault();
    if (!email || state === "submitting") return;
    setState("submitting");
    setErrMsg("");
    try {
      const res = await fetch("/api/waitlist", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, source: "bloodwork-concierge" }),
      });
      if (res.ok || res.status === 202) {
        setState("sent");
        if (window.gtag) window.gtag("event", "concierge_waitlist_signup", { page_location: "bloodwork" });
      } else {
        const data = await res.json().catch(() => ({}));
        setErrMsg(data.error === "Invalid email" ? "Please check the email address." : "Something went wrong. Email team@takegenesis.com instead.");
        setState("error");
      }
    } catch (err) {
      setErrMsg("Network error. Try again or email team@takegenesis.com.");
      setState("error");
    }
  };

  return (
    <div style={{position:"relative", borderRadius:14, overflow:"hidden", border:`1px solid ${goldHex}44`, background:`linear-gradient(180deg, ${goldHex}10, ${goldHex}04)`}}>
      <div style={{position:"absolute", inset:0, background:`radial-gradient(700px circle at 90% 20%, ${goldHex}22, transparent 60%)`, pointerEvents:"none"}}/>
      <div style={{position:"relative", padding: isMobile ? "36px 24px" : "56px 48px", display:"grid", gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr", gap: isMobile ? 28 : 48, alignItems:"center"}}>
        <div>
          <div style={{fontFamily:"Inter", fontWeight:800, fontSize:10, letterSpacing:".28em", textTransform:"uppercase", color:goldHex, marginBottom:14}}>Launching Soon · Early Access</div>
          <h3 style={{margin:"0 0 14px", fontFamily:"Inter", fontWeight:800, fontSize: isMobile ? 32 : 44, letterSpacing:"-0.02em", textTransform:"uppercase", color:"#fff", lineHeight:1}}>The Genesis Concierge</h3>
          <p style={{margin:0, fontSize:17, lineHeight:1.6, color:aStyles.muted, maxWidth:520}}>
            Dawn, Dusk, your Vanguard panel, and an expert consult to walk you through the results. One package. One checkout. Tell us and we will open it to you first.
          </p>
        </div>
        <div>
          {state === "sent" ? (
            <div style={{padding:"18px 20px", background:"rgba(0,0,0,0.3)", border:`1px solid ${goldHex}66`, borderRadius:8, color:"#fff"}}>
              <div style={{fontFamily:"Inter", fontWeight:800, fontSize:11, letterSpacing:".22em", textTransform:"uppercase", color:goldHex, marginBottom:6}}>On the list</div>
              <div style={{fontSize:14, color:aStyles.muted}}>We will email you the moment Concierge opens.</div>
            </div>
          ) : (
            <form onSubmit={onSubmit} style={{display:"flex", flexDirection:"column", gap:12}}>
              <input value={email} onChange={e=>setEmail(e.target.value)} type="email" required placeholder="you@domain.com" disabled={state === "submitting"} style={{background:"rgba(0,0,0,0.4)", border:`1px solid ${aStyles.borderHi}`, borderRadius:6, padding:"16px 18px", color:"#fff", fontFamily:"Inter", fontSize:15, outline:"none", opacity: state === "submitting" ? 0.6 : 1}}/>
              <button type="submit" disabled={state === "submitting"} style={{background:goldHex, color:"#111", border:0, padding:"16px 20px", borderRadius:6, fontFamily:"Inter", fontWeight:800, fontSize:12, letterSpacing:".2em", textTransform:"uppercase", cursor: state === "submitting" ? "wait" : "pointer", boxShadow:`0 10px 24px -8px ${goldHex}88`, opacity: state === "submitting" ? 0.7 : 1}}>
                {state === "submitting" ? "Sending…" : "Notify Me →"}
              </button>
              {state === "error" && errMsg ? (
                <div style={{fontSize:12, color:"#e8a4a4"}}>{errMsg}</div>
              ) : (
                <div style={{fontSize:11, color:aStyles.dim}}>One email when it launches. No newsletter. No spam.</div>
              )}
            </form>
          )}
        </div>
      </div>
    </div>
  );
}

window.VariantA = VariantA;