/* ============================================================
   components-offer.jsx — Engagements, About teaser (home), Book CTA
   ============================================================ */
const TIERS = [
  {
    name: "Single Creative", price: "AED 14,999", usd: "≈ $4,100", per: "",
    forwho: "founders who want one sharp artifact before a bigger engagement.",
    list: ["One shipped artifact in 7–10 days", "Landing page, deck rebuild, positioning audit, or campaign creative", "One decision-maker named at kickoff"],
    payoff: "Decks delay. Artifacts close.", feature: false, cta: "Start one",
  },
  {
    name: "Anchor Retainer", price: "AED 35,000", usd: "≈ $9,500 / month", per: "/ month",
    forwho: "one founder-led brand at a time. Three-month minimum, six recommended.",
    list: ["Strategy, creative direction, AI-assisted production, and editorial rhythm", "Content cadence, weekly artifact, monthly system upgrade", "Clear operating loop with one accountable owner"],
    payoff: "For founders who need momentum without adding another slow layer.", feature: true, cta: "Take the seat",
  },
  {
    name: "Build-and-License", price: "AED 80,000", usd: "≈ $21,800 one-time", per: "one-time",
    forwho: "brands that want to own the system, not rent it.",
    list: ["Full brand system + token library + AI-ready voice rules", "90-day production calendar + handoff", "You leave with a system your team can actually run"],
    payoff: "For teams that want ownership, not dependency.", feature: false, cta: "Own the engine",
  },
];

const TOPMATE_SERVICES = ["30-min Founder Call", "60-min Strategy Sprint", "Async Positioning Audit", "Deck Critique · 24h", "AI Stack Walkthrough", "Brand Voice Diagnostic", "Office Hours · PWYW"];

function Engagements({ onBook }) {
  return (
    <section className="ship" id="ship">
      <div className="wrap">
        <div className="eyebrow">03 · What I actually ship</div>
        <h2 className="ship-h2">Three ways in. One operator behind all of them.</h2>
        <div className="ship-grid">
          {TIERS.map((t, i) => (
            <div className={"tier" + (t.feature ? " feature" : "")} key={i}>
              <div className="tname">{t.name}</div>
              <div className="tprice">{t.price}{t.per && <span> {t.per}</span>}</div>
              <div className="tusd">{t.usd}</div>
              <p className="tline"><strong>For</strong> {t.forwho}</p>
              <ul className="tlist">{t.list.map((l, j) => <li key={j}>{l}</li>)}</ul>
              <p className="tline"><em>{t.payoff}</em></p>
              <div className="tcta">
                <button className={"btn " + (t.feature ? "btn-oxblood" : "btn-ghost-dark")} onClick={onBook}>{t.cta} <Arrow/></button>
              </div>
            </div>
          ))}
        </div>
        <div className="topmate">
          <div>
            <h4>No proposal needed.</h4>
            <p className="tline" style={{margin:0, maxWidth:"52ch"}}>Book a Topmate slot in under ten minutes. First-time founders: the 30-minute call is free.</p>
            <div className="chips">{TOPMATE_SERVICES.map((s, i) => <span className="chip" key={i} onClick={onBook}>{s}</span>)}</div>
          </div>
          <button className="btn btn-saffron" onClick={onBook}>Open Topmate <Arrow/></button>
        </div>
      </div>
    </section>
  );
}

/* Home About teaser — short, links to the full About page */
function AboutTeaser() {
  return (
    <section className="about" id="about">
      <div className="wrap">
        <div className="eyebrow">04 · The operator</div>
        <div className="about-grid">
          <div>
            <img className="about-portrait" src="assets/portrait-operator-main.png" alt="Abhileen Singh Saluja, operator behind That Hyperactive Sardar, Dubai" />
            <div className="about-portrait-cap">Abhileen Singh Saluja · Dubai</div>
          </div>
          <div>
            <h2>Engineering dropout who learned attention from stand-up, narrative from brand work — and now ships a full marketing function, <em>solo, with AI as the multiplier.</em></h2>
            <p>Five years from now, AI will be expected. Taste won't. The rarer move — the one only this operator can do — is reading what's moving on the internet and converting it into outcomes a founder can defend on a board deck.</p>
            <div className="mishran">
              <span>Culture</span><span className="x">×</span><span>Comedy</span><span className="x">×</span><span>Hip-hop</span><span className="x">×</span><span>Tech</span><span className="x">×</span><span>AI</span>
            </div>
            <div style={{marginTop:"28px"}}>
              <a className="btn btn-ghost-light" href="about.html">Read the full arc <Arrow/></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Book CTA block (home + contact reuse) */
function BookCTA({ onBook, onWhats, onMail }) {
  return (
    <section className="book" id="book">
      <div className="wrap">
        <div className="eyebrow" style={{justifyContent:"center"}}>Book the call</div>
        <h2>One operator. Clear function. Named decisions.</h2>
        <p className="lede">Bring the real problem. I'll tell you whether it needs a single artifact, a retainer, or just a conversation.</p>
        <div className="book-cta">
          <button className="btn btn-oxblood" onClick={onBook}>Book on Topmate <Arrow/></button>
          <a className="btn btn-ghost-dark" href="contact.html">Send a brief</a>
          <button className="btn btn-ghost-dark" onClick={onWhats}>WhatsApp</button>
        </div>
        <div className="reject">
          <h4>What I won't take</h4>
          <p>No fractional-CMO retainer-only engagements. No hourly billing. No engagements without a named decision-maker. No logo-only commissions under AED 14,999. No strategy decks without a shippable artifact attached. No crypto / casino / unregulated finance. No "we partner with you" energy. <em>The rejection list compounds. New rejections earn a line.</em></p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Engagements, AboutTeaser, BookCTA, TIERS, TOPMATE_SERVICES });