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

/* ------------------------------------------------------------------ */
/*  NavMulti — multi-page nav with real links                         */
/* ------------------------------------------------------------------ */

const NAV_LINKS = [
  { label: "AI Crew", href: "agents.html" },
  { label: "Case Studies", href: "case-studies.html" },
  { label: "Contact", href: "contact.html" },
];

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">
        {NAV_LINKS.map((l) => (
          <a key={l.label} href={l.href}>{window.t(l.label)}</a>
        ))}
      </div>
      <LangToggle />
      <a href="contact.html" className="nav-cta" data-octocrew-cal="booking">
        {window.t("Hire your AI crew")} <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("Hire your AI crew")}</a>
        <LangToggle />
      </div>
    </div>
  </nav>
  );
};

/* ------------------------------------------------------------------ */
/*  FloatingOrbs — two drifting violet orbs + a lime orb that          */
/*  smoothly trails the cursor (agentic feel, soft style)             */
/* ------------------------------------------------------------------ */

const FloatingOrbs = ({ cursorRef }) => {
  const limeRef = React.useRef(null);
  const rafRef = React.useRef(null);
  const posRef = React.useRef({ x: 0, y: 0, init: false });

  React.useEffect(() => {
    const el = limeRef.current;
    if (!el) return;
    const container = el.parentNode;
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const restPoint = () => {
      const rect = container.getBoundingClientRect();
      return { x: rect.width * 0.74, y: rect.height * 0.46 };
    };

    const animate = () => {
      const cursor = cursorRef && cursorRef.current;
      const rest = restPoint();

      if (!posRef.current.init) {
        posRef.current.x = rest.x;
        posRef.current.y = rest.y;
        posRef.current.init = true;
      }

      // Follow the cursor when it's over the hero, otherwise drift back to rest.
      const follow = cursor && cursor.active && !reduceMotion;
      const targetX = follow ? cursor.x : rest.x;
      const targetY = follow ? cursor.y : rest.y;
      const lerp = reduceMotion ? 1 : 0.07;

      posRef.current.x += (targetX - posRef.current.x) * lerp;
      posRef.current.y += (targetY - posRef.current.y) * lerp;

      el.style.transform =
        `translate(${posRef.current.x.toFixed(1)}px, ${posRef.current.y.toFixed(1)}px) translate(-50%, -50%)`;

      rafRef.current = requestAnimationFrame(animate);
    };

    rafRef.current = requestAnimationFrame(animate);

    return () => cancelAnimationFrame(rafRef.current);
  }, [cursorRef]);

  return (
    <div className="hero-orbs" aria-hidden="true">
      <div className="orb orb-violet" />
      <div className="orb orb-violet-2" />
      <div className="orb orb-lime-cursor" ref={limeRef} />
    </div>
  );
};

/* ------------------------------------------------------------------ */
/*  HomeHero — lighter hero with cursor-trailing floating orbs        */
/* ------------------------------------------------------------------ */

const HomeHero = () => {
  const cursorRef = React.useRef({ x: -9999, y: -9999, active: false });

  const handleMouseMove = (e) => {
    const rect = e.currentTarget.getBoundingClientRect();
    cursorRef.current = {
      x: e.clientX - rect.left,
      y: e.clientY - rect.top,
      active: true,
    };
  };

  const handleMouseLeave = () => {
    cursorRef.current.active = false;
  };

  return (
    <section
      className="hero"
      id="top"
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
      style={{ position: "relative" }}
    >
      <FloatingOrbs cursorRef={cursorRef} />
      <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
        <div style={{ maxWidth: "880px", margin: "0 auto", textAlign: "center" }}>
          <h1 className="h-display" dangerouslySetInnerHTML={{ __html: window.t('Marketing, <span class="accent">done</span>.<br/>At volume') }} />
          <p className="sub" style={{ marginLeft: "auto", marginRight: "auto" }}>
            {window.t("Nine AI specialists that run your marketing end to end: socials, ads, email, SEO, content, website, analytics. They work inside the tools you already use, ship every day, and check in when a decision needs your judgment.")}
          </p>

          <div className="proof-line" style={{ marginLeft: "auto", marginRight: "auto", textAlign: "center" }}>
            <span className="pquote" dangerouslySetInnerHTML={{ __html: window.t('"We ran this crew in our own ops for <b>90+ days</b> before offering it to a single client."') }} />
          </div>

          <div className="hero-ctas" style={{ justifyContent: "center" }}>
            <a href="contact.html" className="btn btn-primary" data-octocrew-cal="booking">
              {window.t("Hire your AI crew")} <ArrowRight />
            </a>
            <a href="agents.html" className="btn btn-ghost">
              {window.t("Meet the crew")} <ArrowRight />
            </a>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ------------------------------------------------------------------ */
/*  Demo — Slack mock as its own section                              */
/* ------------------------------------------------------------------ */

const SLACK_CHANNELS = [
  {
    id: "ads", name: "ads", who: "Ads Manager", avatar: "AD", color: "#C9851A", unread: 2,
    msgs: [
      { time: "8:21 AM", tags: ["Agent"], html: 'Heads up on <b>Campaign #4 (Cold Audience)</b>: ROAS slipped from 4.1 to 3.4 over the last 48 hours and frequency is up to 3.2, so this reads as creative fatigue, not audience. I\'d pause it and move the <b>$140/day into Campaign #2</b>, which is holding a 4.6 ROAS with room to scale. Want me to make the switch?', actions: ["Approve plan", "Adjust", "Hold"] },
      { time: "8:24 AM", tags: ["Agent"], html: 'CTRs are starting to damp on the LAL audience in <b>Campaign #2</b>, our best performer. I drafted 3 fresh creative variants and put them in <a class="s-link" href="#">Notion</a> for review.' },
    ],
  },
  {
    id: "smm", name: "smm", who: "Social Media", avatar: "SM", color: "#7A2AD0", unread: 3,
    msgs: [
      { time: "7:45 AM", tags: ["Agent"], html: 'Blog promo run complete. Status: scheduled (all platforms). Reddit posts go live shortly after 23:00 UTC and will be the only verifiable live URLs.' },
      { time: "7:50 AM", tags: ["Agent"], html: 'This week\'s calendar is locked: <b>15 posts</b> scheduled across LinkedIn, X, and Instagram, spaced for each platform\'s best windows. Everything\'s written in your voice and queued, nothing needs you unless you want to change something.' },
      { time: "7:52 AM", tags: ["Agent"], html: 'Yesterday\'s launch post is taking off, <b>3.1% engagement</b> against our 1.4% baseline, mostly from LinkedIn reshares. It\'s a strong candidate to put a little spend behind. Boost it for $50?', actions: ["Boost", "Hold"] },
    ],
  },
  {
    id: "seo", name: "seo", who: "SEO Manager", avatar: "SE", color: "#2E6B3E",
    msgs: [
      { time: "8:05 AM", tags: ["Agent"], html: 'Overnight I shipped <b>8 on-page fixes</b> (titles, meta, and a few thin pages expanded). Two of the comparison pages already moved from page 2 onto page 1 this morning. I\'ll keep watching and report movement Friday.' },
      { time: "8:09 AM", tags: ["Agent", "Draft"], html: '3 content briefs are ready for review, all built around high-intent terms we can realistically rank for this quarter ("best CRM for agencies", "agency reporting tools", "white-label SEO"). Each has the outline, target keywords, and internal links mapped. Review in <a class="s-link" href="#">Notion</a>. Approve and I\'ll start drafting.', actions: ["Approve", "Edit"] },
    ],
  },
  {
    id: "email", name: "email", who: "Email Marketer", avatar: "EM", color: "#E54B01",
    msgs: [
      { time: "8:08 AM", tags: ["Agent"], html: 'Quick win from last week: the win-back flow I rebuilt is live and already recovered <b>$1,240</b> from lapsed customers. I\'ll let it run and fold the numbers into Friday\'s report.' },
      { time: "8:10 AM", tags: ["Agent", "Draft"], html: 'Your Father\'s Day campaign is built and ready in Klaviyo: copy, mobile-checked design, and 3 subject-line A/B variants. It\'s segmented to engaged buyers and set for Thursday at 9am ET. Want me to schedule it?', actions: ["Approve & schedule", "Edit"] },
    ],
  },
];

const Demo = () => {
  const [active, setActive] = React.useState("seo");
  const chan = SLACK_CHANNELS.find((c) => c.id === active);
  return (
    <section className="section sunken" id="demo">
      <div className="wrap">
        <div className="block-head">
          <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('What the crew <span class="accent">shipped</span><br/>before 9am') }} />
          <p className="sec-lead">
            {window.t("Click a channel. Everything below was drafted, shipped, or fixed overnight. Your part is the approve button.")}
          </p>
        </div>

        <div style={{ maxWidth: 920, margin: "0 auto" }}>
          <div className="slack-app">
            <aside className="slack-side">
              <div className="slack-ws">Octocrew ⌄</div>
              <div className="slack-chan-group">{window.t("Channels")}</div>
              {SLACK_CHANNELS.map((c) => (
                <button
                  key={c.id}
                  className={"slack-chan" + (c.id === active ? " active" : "") + (c.unread ? " unread" : "")}
                  onClick={() => setActive(c.id)}
                >
                  <span className="hash">#</span>{c.name}
                  {c.unread ? <span className="slack-unread">{c.unread}</span> : null}
                </button>
              ))}
            </aside>
            <div className="slack-main">
              <div className="slack-head">
                <span className="hash">#</span>
                <span className="hash" style={{ marginLeft: -6 }}>{chan.name}</span>
                <span className="dot" />
                <span>{window.t(chan.who)}</span>
                <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>
                  {window.t("today")}
                </span>
              </div>
              <div className="slack-body">
                {chan.msgs.map((m, i) => (
                  <div className="s-msg" key={i}>
                    <div className="s-avatar" style={{ background: chan.color }}>{chan.avatar}</div>
                    <div>
                      <div className="s-meta">
                        <b style={{ color: "var(--brand)" }}>{window.t(chan.who)}</b>
                        {m.tags.map((tg) => (
                          <span key={tg} className={"s-tag" + (tg === "Draft" ? " draft" : tg === "Recommendation" ? " rec" : "")}>{window.t(tg)}</span>
                        ))}
                        <span className="s-time">{m.time}</span>
                      </div>
                      <div className="s-text" dangerouslySetInnerHTML={{ __html: window.t(m.html) }} />
                      {m.quote && <div className="s-quote">{m.quote}</div>}
                      {m.actions && (
                        <div className="s-actions">
                          {m.actions.map((a, j) => (
                            <button key={a} className={"s-btn" + (j === 0 ? " primary" : "")}>{window.t(a)}</button>
                          ))}
                        </div>
                      )}
                    </div>
                  </div>
                ))}
              </div>
              <div className="slack-compose">
                <div className="slack-compose-box">
                  <div className="slack-compose-tools">
                    <span className="b">B</span>
                    <span className="i">I</span>
                    <span className="u">U</span>
                    <span className="s">S</span>
                    <span className="tdiv" />
                    <span>🔗</span>
                    <span>☰</span>
                    <span className="tdiv" />
                    <span className="code">{"</>"}</span>
                  </div>
                  <div className="slack-compose-input">{window.t("Message")} #{chan.name}</div>
                  <div className="slack-compose-foot">
                    <div className="slack-foot-left">
                      <span className="circle">+</span>
                      <span className="aa">Aa</span>
                      <span>😊</span>
                      <span>@</span>
                      <span>⋯</span>
                    </div>
                    <div className="slack-foot-right">
                      <span className="send">➤</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ------------------------------------------------------------------ */
/*  Works Where You Work — "No new dashboard. Ever."                  */
/* ------------------------------------------------------------------ */

const TOOLS = [
  { name: "Slack", src: "https://svgl.app/library/slack.svg", highlight: true },
  { name: "Notion", src: "https://svgl.app/library/notion.svg" },
  { name: "Shopify", src: "https://svgl.app/library/shopify.svg" },
  { name: "Klaviyo", src: "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%3E%3Cpath%20d='M24%2016H84L58%2050L84%2084H24Z'%20fill='%23232426'/%3E%3C/svg%3E" },
  { name: "WordPress", src: "https://cdn.simpleicons.org/wordpress/21759B" },
  { name: "Meta", src: "https://svgl.app/library/meta.svg" },
  { name: "Telegram", src: "https://svgl.app/library/telegram.svg" },
  { name: "WhatsApp", src: "https://cdn.simpleicons.org/whatsapp/25D366" },
  { name: "Google Workspace", src: "https://svgl.app/library/google.svg" },
  { name: "GA4", src: "https://cdn.simpleicons.org/googleanalytics/E8710A" },
];

const WorksWhereYouWork = () => (
  <section className="section" id="where">
    <div className="wrap">
      <div className="block-head">
        <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Not a chatbot in a tab. A <span class="accent">specialist</span> in your stack') }} />
        <p className="sec-lead">
          {window.t("An assistant waits in a browser tab for you to paste in context, then forgets it when you close the window. An agent lives in your infrastructure: it reads your connected tools, runs on a schedule, remembers, keeps logs, and answers to KPIs.")}
        </p>
      </div>

      <div className="promises">
        <div className="promise">
          <div className="promise-tag">
            <span className="icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            {window.t("Where it lives")}
          </div>
          <h3>{window.t("In your stack, not in a new login.")}</h3>
          <p>
            {window.t("The crew deploys into the tools your team already lives in: Slack, Notion, Shopify, Klaviyo, WordPress, Meta. No migration, no new tab. It pulls context from your data and logs every action, instead of starting cold each session.")}
          </p>
          <div className="promise-artifact">
            <span className="tag">{window.t("Where the crew lives")}</span>
            <div className="promise-stack">
              {TOOLS.map(({ name, src, highlight }) => (
                <span className={"tool" + (highlight ? " brand" : "")} key={name} title={name} aria-label={name}>
                  {src ? <img src={src} alt={name} /> : (
                    <span style={{ fontFamily: "var(--mono)", fontSize: 11, fontWeight: 600 }}>{name}</span>
                  )}
                </span>
              ))}
            </div>
          </div>
        </div>

        <div className="promise">
          <div className="promise-tag">
            <span className="icon">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M8 13V3M3 8l5-5 5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            {window.t("Earned autonomy")}
          </div>
          <h3>{window.t("You stay in control.")}</h3>
          <p>
            {window.t("The crew does the work. At first you approve each output in Slack, then every workflow earns its way to running on its own. Trust expands one workflow at a time, and you set the pace.")}
          </p>
          <div className="promise-artifact">
            <span className="tag">{window.t("Oversight model")}</span>
            <div className="row"><span>{window.t("Tier 1 · Full approval")}</span><b>{window.t("Every action reviewed")}</b></div>
            <div className="row"><span>{window.t("Tier 2 · Exceptions only")}</span><b>{window.t("Flags anomalies")}</b></div>
            <div className="row"><span>{window.t("Tier 3 · Autonomous")}</span><b>{window.t("Earned over time")}</b></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

/* ------------------------------------------------------------------ */
/*  Crew For Every Challenge — not limited to 3 types                 */
/* ------------------------------------------------------------------ */

const AGENT_EXAMPLES = [
  { name: "Social Media Manager", desc: "Creates posts, publishes on schedule, tracks engagement, iterates" },
  { name: "Ads Manager", desc: "Builds campaigns and creative, launches, tracks ROAS, reallocates" },
  { name: "SEO Manager", desc: "Writes briefs and metadata, ships on-page fixes, tracks rankings" },
];

const AGENT_CHIPS = [
  "Email Marketer",
  "Growth Hacker",
  "Website Manager",
  "Content Manager",
  "Data Analyst",
  "Marketing Operations",
];

const CrewForEveryChallenge = () => (
  <section className="section" id="crew" style={{ position: "relative", overflow: "hidden" }}>
    <div className="aura aura-violet" style={{ width: "60vmin", height: "60vmin", top: "-12%", left: "-8%" }} />
    <div className="aura aura-lime" style={{ width: "52vmin", height: "52vmin", bottom: "-16%", right: "-6%" }} />
    <div className="wrap" style={{ position: "relative", zIndex: 1 }}>
      <div className="block-head">
        <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Nine <em class="accent">specialists</em>. Every lane of marketing') }} />
        <p className="sec-lead">
          {window.t("An agent is strongest with a clear perimeter: one function, one set of processes, like a good hire. So your crew is staffed like a real marketing team, specialists matched to your brand, your channels, and your goals.")}
        </p>
      </div>

      <div className="agent-grid">
        {AGENT_EXAMPLES.map((agent) => (
          <div key={agent.name} className="glass agent-card" style={{
            padding: "clamp(20px, 3vw, 28px)",
          }}>
            <div style={{
              fontFamily: "var(--display)",
              fontSize: 19,
              fontWeight: 600,
              letterSpacing: "-0.01em",
              color: "var(--brand)",
              marginBottom: 10,
            }}>{window.t(agent.name)}</div>
            <p style={{
              fontSize: 15,
              lineHeight: 1.55,
              color: "var(--ink-2)",
              margin: 0,
            }}>{window.t(agent.desc)}</p>
          </div>
        ))}
      </div>

      <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center", marginTop: 24 }}>
        {AGENT_CHIPS.map((name) => (
          <a key={name} href="agents.html" className="glass" style={{
            padding: "8px 16px",
            borderRadius: 999,
            fontFamily: "var(--display)",
            fontSize: 14,
            fontWeight: 500,
            color: "var(--brand)",
            textDecoration: "none",
          }}>{window.t(name)}</a>
        ))}
      </div>

      <div style={{
        textAlign: "center",
        marginTop: 32,
        color: "var(--ink-2)",
        fontSize: 15,
        lineHeight: 1.6,
      }}>
        <p style={{ margin: "0 0 8px", maxWidth: "64ch", marginLeft: "auto", marginRight: "auto" }}>
          {window.t("Three featured, nine in the lineup. Each agent runs its lane end to end, configured to your brand, your channels, and your goals. Start with the lanes that hurt most.")}
        </p>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", marginTop: 20 }}>
          <a className="micro-cta" href="agents.html">
            {window.t("Hire your first agent")} <ArrowRight />
          </a>
        </div>
      </div>
    </div>
  </section>
);

/* ------------------------------------------------------------------ */
/*  Section — Quick Value Prop (condensed Reframe)                    */
/* ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/*  Section — How It Works (condensed timeline)                       */
/* ------------------------------------------------------------------ */

const TIMELINE_STEPS = [
  {
    week: "Week 01",
    label: "Audit",
    title: "We map your business.",
    body: "We dig into how your business actually works: your goals, your highest-ROI workflows, and the context behind them. We study your brand, voice, processes, and the artifacts you already have, past campaigns, docs, emails, and data, to map what the crew will run and how it should sound.",
    note: "You sign off on the crew design, and we tailor-build agents to your needs.",
  },
  {
    week: "Week 02",
    label: "Build & integrate",
    title: "The crew gets built.",
    body: "Isolated infrastructure spun up and your stack connected. Brand, voice, processes, and historical artifacts loaded so the crew works in your context from day one. Approval routing configured.",
    note: "The crew exists. Not let out of the basement yet.",
  },
  {
    week: "Week 03",
    label: "Soft-launch",
    title: "Draft-only mode.",
    body: "The crew drafts on your real context and history. You review every output. We tune voice, tone, brand rules, and edge cases against how your business actually operates. Daily audits in Slack.",
    note: "Zero risk. Tasks go live only under supervision.",
  },
  {
    week: "Week 04+",
    label: "Live, then automatic",
    title: "Workflows start running themselves.",
    body: "Each workflow goes live on real data with your approval on every output. As it proves itself, it graduates to running on its own, end to end. The crew does the work, you set the pace.",
    note: "Promote a workflow to automatic when you trust it. Pull any back to approval anytime.",
  },
];

const HowItWorks = () => (
  <section className="section" id="how">
    <div className="wrap">
      <div className="block-head">
        <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Four weeks from discovery to <span class="accent">live</span>') }} />
        <p className="sec-lead">
          {window.t('Not six months. Not "AI in a day." Four weeks, with trust earned per workflow.')}
        </p>
      </div>

      <div style={{ display: "grid", gap: 0 }}>
        {TIMELINE_STEPS.map((step, i) => (
          <div key={i} style={{
            display: "grid",
            gridTemplateColumns: "88px 1fr",
            gap: "clamp(24px, 4vw, 56px)",
            padding: "28px 0",
            borderBottom: i < TIMELINE_STEPS.length - 1 ? "1px solid var(--rule-strong)" : "none",
          }}>
            <div style={{
              fontFamily: "var(--mono)",
              fontSize: 13,
              textTransform: "uppercase",
              letterSpacing: "0.08em",
              color: "var(--ink-3)",
              paddingTop: 2,
            }}>
              <div style={{ fontWeight: 600, color: "var(--ink)" }}>{window.t(step.week)}</div>
              <div style={{ color: "var(--brand)", marginTop: 4 }}>{window.t(step.label)}</div>
            </div>
            <div>
              <h4 style={{
                fontFamily: "var(--display)",
                fontWeight: 400,
                fontSize: "clamp(22px, 2.4vw, 30px)",
                lineHeight: 1.12,
                letterSpacing: "-0.01em",
                margin: "0 0 8px",
              }}>{window.t(step.title)}</h4>
              <p style={{
                fontSize: 16,
                lineHeight: 1.55,
                color: "var(--ink-2)",
                margin: "0 0 8px",
                maxWidth: "56ch",
              }}>{window.t(step.body)}</p>
              <div style={{
                fontFamily: "var(--mono)",
                fontSize: 13,
                color: "var(--brand)",
              }}>&rarr; {window.t(step.note)}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------------------------------------------------------------------ */
/*  Section — Case Studies Preview                                    */
/* ------------------------------------------------------------------ */

const CASE_TEASERS = [
  {
    type: "Seed-stage fintech",
    headline: "Work a seed-stage team could never staff",
    desc: "A full marketing function across seven platforms: 195 posts a month, 7× organic traffic, 10× referral, cost per lead down 30% on the same budget.",
    href: "case-study-seed-saas.html",
  },
  {
    type: "Podavach · ecommerce",
    headline: "A whole store's marketing, shipped daily",
    desc: "Support, store ops, paid, email, social, and content, run by a specialist crew with one operator approving the work.",
    href: "case-study-ecommerce-brand.html",
  },
  {
    type: "Eversolid · ecommerce",
    headline: "The operating capacity of a growth team",
    desc: "A four-agent crew runs the store, paid media, content, and operations from one chat. 90-day targets: 100-220 assets produced, 40-80 improvements shipped, zero unapproved risky actions.",
    href: "case-study-eversolid.html",
  },
  {
    type: "Marketing agency · 18 people",
    headline: "4 new retainers without adding headcount",
    desc: "Content, social, ads, email, and reporting produced across every client account, so the team scales without hiring.",
    href: "case-study-marketing-agency.html",
  },
];

const CaseStudiesPreview = () => {
  const [i, setI] = React.useState(0);
  const len = CASE_TEASERS.length;
  const visible = [0, 1, 2].map((k) => CASE_TEASERS[(i + k) % len]);
  const prev = () => setI((i - 1 + len) % len);
  const next = () => setI((i + 1) % len);

  return (
    <section className="section sunken-deep" id="cases">
      <div className="wrap">
        <div className="block-head">
          <h2 className="sec-h" dangerouslySetInnerHTML={{ __html: window.t('Results from <span class="accent">real</span> clients') }} />
          <p className="sec-lead">
            {window.t("Crews running today. Here is what changed.")}
          </p>
        </div>

        <div className="case-slider">
          <button className="case-arrow" onClick={prev} aria-label="Previous case studies">‹</button>
          <div className="crew-grid case-slider-track" key={i}>
            {visible.map((cs, k) => (
              <a
                className="crew-card"
                key={cs.type + k}
                href={cs.href}
                style={{ textDecoration: "none", cursor: "pointer" }}
              >
                <div className="role">{window.t(cs.type)}</div>
                <h4 style={{ textWrap: "balance" }}>{window.t(cs.headline)}</h4>
                <p>{window.t(cs.desc)}</p>
                <div style={{
                  marginTop: "auto",
                  paddingTop: 16,
                  fontFamily: "var(--mono)",
                  fontSize: 13,
                  color: "var(--brand)",
                  display: "flex",
                  alignItems: "center",
                  gap: 8,
                }}>
                  {window.t("Read case study")} <ArrowRight />
                </div>
              </a>
            ))}
          </div>
          <button className="case-arrow" onClick={next} aria-label="Next case studies">›</button>
        </div>

        <div className="case-dots">
          {CASE_TEASERS.map((_, d) => (
            <button
              key={d}
              className={"case-dot" + (d === i ? " active" : "")}
              onClick={() => setI(d)}
              aria-label={"Go to case study " + (d + 1)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

/* ------------------------------------------------------------------ */
/*  Section — FAQ (condensed to top 5)                                */
/* ------------------------------------------------------------------ */

const HOME_FAQ = [
  {
    q: "Will this replace my team?",
    a: "No. It promotes them. Your people keep the judgment: strategy, brand calls, final approvals, the hard edge cases, the client relationships. The crew takes the repetitive volume that runs 24/7. The work that used to require a mid-level hire ships without one.",
  },
  {
    q: "How is this different from a chatbot or the AI tools built into my apps?",
    a: "A chatbot or copilot waits for you to prompt it, works one task at a time, and forgets the session. An agent works a whole process end to end: it self-triggers on a schedule or event, keeps persistent memory and logs, and is accountable to KPIs. And our agents coordinate across three or more platforms, which single-app AI can't.",
  },
  {
    q: "Isn't this still experimental?",
    a: "No. Google, Anthropic, OpenAI, and even Notion now ship managed agents in their own products. The category is here. We just run it for you, end to end, inside your stack.",
  },
  {
    q: "What if it hallucinates?",
    a: "Two layers of protection. Hard rules encoded into every agent (no specific dates, word limits on replies, PII redacted). Plus a human in the loop on every action until the workflow earns trust, then it runs on its own with anomalies still escalated to you.",
  },
  {
    q: "What if I want to leave?",
    a: "30-day out clause. We export your full data and logs. No long-term lock-in.",
  },
];

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

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

/* ------------------------------------------------------------------ */
/*  HeroV2 — full-screen liquid-glass hero with looping video bg      */
/* ------------------------------------------------------------------ */

const HERO2_TOOLS = ["Slack", "Notion", "Shopify", "Klaviyo", "Meta", "WordPress"];

const HeroV2 = () => {
  const videoRef = React.useRef(null);

  React.useEffect(() => {
    const v = videoRef.current;
    if (!v) return;
    v.muted = true;
    const p = v.play();
    if (p && p.catch) p.catch(() => {});
  }, []);

  const [menuOpen, setMenuOpen] = React.useState(false);

  return (
    <section className="hero2" id="top">
      <video ref={videoRef} className="hero2-video" src="vines.mp4?v=2" muted loop playsInline preload="auto" aria-hidden="true" />
      <div className="hero2-blur" aria-hidden="true" />
      <div className="hero2-inner">
        <nav className="hero2-nav">
          <a href="/" className="brand" style={{ display: "flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
            <Logo size={48} />
            <span className="hero2-brandname">octocrew<span style={{ opacity: 0.6 }}>.ai</span></span>
          </a>
          <div className="hero2-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>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span className="hero2-lang"><LangToggle /></span>
            <a href="contact.html" className="liquid-glass hero2-pill" data-octocrew-cal="booking">{window.t("Hire your AI crew")}</a>
            <button
              className="hero2-burger"
              aria-label="Menu"
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(!menuOpen)}
            >
              <span /><span /><span />
            </button>
          </div>
        </nav>
        <div className={"hero2-mobile" + (menuOpen ? " open" : "")}>
          <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>
          <LangToggle />
        </div>
        <div className="hero2-divider" />
        <div className="hero2-center">
          <h1 className="hero2-h1" dangerouslySetInnerHTML={{ __html: window.t('Marketing, <span class="hero2-grad">done</span><br/>by AI crew') }} />
          <p className="hero2-sub">{window.t("Nine AI specialists that run your marketing end to end: socials, ads, email, SEO, content, website, analytics. They work inside the tools you already use, ship every day, and check in when a decision needs your judgment.")}</p>
          <a href="contact.html" className="liquid-glass hero2-cta" data-octocrew-cal="booking">{window.t("Hire your AI crew")}</a>
        </div>
        <div className="hero2-bottom">
          <div className="hero2-marquee-wrap">
            <div className="hero2-static" dangerouslySetInnerHTML={{ __html: window.t('Lives in the tools<br/>your team already uses') }} />
            <div className="hero2-marquee">
              <div className="hero2-track">
                {HERO2_TOOLS.concat(HERO2_TOOLS).map((name, i) => (
                  <span className="hero2-logo" key={i}>
                    <span className="liquid-glass hero2-tile">{name[0]}</span>
                    <span className="hero2-logoname">{name}</span>
                  </span>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

function HomeApp() {
  return (
    <React.Fragment>
      <main id="main-content">
        <HeroV2 />
        <Demo />
        <WorksWhereYouWork />
        <CrewForEveryChallenge />
        <HowItWorks />
        <CaseStudiesPreview />
        <PullQuote />
        <HomeFAQ />
        <FooterCTA />
      </main>
      <FloatCTA />
    </React.Fragment>
  );
}

Object.assign(window, { NavMulti, HomeHero, FloatingOrbs, Demo, HeroV2, WorksWhereYouWork, CrewForEveryChallenge, HowItWorks, CaseStudiesPreview, HomeFAQ });

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