// Offer page sections for "The Independent Insider".
// Composes the design-system primitives from the global namespace.
const DS = window.BunkerGearBlueprintDesignSystem_3e3d76;
const { Button, Badge, Eyebrow, OfferCard, PriceBlock, GuaranteeCallout } = DS;

const wrap = { maxWidth: 1080, margin: '0 auto', padding: '0 28px' };
const narrow = { maxWidth: 760, margin: '0 auto', padding: '0 28px' };

function Nav() {
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(0,0,0,0.82)', backdropFilter: 'blur(10px)', borderBottom: '1px solid var(--bgb-iron)' }}>
      <div style={{ ...wrap, display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 66 }}>
        <img src="../../assets/logo-lockup.svg" alt="Bunker Gear Blueprint" style={{ height: 34 }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}>
          <a href="#stack" style={{ fontFamily: "'Lucida Console',monospace", fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--bgb-grey)', textDecoration: 'none' }}>The Offer</a>
          <a href="#price" style={{ fontFamily: "'Lucida Console',monospace", fontSize: 12, letterSpacing: '.14em', textTransform: 'uppercase', color: 'var(--bgb-grey)', textDecoration: 'none' }}>Investment</a>
          <Button size="sm" href="#apply">Apply</Button>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section style={{ position: 'relative', background: "linear-gradient(rgba(0,0,0,0.68), rgba(0,0,0,0.88)), radial-gradient(1100px 560px at 50% -8%, rgba(230,130,14,0.22), transparent 62%), url('../../assets/hero-firefighter.png') center 28%/cover no-repeat, var(--bgb-black)", padding: '104px 0 92px', textAlign: 'center', borderBottom: '1px solid var(--bgb-iron)' }}>
      <div style={narrow}>
        <Eyebrow color="ember" style={{ justifyContent: 'center', marginBottom: 22 }}>For turnout-gear manufacturers</Eyebrow>
        <h1 style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 800, fontSize: 'clamp(40px, 6vw, 72px)', lineHeight: 1.02, letterSpacing: '-0.03em', color: 'var(--bgb-white)', margin: '0 0 22px' }}>
          Own the most-trusted voice in the room with{' '}
          <span style={{ color: 'var(--bgb-ember)' }}>The Independent Insider</span>
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 22, lineHeight: 1.5, color: 'var(--bgb-grey)', maxWidth: 640, margin: '0 auto 34px' }}>
          A serving fire chief puts his independent name on the buyer-education content your team can't believably write — and you own the PFAS / NFPA&nbsp;1850 conversation within 90 days.
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button size="lg" href="#apply">Apply for a seat</Button>
          <Button size="lg" variant="secondary" href="#stack">See what's included</Button>
        </div>
        <div style={{ marginTop: 26 }}>
          <Badge variant="ember">Only 3 manufacturer seats</Badge>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section style={{ background: 'var(--bgb-bone)', padding: '76px 0' }}>
      <div style={narrow}>
        <Eyebrow color="grey" style={{ marginBottom: 18 }}>The trust gap</Eyebrow>
        <h2 style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 700, fontSize: 'clamp(28px,4vw,40px)', lineHeight: 1.1, letterSpacing: '-0.02em', color: 'var(--bgb-ink)', margin: '0 0 18px' }}>
          "Our content sounds like a sales brochure chiefs don't trust."
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.7, color: 'var(--text-on-light-muted)', margin: 0 }}>
          Your in-house team are marketers, not chiefs — they literally can't produce content that survives a committee's "this is just vendor marketing" filter. Independence is the product. Every piece carries a real chief's byline, not the vendor's.
        </p>
      </div>
    </section>
  );
}

function ValueStack() {
  return (
    <section id="stack" style={{ background: 'var(--bgb-black)', padding: '92px 0' }}>
      <div style={wrap}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow color="ember" style={{ justifyContent: 'center', marginBottom: 16 }}>The Value Stack</Eyebrow>
          <h2 style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 700, fontSize: 'clamp(30px,4vw,46px)', letterSpacing: '-0.02em', color: 'var(--bgb-white)', margin: 0 }}>
            Five layers of borrowed credibility
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(330px, 1fr))', gap: 20 }}>
          <OfferCard kicker="Core" name="The Insider Authority Retainer" value="$6,000/mo value">
            5 pieces/mo (1 cornerstone + 4 supporting), chief-authored, NFPA&nbsp;1971/1851→1850 + PFAS fluent, RFP/grant-aware.
          </OfferCard>
          <OfferCard kicker="Accelerator" name="The Trust-Voice Style Kit" value="$2,500 value">
            A documented voice + claim-checking framework so no technical fact is ever wrong in front of 13,000 chiefs.
          </OfferCard>
          <OfferCard kicker="Status Elevator" name="Audience Access: The Chief's Desk" value="$3,000/qtr value" accent="gold">
            First-look into Rob's Bunker Gear Blueprint audience + survey data from real chiefs. The moat competitors can't copy.
          </OfferCard>
          <OfferCard kicker="Risk Eliminator" name="The Believability Guarantee" value="Priced in">
            Absorbs credibility risk, not just refund risk. See the full guarantee below.
          </OfferCard>
        </div>
      </div>
    </section>
  );
}

function PriceSection() {
  return (
    <section id="price" style={{ background: 'var(--bgb-ink)', padding: '92px 0', borderTop: '1px solid var(--bgb-iron)' }}>
      <div style={{ maxWidth: 860, margin: '0 auto', padding: '0 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
          <div>
            <Eyebrow color="ember" style={{ marginBottom: 16 }}>Price architecture</Eyebrow>
            <h2 style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 700, fontSize: 34, letterSpacing: '-0.02em', color: 'var(--bgb-white)', margin: '0 0 16px' }}>
              Less than a junior hire
            </h2>
            <p style={{ fontFamily: 'var(--font-body)', fontSize: 16.5, lineHeight: 1.7, color: 'var(--bgb-grey)', margin: 0 }}>
              A full-time technical content marketer with fire credibility runs $90k–$120k/yr loaded — and still won't have a serving chief's independent name. One mid-size turnout bid won on trust ≈ $300k.
            </p>
          </div>
          <PriceBlock value="~$86,500/yr" price="$5,000" cadence="/mo"
            note="or $51,000/yr prepaid — save 15%" entry="$4,500 per white paper" />
        </div>
      </div>
    </section>
  );
}

function Guarantee() {
  return (
    <section style={{ background: 'var(--bgb-black)', padding: '80px 0' }}>
      <div style={narrow}>
        <GuaranteeCallout>
          If your first cornerstone piece doesn't pass your own committee/SME review as "a chief could have written this," Rob rewrites it free until it does — or you don't pay for that piece.
        </GuaranteeCallout>
      </div>
    </section>
  );
}

function Urgency() {
  return (
    <section style={{ background: "linear-gradient(rgba(12,12,12,0.80), rgba(12,12,12,0.90)), url('../../assets/gear-detail.png') center/cover no-repeat, var(--bgb-graphite)", padding: '72px 0', borderTop: '1px solid var(--bgb-iron)', borderBottom: '1px solid var(--bgb-iron)' }}>
      <div style={{ ...wrap, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 28, flexWrap: 'wrap' }}>
        <div style={{ flex: '1 1 420px' }}>
          <Eyebrow color="gold" style={{ marginBottom: 14 }}>First-mover on NFPA 1850</Eyebrow>
          <p style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 500, fontSize: 24, lineHeight: 1.35, color: 'var(--bgb-white)', margin: 0 }}>
            The 1851/1852→1850 consolidation + the 2026 PFAS lawsuit wave is a one-time land-grab. Whoever owns the explainer content wins the trust position for years.
          </p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, flex: 'none' }}>
          <Badge variant="ember">15,000+ federal PFAS cases</Badge>
          <Badge variant="gold">Only 3 seats by design</Badge>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section id="apply" style={{ background: 'radial-gradient(900px 460px at 50% 120%, rgba(230,130,14,0.2), transparent 60%), var(--bgb-black)', padding: '100px 0', textAlign: 'center' }}>
      <div style={narrow}>
        <h2 style={{ fontFamily: "'Archivo',sans-serif", fontWeight: 800, fontSize: 'clamp(30px,4vw,48px)', letterSpacing: '-0.02em', color: 'var(--bgb-white)', margin: '0 0 18px' }}>
          Claim the independent voice<br />before a competitor does
        </h2>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, color: 'var(--bgb-grey)', maxWidth: 540, margin: '0 auto 32px' }}>
          Three manufacturer seats. One serving chief. Apply to see if your brand is a fit.
        </p>
        <Button size="lg" href="#apply">Apply for a seat</Button>
        <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--bgb-iron)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <img src="../../assets/logo-lockup.svg" alt="Bunker Gear Blueprint" style={{ height: 30, opacity: 0.85 }} />
          <span style={{ fontFamily: "'Lucida Console',monospace", fontSize: 12, color: 'var(--bgb-grey-dim)' }}>Rob Pietras · Serving Fire Chief · Independent</span>
        </div>
      </div>
    </section>
  );
}

window.OfferSections = { Nav, Hero, Problem, ValueStack, PriceSection, Guarantee, Urgency, FinalCTA };