/* global React, ArrowRight, Logo */

/* ---------------------- §5 Alternatives ---------------------- */

const Alternatives = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">05 — The alternatives</div>
        <div>
          <h2 className="sec-h">Why Octocrew, and not the alternatives</h2>
          <p className="sec-lead">The four paths most buyers consider — and where each one breaks.</p>
        </div>
      </div>

      <div className="alts">
        {[
          ["A.", "Build it yourself with ChatGPT + n8n", "Until APIs change, models drift, and your team is now in the AI infrastructure business. Then it breaks on a Thursday at 9 PM."],
          ["B.", 'Hire another "AI agents" platform', "And learn yet another dashboard your team won't actually open. The product becomes the tool — not the outcome."],
          ["C.", "Wait for Slack / OpenAI / Google to ship it", "Their AI works in their walled garden. Octocrew works across your whole stack — wherever your team already is."],
          ["D.", "Hire a junior employee", "At 3–5× the cost, with onboarding, ramp, turnover, and a management line item on your calendar."],
        ].map(([n, t, b]) => (
          <div className="alt" key={n}>
            <div className="alt-num">{n}</div>
            <div className="alt-could">{t}</div>
            <div className="alt-but">{b}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------------- §6 Honest scope ---------------------- */

const Scope = () => (
  <section className="section sunken">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">06 — Honest scope</div>
        <div>
          <h2 className="sec-h">What Octocrew is not</h2>
          <p className="sec-lead">
            Operator-built. We'll tell you straight where this isn't the right fit — before you book the call.
          </p>
        </div>
      </div>

      <div className="scope-grid">
        {[
          ["Not AI replacing your team.", "The crew handles the repetitive 80% so humans handle the work that needs judgment."],
          ["Not a black box.", "Every customer-facing action is human-approved until the workflow has earned trust."],
          ["Not for pre-PMF startups.", "If you don't have workflows yet, there's nothing to automate."],
          ["Not a chatbot or copilot.", "The crew does work end-to-end inside your tools. Not a chat window to remember to open."],
          ["Not a one-day setup.", "Three weeks to live. Anyone promising same-day “AI for your business” is selling you a demo."],
          ["Not a platform.", "No dashboard to learn. The product is the outcome — work shipped in your tools, your voice, your timeline."],
        ].map(([h, p]) => (
          <div className="scope-item" key={h}>
            <span className="x">✕</span>
            <div>
              <h5>{h}</h5>
              <p>{p}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------------- §7 Verticals ---------------------- */

const Verticals = () => (
  <section className="section" id="who">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">07 — Pick your path</div>
        <div>
          <h2 className="sec-h">Who it's for</h2>
          <p className="sec-lead">The crew adapts. The thesis doesn't.</p>
        </div>
      </div>

      <div className="verticals">
        <a className="vert" href="#agency">
          <div className="vtag">For marketing agencies</div>
          <h3>Scale delivery, not headcount.</h3>
          <p>Reporting, briefs, QA, request triage — handled inside the tools your team and clients already use.</p>
          <span className="vlink">
            See the agency page <ArrowRight />
          </span>
        </a>
        <a className="vert" href="#ecom">
          <div className="vtag">For e-commerce operators</div>
          <h3>Stop ops from bleeding.</h3>
          <p>A managed crew for support, retention, and back-office across Shopify, Klaviyo, and the rest of your stack.</p>
          <span className="vlink">
            See the e-commerce page <ArrowRight />
          </span>
        </a>
        <a className="vert" href="#igaming">
          <div className="vtag">For iGaming operators</div>
          <h3>Recover the LTV your queue is leaking.</h3>
          <p>Compliance-grade ops crew. Faster KYC, faster payouts, retained VIPs. Audited to the dollar.</p>
          <span className="vlink">
            See the iGaming page <ArrowRight />
          </span>
        </a>
      </div>
    </div>
  </section>
);

/* ---------------------- Footer CTA ---------------------- */

const FooterCTA = () => (
  <section className="foot-cta" id="book">
    <img className="foot-bg-mark" src="logo-clean-no-circle.png" alt="" aria-hidden="true" />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div className="eyebrow">
        <span className="pulse-dot" />
        {window.t("Discovery call · 30 minutes")}
      </div>
      <h2>{window.t("Find out what a crew would ship for you in a month")}</h2>
      <p className="sub">
        {window.t("We'll find where you can grow, show the math for your specific stack, and where an agentic crew can lift your output and sharpen your ad spend. Walk away with the numbers either way.")}
      </p>
      <div className="hero-ctas">
        <a className="btn btn-primary" href="contact.html" data-octocrew-cal="booking">
          {window.t("Book a discovery call")} <ArrowRight />
        </a>
        <a className="btn btn-ghost" href="mailto:hello@octocrew.ai">
          {window.t("Email us instead")} <ArrowRight />
        </a>
      </div>
      <div className="foot-meta">
        <div className="foot-brand">
          <span className="foot-logo"><Logo size={28} /></span>
          <div>
            <div className="foot-wordmark">octocrew<span className="tld">.ai</span></div>
            <div className="foot-tagline">{window.t("Managed agentic crews · MMXXVI")}</div>
          </div>
        </div>
        <a className="foot-email" href="mailto:hello@octocrew.ai">hello@octocrew.ai</a>
        <nav className="foot-legal">
          <a href="#">{window.t("Privacy")}</a>
          <a href="#">{window.t("Terms")}</a>
          <a href="#">{window.t("Security")}</a>
        </nav>
      </div>
    </div>
  </section>
);

const FloatCTA = () => (
  <a className="float-cta" href="contact.html" data-octocrew-cal="booking">
    <span className="live-dot" />
    {window.t("Book a discovery call")}
  </a>
);

/* ---------------------- FAQ ---------------------- */

const FAQ_ITEMS = [
  {
    q: "Will this replace my team?",
    a: "No. It replaces the click-work: drafting tickets, scraping daily KPIs, deploying small theme tweaks, building campaigns from scratch. Your team approves every customer-facing action.",
  },
  {
    q: "Which platforms do you integrate with today?",
    a: "Native today: Shopify, Klaviyo, Meta Ads, Gorgias, ShipMonk, GA4, Search Console, Triple Whale, Notion, Slack. Available on request with 1–3 weeks of adapter work: Zendesk, Front, Help Scout, Re:amaze, Google Ads, TikTok Ads, Microsoft Ads, ShipBob, ShipHero, Recharge, Postscript, Attentive, Polar Analytics, Northbeam.",
  },
  {
    q: "How is this different from native AI tools (Shopify Sidekick, Klaviyo native AI, Meta Manus)?",
    a: "Native tools optimize one platform. They don't talk to each other. We're the connective tissue: workflows that span ≥3 platforms (e.g. support sentiment drops → ad pauses → apology email triggers).",
  },
  {
    q: "How is this different from agencies and VAs?",
    a: "Agencies have a coordination tax and don't work weekends. VAs do one thing well; we do orchestrated cross-functional work. Our gross margins are software-like; theirs are labor-like.",
  },
  {
    q: "What if it hallucinates?",
    a: "Two layers of protection. (1) Hard rules encoded into every agent: no specific dates, ≤150 words on customer replies, always verify product specs against your store, PII redacted before posting. (2) A human in the loop on every action until the workflow has earned trust, then it runs automatically with anomalies still escalated to you.",
  },
  {
    q: "Can it run autonomously?",
    a: "Some surfaces, yes: preorder auto-toggle, daily report posting, deliverability monitoring. Others, no: refunds, ad budget changes, campaign sends. Trust scales gradually per account.",
  },
  {
    q: "What if I want to leave?",
    a: "30-day out clause. We export your full data and logs. No long-term lock-in.",
  },
  {
    q: "Do I need a Slack workspace?",
    a: "Slack is the primary control surface: every approval card, every ticket draft, every alert lands there. Telegram is supported as a fallback.",
  },
];

const FAQ = () => (
  <section className="section" id="faq">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">06 — FAQ</div>
        <div>
          <h2 className="sec-h">Questions we hear on every call</h2>
        </div>
      </div>
      <div className="faq-list">
        {FAQ_ITEMS.map((it, i) => (
          <details className="faq-item" key={i} {...(i === 0 ? { open: true } : {})}>
            <summary>
              <span className="faq-q">{it.q}</span>
              <span className="faq-icon" aria-hidden="true">+</span>
            </summary>
            <div className="faq-a">{it.a}</div>
          </details>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, { Alternatives, Scope, Verticals, FooterCTA, FloatCTA, FAQ });