// brand-partnerships-page.jsx — detailed partnerships page (v2)

function PartnershipsHero() {
  return (
    <section className="bp-hero">
      <img className="bp-hero-squiggle" src="assets/path-illustration-2.png" alt="" aria-hidden="true" />
      <div className="bp-hero-inner">
        <a className="back-link" href="index.html">
          <span style={{ transform: 'rotate(180deg)', display: 'inline-flex' }}><IconArrow /></span>
          Back to home
        </a>
        <span className="eyebrow">Partnerships</span>
        <h1 className="h-display">Brand <em className="blue">partnerships.</em></h1>
        <p className="bp-sub">
          I partner with brands to deliver real value to <strong>245K+ ambitious professionals</strong> across Instagram, LinkedIn, TikTok, YouTube, and my newsletter.
        </p>
      </div>
    </section>
  );
}

function PartnershipsPillars() {
  const pillars = [
    { title: 'Trust-first partnerships', body: "I only work with products I'd use without payment. That's why my audience treats my recommendations as recommendations, not ads." },
    { title: 'A high-intent audience', body: "Mostly 25- to 34-year-olds in tech, finance, and consulting. They make good money at their day jobs and they're spending on tools and ideas that compound: software, education, AI, productivity, finance." },
    { title: 'Content built to convert', body: "Every piece is built around a real use case in my workflow — not a talking-head ad. The goal is always to show the product earning its place, so the recommendation lands." },
    { title: 'Tailored to your goals', body: "I work with your team to design the channel mix (Reels, Stories, long-form posts, product embeds) and structure (one-off campaign or ongoing partnership) that fits your objectives." },
  ];
  return (
    <section className="section bp-pillars-section">
      <div className="section-inner">
        <div className="bp-pillars">
          {pillars.map((p, i) => (
            <div key={i} className="bp-pillar">
              <div className="bp-pillar-num">0{i + 1}</div>
              <h3 className="h-3" style={{ marginBottom: 14, fontSize: 28 }}>{p.title}</h3>
              <p style={{ color: 'rgba(55,7,29,0.78)', fontSize: 16, lineHeight: 1.6, margin: 0 }}>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function SelectPartnerships() {
  const partners = [
    { name: 'Adobe',       tag: 'Creative tools' },
    { name: 'Amazon',      tag: 'E-commerce' },
    { name: 'Anthropic',   tag: 'AI · Claude' },
    { name: 'Asana',       tag: 'Work management' },
    { name: 'Fiverr',      tag: 'Marketplace' },
    { name: 'Grammarly',   tag: 'Productivity' },
    { name: 'HubSpot',     tag: 'B2B SaaS' },
    { name: 'LinkedIn',    tag: 'Platform partner' },
    { name: 'Microsoft',   tag: 'Microsoft 365' },
    { name: 'Notion',      tag: 'Productivity' },
    { name: 'OpenAI',      tag: 'AI' },
    { name: 'Perplexity',  tag: 'AI search' },
  ];
  return (
    <section className="section bp-partners-section">
      <div className="section-inner">
        <div className="bp-section-head">
          <span className="eyebrow">Past partners</span>
          <h2 className="h-1">Brands I've <em>worked with.</em></h2>
        </div>
        <div className="bp-partner-grid">
          {partners.map((p, i) => (
            <div key={i} className="bp-partner">
              <div className="bp-partner-head">
                <h3 className="h-3" style={{ fontSize: 28, margin: 0 }}>{p.name}</h3>
                <span className="bp-partner-tag">{p.tag}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnershipsCTA() {
  return (
    <section className="section dark bp-cta-section">
      <img className="path-bg bp-cta-path" src="assets/path-illustration-4.png" alt="" aria-hidden="true" />
      <div className="section-inner" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <span className="eyebrow">Let's build</span>
        <h2 className="h-display" style={{ color: 'var(--hz-cream)' }}>
          Work <em style={{ color: 'var(--hz-yellow)' }}>with me.</em>
        </h2>
        <p style={{ color: 'rgba(255,251,243,0.85)', fontSize: 19, lineHeight: 1.55, maxWidth: 560, margin: '24px auto 0' }}>
          Drop me a line with what you're building, who you're trying to reach, and rough timing.
        </p>
        <a className="btn primary" href="mailto:hannah@careerhannah.com?subject=Partnership%20inquiry" style={{ marginTop: 32 }}>
          Partnership inquiry <span className="arrow"><IconArrow /></span>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { PartnershipsHero, PartnershipsPillars, SelectPartnerships, PartnershipsCTA });