/* global React, ReactDOM, Logo, ArrowRight, FooterCTA, FloatCTA, PullQuote */

/* =====================================================================
   CASE STUDIES INDEX — app-case-studies.jsx
   ===================================================================== */

/* ---------------------- NavMulti ---------------------- */

const NavMulti = () => {
  const [open, setOpen] = React.useState(false);
  return (
  <nav className="nav">
    <div className="wrap nav-inner">
      <a href="/" className="brand">
        <Logo size={64} />
        <span className="brand-name">
          octocrew<span className="tld">.ai</span>
        </span>
      </a>
      <div className="nav-links">
        <a href="agents.html">{window.t("AI Crew")}</a>
        <a href="case-studies.html">{window.t("Case Studies")}</a>
        <a href="contact.html">{window.t("Contact")}</a>
      </div>
      <LangToggle />
      <a href="contact.html" className="nav-cta" data-octocrew-cal="booking">
        {window.t("Book a discovery call")} <ArrowRight />
      </a>
      <button
        className="nav-burger"
        aria-label="Menu"
        aria-expanded={open}
        onClick={() => setOpen(!open)}
      >
        <span /><span /><span />
      </button>
    </div>
    <div className={"nav-mobile" + (open ? " open" : "")}>
      <div className="wrap">
        <a href="agents.html">{window.t("AI Crew")}</a>
        <a href="case-studies.html">{window.t("Case Studies")}</a>
        <a href="contact.html">{window.t("Contact")}</a>
        <a href="contact.html" className="nav-mobile-cta" data-octocrew-cal="booking">{window.t("Book a discovery call")}</a>
        <LangToggle />
      </div>
    </div>
  </nav>
  );
};

/* ---------------------- Hero ---------------------- */

const CaseStudiesHero = () => (
  <section className="hero" id="top" style={{ position: "relative", overflow: "hidden" }}>
    <div className="aura aura-violet" style={{ width: "54vmin", height: "54vmin", top: "-22%", left: "-6%" }} />
    <div className="aura aura-lime" style={{ width: "40vmin", height: "40vmin", top: "-10%", right: "2%" }} />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div style={{ maxWidth: "880px" }}>
        <h1 className="h-display" dangerouslySetInnerHTML={{ __html: window.t('Actual crews. Actual <span class="accent">results</span>') }} />
        <p className="sub">
          {window.t("Every case study is a crew we built, deployed, and maintain. These are the workflows running today.")}
        </p>
      </div>
    </div>
  </section>
);

/* ---------------------- §1 Case Studies Grid ---------------------- */

const CASE_STUDIES = [
  {
    tag: "Seed-stage fintech",
    title: "Work a seed-stage team could never staff",
    stats: [
      { k: "Shipped", n: "195", l: "posts / month, 7 platforms" },
      { k: "Result", n: "7×", l: "organic traffic" },
      { k: "Efficiency", n: "−30%", l: "cost per lead" },
    ],
    body: "A full marketing function across seven platforms: content, community, paid, lifecycle, and reporting, all in the first three months.",
    link: "Read case study",
    href: "case-study-seed-saas.html",
  },
  {
    tag: "Podavach · ecommerce",
    title: "A whole store's marketing, shipped daily",
    stats: [
      { k: "Shipped", n: "~250", l: "tickets/mo, drafted" },
      { k: "Result", n: "2×", l: "ad tracking accuracy" },
      { k: "Efficiency", n: "$10-15k", l: "monthly hire cost avoided" },
    ],
    body: "Support, store ops, paid, email, social, and content, run by a specialist crew with one operator approving the work in Slack.",
    link: "Read case study",
    href: "case-study-ecommerce-brand.html",
  },
  {
    tag: "Eversolid · ecommerce",
    title: "The operating capacity of a growth team",
    stats: [
      { k: "Shipped", n: "220", l: "assets, 90-day target" },
      { k: "Result", n: "+60%", l: "organic sessions, target" },
      { k: "Control", n: "0", l: "unapproved risky actions" },
    ],
    body: "A four-agent crew runs the store, paid media, content, and operations from one chat, with every risky action owner-approved. Targets set; measured readout in September.",
    link: "Read case study",
    href: "case-study-eversolid.html",
  },
  {
    tag: "Marketing agency · 18 people",
    title: "4 new retainers without adding headcount",
    stats: [
      { k: "Shipped", n: "2×", l: "delivery capacity" },
      { k: "Result", n: "4", l: "new retainers" },
      { k: "Efficiency", n: "~30 hrs", l: "reclaimed / week" },
    ],
    body: "Content, social, ads, email, and reporting produced across every client account, so the agency takes on more clients without hiring.",
    link: "Read case study",
    href: "case-study-marketing-agency.html",
  },
];

const CaseStudiesGrid = () => (
  <section className="section" id="cases" style={{ position: "relative", overflow: "hidden" }}>
    <div className="aura aura-violet" style={{ width: "58vmin", height: "58vmin", top: "-10%", left: "-10%" }} />
    <div className="aura aura-lime" style={{ width: "50vmin", height: "50vmin", bottom: "-16%", right: "-8%" }} />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div className="verticals cases">
        {CASE_STUDIES.map((cs) => (
          <a className="vert vert-case" href={cs.href} key={cs.title}>
            <div className="vc-main">
              <div className="vtag">{window.t(cs.tag)}</div>
              <h3>{window.t(cs.title)}</h3>
              <p>{window.t(cs.body)}</p>
              <span className="vlink">
                {window.t(cs.link)} <ArrowRight />
              </span>
            </div>
            <div className="vstats">
              {cs.stats.map((s) => (
                <div className="vstat" key={s.l}>
                  {s.k && <div className="kind">{window.t(s.k)}</div>}
                  <div className="vn">{window.t(s.n)}</div>
                  <div className="vl">{window.t(s.l)}</div>
                </div>
              ))}
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

/* ---------------------- App ---------------------- */

function App() {
  return (
    <React.Fragment>
      <NavMulti />
      <main id="main-content">
        <CaseStudiesHero />
        <CaseStudiesGrid />
        <PullQuote />
        <FooterCTA />
      </main>
      <FloatCTA />
    </React.Fragment>
  );
}

Object.assign(window, { NavMulti, CaseStudiesHero, CaseStudiesGrid });

ReactDOM.createRoot(document.getElementById("root")).render(<App />);