// Capabilities, About, Team, Contact, Map, Launchbox, Legal pages

function CapabilitiesIndex() {
  const items = [
    { slug: 'strategy', title: 'Strategy', tag: 'How it comes together',
      blurb: 'Cross-platform strategies built on data, polling, and decades of on-the-ground experience. We write the plan, set the benchmarks, and decide where the money goes.' },
    { slug: 'direct-mail', title: 'Direct Mail', tag: 'At the next level',
      blurb: 'Where strategy, creativity, and art meet. Twenty-plus national awards, in-house design, union printers, the lowest cost-per-piece you\'ll find.' },
    { slug: 'digital', title: 'Digital', tag: 'Tell your story',
      blurb: 'Best creative in the business at the right price point. Cross-channel buys across 1.5M publishers, in-house production, real-time optimization.' }
  ];
  return (
    <>
      <Nav darkInitial />
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '180px var(--gutter) 100px' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-light">§ Capabilities</div>
          <h1 className="display-xl" style={{ marginTop: 32, maxWidth: 1400 }}>Apples<br/><span style={{ fontStyle: 'italic', fontWeight: 300 }}>&amp; oranges.</span></h1>
          <p className="body-lg" style={{ marginTop: 48, maxWidth: 760, opacity: 0.7 }}>
            The factors that go into non-profit organizations, PACs, and campaigns: people — personalities — data, polling, teams — cash flow. It's a sophisticated, fast-paced business with extremely high stakes — and where passions run high. To do it well, to succeed, you must have experience on dozens, if not hundreds, of campaigns to put together data-driven, cross-platform strategies to reach, mobilize, and persuade people.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="eyebrow">What it looks like</div>
          <p className="display-md" style={{ marginTop: 32, maxWidth: 1100, fontWeight: 300 }}>
            We write campaign plans — goals, benchmarks, budget. We define a win model with voter contact universes and persuasion, mobilization &amp; turnout strategies, and we help inform spending decisions on how to allocate resources: <span style={{fontStyle:'italic'}}>how much, when, where, and how.</span>
          </p>
        </div>
      </section>

      <section style={{ padding: '0 var(--gutter) 160px' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink-12)' }}>
          {items.map((it, i) => (
            <Link key={it.slug} to={`/capabilities/${it.slug}`} style={{
              padding: '64px 32px',
              borderRight: i < 2 ? '1px solid var(--ink-12)' : 'none',
              borderBottom: '1px solid var(--ink-12)',
              transition: 'background 0.4s',
              minHeight: 480,
              display: 'flex',
              flexDirection: 'column',
              justifyContent: 'space-between'
            }}
              onMouseOver={e => e.currentTarget.style.background = 'var(--paper-warm)'}
              onMouseOut={e => e.currentTarget.style.background = 'transparent'}
            >
              <div>
                <div className="eyebrow">0{i+1} — {it.tag}</div>
                <div className="display-md" style={{ marginTop: 32 }}>{it.title}</div>
                <p className="body-lg" style={{ marginTop: 32, color: 'var(--ink-60)' }}>{it.blurb}</p>
              </div>
              <div className="link-arrow" style={{ marginTop: 48 }}>Explore {it.title.toLowerCase()}</div>
            </Link>
          ))}
        </div>
      </section>

      <Footer />
    </>
  );
}

function CapabilitySubPage({ slug }) {
  const D = window.TSD_DATA;
  const data = {
    'strategy': {
      title: 'Strategy',
      tagline: 'How it comes together',
      hero: 'We write campaign plans. Goals, benchmarks, and budget. A win model. The persuasion and mobilization universes. The spend decisions: how much, when, where, and how.',
      sub: 'A practitioner\'s discipline',
      strategy: [
        { k: 'Plan & Win Model', v: 'We define voter contact universes, persuasion targets, and mobilization & turnout strategy. Built on the voter file, polling, and the team\'s direct experience.' },
        { k: 'Cross-Platform Coherence', v: 'Mail, digital, paid media, and field — every piece reinforces every other piece. The plan is the connective tissue.' },
        { k: 'Decision Architecture', v: 'We help inform every major decision: where to allocate resources, when to spend, what to test, and when to scale.' }
      ],
      tactics: [
        { k: 'Daily Operations', v: 'Standing rooms, weekly cadence, clear ownership. We work with the campaign team, not around it.' },
        { k: 'Data & Analytics', v: 'Voter-file segmentation, modeling, and analytics across consumer and behavioral data sources. Then our own.' },
        { k: 'Trainings & Coaching', v: 'Candidate prep, manager onboarding, debate prep, surrogate training. Twenty-plus years of doing this.' }
      ],
      examples: ['alexis-rinck', 'latina-initiative', 'kathryn-garcia']
    },
    'direct-mail': {
      title: 'Direct Mail',
      tagline: 'At the next level',
      hero: 'Direct mail remains one of the most targeted ways to tell your story. Our direct mail is where strategy, creativity, and art meet. Founded in the art and science of direct contact, we blend unique and smart concepts with stunning graphic design to make sure your message is heard and understood.',
      sub: 'More than meets the eye',
      strategy: [
        { k: 'Planning', v: 'A multi-tactic voter outreach plan with operational precision — and we make sure it goes to plan. We stay nimble, with a built-in ability to adjust to ongoing factors throughout the campaign.' },
        { k: 'Analysis', v: 'We make sure the analytical approach to the campaign is in sync with all outgoing communications. Every mail piece layers on every other aspect of the campaign.' },
        { k: 'Optics & Message', v: 'Optics are critical. What does your mail feel like? What is the nature and narrative of the campaign? We arrive at a look, feel, and tone — and we know what works.' }
      ],
      tactics: [
        { k: 'Precision Targeting', v: 'We use data from dozens of sources, from the voter file to consumer data and voter behavior. Then we run our own analytics.' },
        { k: 'In-House Design', v: 'We design everything in-house, where creative energy flows. And we shoot our own photos as well.' },
        { k: 'Operations', v: 'Union printers and, whenever possible, LEED-certified eco-friendly facilities. Postal routes, timing, shortened print-to-hit ratios — at the lowest cost-per-piece you\'ll find.' }
      ],
      examples: ['trisha-calvarese', 'kathryn-garcia', 'cisco-aguilar']
    },
    'digital': {
      title: 'Digital',
      tagline: 'Tell your story',
      hero: 'Our creative work is the best in the business — at the right price point. We know that most campaigns can\'t afford a $50K production shoot — and we think that they shouldn\'t. You can tell your story better and less expensively. With TSD, you don\'t sacrifice the production quality.',
      sub: 'The best creative in the business',
      strategy: [
        { k: 'Behavior Insights', v: 'We use complex data to learn what messages people will respond to and engage with. Then we put that in front of a camera.' },
        { k: 'Analysis', v: 'We work with the entire campaign team to make sure your creative for all platforms is in line with all outgoing communications. Every video layers on every other piece.' },
        { k: 'Optimization', v: 'We analyze incoming data points to scale outgoing impressions and modify the program as needed. Real-time results — testing, identifying, and scaling top-performing ad units.' }
      ],
      tactics: [
        { k: 'Cross-Channel Buys', v: 'We bid in real-time across mobile, social, CTV, and audio networks with more than 1.5M publishers. We create audiences based on where people go and where they\'ve been.' },
        { k: 'In-House Production', v: 'Everything from script to final edit, in-house.' },
        { k: 'Precision Targeting', v: 'Hundreds of data points — likelihood to vote, party loyalty, issue sentiment, income, gender. Cookie and cookieless matching, IP-match, social user IDs. Look-alike universes that scale.' }
      ],
      examples: ['our-future-united', 'dina-titus', 'alexis-rinck']
    }
  };
  const d = data[slug];
  if (!d) return <NotFound />;
  const examples = d.examples.map(s => D.cases.find(c => c.slug === s));

  return (
    <>
      <Nav darkInitial />
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '180px var(--gutter) 100px', position: 'relative', overflow: 'hidden' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-light">§ Capabilities — {d.tagline}</div>
          <h1 className="display-xl" style={{ marginTop: 32 }}>{d.title}.</h1>
          <p className="body-lg" style={{ marginTop: 48, maxWidth: 880, opacity: 0.75 }}>{d.hero}</p>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="eyebrow">{d.sub}</div>
          <h2 className="display-md" style={{ marginTop: 32, maxWidth: 900 }}>The thinking.</h2>
          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink-12)' }}>
            {d.strategy.map((s, i) => (
              <Reveal key={i} delay={i*60} style={{ padding: '40px 24px 48px', borderRight: i < 2 ? '1px solid var(--ink-12)' : 'none', borderBottom: '1px solid var(--ink-12)' }}>
                <div className="eyebrow">0{i+1} — Strategy</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, marginTop: 24, letterSpacing: '-0.01em' }}>{s.k}</div>
                <p className="body" style={{ color: 'var(--ink-60)', marginTop: 16 }}>{s.v}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section section-paper-warm">
        <div className="shell">
          <h2 className="display-md" style={{ maxWidth: 900 }}>The doing.</h2>
          <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink-12)' }}>
            {d.tactics.map((s, i) => (
              <Reveal key={i} delay={i*60} style={{ padding: '40px 24px 48px', borderRight: i < 2 ? '1px solid var(--ink-12)' : 'none', borderBottom: '1px solid var(--ink-12)' }}>
                <div className="eyebrow">0{i+1} — Tactics</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 500, marginTop: 24, letterSpacing: '-0.01em' }}>{s.k}</div>
                <p className="body" style={{ color: 'var(--ink-60)', marginTop: 16 }}>{s.v}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="shell">
          <div className="eyebrow">In practice</div>
          <h2 className="display-md" style={{ marginTop: 24, marginBottom: 64 }}>Selected work.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
            {examples.map((c, i) => (
              <Link key={c.slug} to={`/work/${c.slug}`} className="work-card">
                <div className="work-card-media" style={{ aspectRatio: '4/5' }}>
                  {c.mediaKind === 'mail' ? <MailPlaceholder piece={{id:c.slug, client:c.client, race:c.race}} idx={i}/> :
                    <img loading="lazy" src={`https://vumbnail.com/${c.videos[0].id}.jpg`} alt={c.client} style={{width:'100%',height:'100%',objectFit:'cover'}} onError={(e)=>e.target.style.display='none'}/>
                  }
                </div>
                <div className="work-card-meta">
                  <div>
                    <div className="work-card-title" style={{ marginTop: 8 }}>{c.client}</div>
                    <div style={{ fontSize: 12, color: 'var(--ink-60)', marginTop: 2 }}>{c.race}</div>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

function AboutPage() {
  return (
    <>
      <Nav darkInitial />
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '180px var(--gutter) 100px' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-light">§ About</div>
          <h1 className="display-xl" style={{ marginTop: 32, maxWidth: 1400 }}>Experience<br/><span style={{ fontStyle: 'italic', fontWeight: 300 }}>counts.</span></h1>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
          <div className="eyebrow">Who we are</div>
          <div>
            <p className="display-sm" style={{ fontWeight: 300, maxWidth: 880 }}>
              TSD team members have led the strategy at the highest levels on presidential elections, mayoral elections in the country's largest cities, statewide, and House and Senate races. Combined, we have <span style={{ fontStyle: 'italic' }}>more than 60 years</span> of on-the-ground experience.
            </p>
            <p className="body-lg" style={{ marginTop: 32, color: 'var(--ink-60)', maxWidth: 720 }}>
              An award-winning Democratic political consultancy known for its expertise, honesty, and creativity — across strategy, direct mail, and digital programs.
            </p>
          </div>
        </div>
      </section>

      {/* What we believe */}
      <section className="section section-paper-warm">
        <div className="shell">
          <div className="eyebrow">{`/* Net-new copy — partners to review */`}</div>
          <h2 className="display-md" style={{ marginTop: 24, maxWidth: 1100 }}>What we believe.</h2>
          <div style={{ marginTop: 80, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--ink-12)' }}>
            {[
              { k: 'Strategy is a science', v: 'Every successful campaign rests on data-driven targeting, modeling, and a clear theory of how to win. We bring that rigor in from day one — and we test our assumptions until they hold up.' },
              { k: 'Creative is the multiplier', v: 'Targeting tells you who to reach. Creative is what makes them remember. Our in-house design and production teams turn the strategy into work people actually pay attention to.' },
              { k: 'The plan is the discipline', v: 'We don\'t hand you a deck and disappear. We sit in the war room. We adjust on weekly tracking. And we know when to hold the plan and when to break it.' }
            ].map((b, i) => (
              <Reveal key={i} delay={i*80} style={{ padding: '40px 24px 56px', borderRight: i < 2 ? '1px solid var(--ink-12)' : 'none', borderBottom: '1px solid var(--ink-12)' }}>
                <div className="eyebrow">0{i+1}</div>
                <div className="display-sm" style={{ marginTop: 24, fontWeight: 400 }}>{b.k}</div>
                <p className="body" style={{ color: 'var(--ink-60)', marginTop: 24 }}>{b.v}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* Footprint */}
      <section className="section">
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
            <div className="eyebrow">Footprint</div>
            <div>
              <h2 className="display-md" style={{ marginBottom: 48 }}>Four offices. One team.</h2>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, borderTop: '1px solid var(--ink-12)', paddingTop: 40 }}>
                {[
                  { c: 'New York', s: 'NY' },
                  { c: 'Colorado', s: 'CO' },
                  { c: 'California', s: 'CA' },
                  { c: 'Nevada', s: 'NV' }
                ].map((o, i) => (
                  <div key={i}>
                    <div className="display-sm">{o.s}</div>
                    <div className="eyebrow" style={{ marginTop: 16 }}>{o.c}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Awards */}
      <section className="section section-ink">
        <div className="shell">
          <div className="eyebrow eyebrow-light">Recognition</div>
          <h2 className="display-md" style={{ marginTop: 24, marginBottom: 64 }}>Twenty-plus national awards. And counting.</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 0 }}>
            {[
              { y: '2026', a: 'Reed Award', cat: 'Best Spanish-Language Ad Campaign', sub: 'Latina Initiative — TSD as strategic & creative partner' },
              { y: '20+', a: 'National awards', cat: 'Direct mail — firm-level', sub: 'Including multiple Pollie wins for Cori Kessler' },
              { y: '12+', a: 'Personal awards', cat: 'Direct mail and digital', sub: 'Peter Brown, individual recognition' },
              { y: '—', a: 'Top consultant rankings', cat: 'New York', sub: 'Peter Brown, year over year' }
            ].map((a, i) => (
              <div key={i} style={{ padding: '40px 24px', borderTop: '1px solid var(--paper-on-ink-12)', display: 'grid', gridTemplateColumns: '120px 1fr 1fr', gap: 24, alignItems: 'baseline', borderRight: i % 2 === 0 ? '1px solid var(--paper-on-ink-12)' : 'none' }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontSize: 32, color: 'var(--accent-glow)' }}>{a.y}</div>
                <div>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 18 }}>{a.a}</div>
                  <div className="eyebrow eyebrow-light" style={{ marginTop: 6 }}>{a.cat}</div>
                </div>
                <div style={{ fontSize: 13, opacity: 0.6 }}>{a.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

function TeamPage() {
  const D = window.TSD_DATA;
  return (
    <>
      <Nav />
      <PageHeader
        eyebrow="§ Team"
        title={<>Six decades of <span style={{fontStyle:'italic'}}>collective</span> experience.</>}
        intro="From presidential campaigns to municipal elections across the nation. Deep institutional knowledge with a nimble, proactive approach — delivering the precise strategy you need to secure a victory."
      />
      <section className="section">
        <div className="shell">
          <SectionIntro
            num="01"
            kicker="The team"
            title={<>Partners and senior staff.</>}
            sub="Click any card to read the full bio. The team works across our offices in New York, Colorado, California, and Nevada."
          />
          {/* Equal-sized grid — three columns, every card the same proportions */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 40,
            rowGap: 64
          }}>
            {D.team.map((t, i) => (
              <Reveal key={t.slug} delay={i*50}>
                <Link to={`/team/${t.slug}`} className="work-card">
                  <div className="work-card-media" style={{ aspectRatio: '4/5', background: 'var(--paper-deep)' }}>
                    <img src={t.img} alt={t.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  </div>
                  <div style={{ paddingTop: 20 }}>
                    <div className="work-card-num">0{i+1} / 0{D.team.length}</div>
                    <div className="work-card-title" style={{ marginTop: 10, fontSize: 26 }}>{t.name}</div>
                    <div style={{ fontSize: 15, color: 'var(--ink-60)', marginTop: 6 }}>{t.title}</div>
                    <div className="link-arrow" style={{ marginTop: 20, fontSize: 14 }}>Read bio</div>
                  </div>
                </Link>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

function TeamBioPage({ slug }) {
  const D = window.TSD_DATA;
  const t = D.team.find(x => x.slug === slug);
  if (!t) return <NotFound />;
  const idx = D.team.findIndex(x => x.slug === slug);
  const next = D.team[(idx + 1) % D.team.length];

  return (
    <>
      <Nav />
      <section style={{ paddingTop: 140 }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64, padding: '80px 0' }}>
            <div>
              <div style={{ aspectRatio: '4/5', background: 'var(--paper-deep)', overflow: 'hidden' }}>
                <img src={t.img} alt={t.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
              <div>
                <Link to="/team" className="eyebrow link-underline">← Team</Link>
                <h1 className="display-lg" style={{ marginTop: 32 }}>{t.name}</h1>
                <div className="eyebrow" style={{ marginTop: 16 }}>{t.title}</div>

                {t.placeholder && (
                  <div style={{ marginTop: 32, padding: '12px 16px', background: 'var(--paper-warm)', fontSize: 12, fontFamily: 'var(--font-mono)', display: 'inline-block', letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--ink-60)' }}>
                    Placeholder bio · awaiting copy
                  </div>
                )}
                <div style={{ marginTop: 48, maxWidth: 640 }}>
                  {t.bio.map((p, i) => (
                    <p key={i} className={i === 0 ? 'body-lg' : 'body'} style={{ marginBottom: 24, color: i === 0 ? 'var(--ink)' : 'var(--ink-60)' }}>{p}</p>
                  ))}
                </div>
              </div>
              <div style={{ marginTop: 64 }}>
                <a href={`mailto:${t.slug.replace(/-/g,'.')}@thestrategydivision.com`} className="btn btn-primary btn-arrow">Email {t.name.split(' ')[0]}</a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--ink)', color: 'var(--paper)' }}>
        <Link to={`/team/${next.slug}`} style={{ display: 'block', padding: '80px var(--gutter)' }}>
          <div className="shell">
            <div className="eyebrow eyebrow-light">Next →</div>
            <h2 className="display-md" style={{ marginTop: 16 }}>{next.name}</h2>
            <div style={{ opacity: 0.6, marginTop: 8 }}>{next.title}</div>
          </div>
        </Link>
      </section>

      <Footer />
    </>
  );
}

function ContactPage() {
  const [form, setForm] = useState({ name: '', phone: '', email: '', message: '' });
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  const change = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  return (
    <>
      <Nav darkInitial />
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', minHeight: '60vh', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end', padding: '180px var(--gutter) 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, opacity: 0.3 }}>
          <svg width="100%" height="100%" viewBox="0 0 1600 600" preserveAspectRatio="xMidYMid slice">
            {Array.from({length: 8}).map((_, i) => (
              <circle key={i} cx="800" cy="500" r={120 + i*80} fill="none" stroke="rgba(85,117,255,0.15)" strokeWidth="1"/>
            ))}
          </svg>
        </div>
        <div className="shell" style={{ position: 'relative' }}>
          <div className="eyebrow eyebrow-light">§ Get in touch</div>
          <h1 className="display-xl" style={{ marginTop: 32 }}>We <span style={{ fontStyle: 'italic' }}>look forward</span><br/>to working with you.</h1>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80 }}>
          <div>
            <div className="eyebrow">Offices</div>
            <p className="display-sm" style={{ marginTop: 24, fontWeight: 300 }}>
              We work out of offices in <span style={{ fontStyle: 'italic' }}>New York, Colorado, California, and Nevada</span> — which means one of us will be in touch quickly, regardless of time zone.
            </p>
            <div style={{ marginTop: 64, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32 }}>
              {[['NY','New York'],['CO','Colorado'],['CA','California'],['NV','Nevada']].map((o,i) => (
                <div key={i} style={{ borderTop: '1px solid var(--ink-12)', paddingTop: 16 }}>
                  <div style={{ fontFamily: 'var(--font-serif)', fontSize: 32 }}>{o[0]}</div>
                  <div className="eyebrow" style={{ marginTop: 8 }}>{o[1]}</div>
                </div>
              ))}
            </div>
            <div style={{ marginTop: 64 }}>
              <div className="eyebrow">Direct</div>
              <a href="mailto:hello@thestrategydivision.com" style={{ display: 'block', marginTop: 16, fontFamily: 'var(--font-serif)', fontSize: 22 }} className="link-underline">hello@thestrategydivision.com</a>
            </div>
          </div>

          <div>
            {sent ? (
              <div style={{ padding: '64px 0' }}>
                <div className="eyebrow" style={{ color: 'var(--accent)' }}>✓ Message sent</div>
                <p className="display-sm" style={{ marginTop: 32, fontWeight: 300, maxWidth: 600 }}>
                  Thank you for contacting us at TSD — where strategy, tactics, and art come together. Someone on the team will read your email shortly and get right back to you.
                </p>
                <button onClick={() => { setSent(false); setForm({name:'',phone:'',email:'',message:''}); }} className="btn btn-ghost" style={{ marginTop: 48 }}>Send another</button>
              </div>
            ) : (
              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                <div className="eyebrow" style={{ marginBottom: 32 }}>Contact us</div>
                {[
                  { k: 'name', label: 'Name', type: 'text' },
                  { k: 'phone', label: 'Phone', type: 'tel' },
                  { k: 'email', label: 'Email', type: 'email' }
                ].map(f => (
                  <div key={f.k} style={{ borderBottom: '1px solid var(--ink-12)', padding: '20px 0', display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24, alignItems: 'center' }}>
                    <label className="eyebrow">{f.label}</label>
                    <input required type={f.type} value={form[f.k]} onChange={change(f.k)}
                      style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--ink)', padding: 4 }}
                      placeholder={`Your ${f.label.toLowerCase()}`}
                    />
                  </div>
                ))}
                <div style={{ borderBottom: '1px solid var(--ink-12)', padding: '20px 0', display: 'grid', gridTemplateColumns: '120px 1fr', gap: 24 }}>
                  <label className="eyebrow" style={{ paddingTop: 8 }}>Message</label>
                  <textarea required value={form.message} onChange={change('message')} rows={4}
                    style={{ border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--ink)', padding: 4, resize: 'vertical' }}
                    placeholder="Tell us about your race, organization, or project."
                  />
                </div>
                <button type="submit" className="btn btn-primary btn-arrow" style={{ marginTop: 48, alignSelf: 'flex-start' }}>Send message</button>
              </form>
            )}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

function LaunchboxPage() {
  return (
    <>
      <Nav darkInitial />
      <section style={{ background: 'var(--ink)', color: 'var(--paper)', padding: '180px var(--gutter) 80px' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-light">§ Partnership · with Upstream Consulting</div>
          <h1 className="display-xl" style={{ marginTop: 32 }}>Launchbox.</h1>
          <p className="display-md" style={{ marginTop: 48, maxWidth: 1100, fontWeight: 300, fontStyle: 'italic' }}>
            A high-impact accelerator that <span style={{ fontStyle: 'normal' }}>fast-tracks political careers.</span>
          </p>
        </div>
      </section>

      <section className="section">
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 80 }}>
          <div>
            <div className="eyebrow">{`/* Net-new copy — partners to fill in */`}</div>
            <p className="body-lg" style={{ marginTop: 24, color: 'var(--ink-60)' }}>
              Built for the next generation of operators, candidates, and organizers. Hands-on instruction, shadow placements, and a six-month curriculum designed alongside the partners at Upstream — both firms' senior teams in the room.
            </p>
            <Link to="/contact" className="btn btn-primary btn-arrow" style={{ marginTop: 48 }}>Apply for the next cohort</Link>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32, borderTop: '1px solid var(--ink-12)', paddingTop: 40 }}>
            {[
              { k: '6 mo.', v: 'Cohort length' },
              { k: '12', v: 'Fellows per cohort' },
              { k: '2x', v: 'Senior teams in the room' },
              { k: '∞', v: 'Network access' }
            ].map((s,i) => (
              <div key={i}>
                <div className="display-md">{s.k}</div>
                <div className="eyebrow" style={{ marginTop: 12 }}>{s.v}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

function NotFound() {
  return (
    <>
      <Nav />
      <section style={{ minHeight: '70vh', display: 'flex', alignItems: 'center', justifyContent: 'center', textAlign: 'center', padding: '160px var(--gutter)' }}>
        <div>
          <div className="eyebrow">404</div>
          <h1 className="display-lg" style={{ marginTop: 24 }}>Off the campaign trail.</h1>
          <Link to="/" className="btn btn-primary btn-arrow" style={{ marginTop: 48 }}>Back to home</Link>
        </div>
      </section>
      <Footer />
    </>
  );
}

function LegalPage({ kind }) {
  const isPrivacy = kind === 'privacy';
  return (
    <>
      <Nav />
      <section style={{ paddingTop: 160 }}>
        <div className="shell" style={{ maxWidth: 800, padding: '80px 0' }}>
          <div className="eyebrow">{`/* Boilerplate — awaiting legal review */`}</div>
          <h1 className="display-lg" style={{ marginTop: 24, marginBottom: 48 }}>{isPrivacy ? 'Privacy Policy' : 'Terms of Service'}</h1>
          <div style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-60)' }}>
            <p style={{ marginBottom: 24 }}><em>Effective date: TBD. The Strategy Division (TSD) respects your privacy. This page describes how we collect, use, and safeguard information when you visit our site or engage our services.</em></p>
            {[1,2,3,4,5].map(i => (
              <div key={i} style={{ marginTop: 32 }}>
                <div className="eyebrow" style={{ color: 'var(--ink)' }}>§ 0{i}</div>
                <h3 style={{ fontFamily: 'var(--font-serif)', fontSize: 22, color: 'var(--ink)', marginTop: 12, marginBottom: 16 }}>
                  {isPrivacy ? ['Information We Collect', 'How We Use Information', 'Sharing & Disclosure', 'Your Choices', 'Contact'][i-1] : ['Acceptance of Terms', 'Use of Services', 'Intellectual Property', 'Limitation of Liability', 'Governing Law'][i-1]}
                </h3>
                <p>Placeholder copy. Final language to be drafted by counsel and inserted here. We collect only what we need to deliver our services and never sell client information.</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <Footer />
    </>
  );
}

Object.assign(window, { CapabilitiesIndex, CapabilitySubPage, AboutPage, TeamPage, TeamBioPage, ContactPage, LaunchboxPage, NotFound, LegalPage });