/* global React */

const Logo = ({ size = 28 }) => (
  <img
    src="logo.png?v=3"
    alt="Octocrew"
    width={size}
    height={size}
    style={{ display: "block" }}
  />
);

const ArrowRight = ({ cls = "arrow" }) => (
  <svg className={cls} width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const ArrowDown = ({ cls = "arrow arrow-down" }) => (
  <svg className={cls} width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
    <path d="M7 2v10M3 8l4 4 4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

const Nav = () => (
  <nav className="nav">
    <div className="wrap nav-inner">
      <a href="#top" className="brand">
        <Logo size={56} />
        <span className="brand-name">
          octocrew<span className="tld">.ai</span>
        </span>
      </a>
      <div className="nav-links">
        <a href="#math">The math</a>
        <a href="#crew">The crew</a>
        <a href="#how">How it works</a>
        <a href="#who">Who it's for</a>
      </div>
      <a href="#book" className="nav-cta">
        Hire your AI crew <ArrowRight />
      </a>
    </div>
  </nav>
);

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

const SlackMock = () => (
  <div className="slack-wrap">
  <div className="slack" role="figure" aria-label="Slack channel mock showing agent activity">
    <div className="slack-head">
      <span className="hash">#</span>
      <span className="hash" style={{ marginLeft: -6 }}>ops-crew</span>
      <span className="dot" />
      <span>this morning</span>
      <span style={{ marginLeft: "auto", fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-3)" }}>
        4 members · 3 agents
      </span>
    </div>
    <div className="slack-body">
      <div className="s-msg">
        <div className="s-avatar" style={{ background: "#3F007F" }}>OB</div>
        <div>
          <div className="s-meta">
            <b>Ops Brief</b>
            <span className="s-tag">Agent</span>
            <span className="s-time">8:02 AM</span>
          </div>
          <div className="s-text">
            Morning brief. 2 things need eyes: <b>Meta ROAS on Campaign #4</b> dropped <b>18%</b> overnight, and{" "}
            <b>Shopify inventory on SKU-A20</b> is below threshold.
          </div>
        </div>
      </div>

      <div className="s-msg">
        <div className="s-avatar" style={{ background: "#2E6B3E" }}>CS</div>
        <div>
          <div className="s-meta">
            <b>Customer Support</b>
            <span className="s-tag">Agent</span>
            <span className="s-tag draft">Draft</span>
            <span className="s-time">8:14 AM</span>
          </div>
          <div className="s-text">Drafted reply to order #4192 (refund request, item arrived damaged). Approve to send?</div>
          <div className="s-quote">
            Hi Marta, so sorry to see the damage on your order. I've issued a full refund and dispatched a replacement on
            priority. You'll see it by Thursday. No need to send anything back.
          </div>
          <div className="s-actions">
            <button className="s-btn primary">✓ Approve &amp; send</button>
            <button className="s-btn">Edit</button>
            <button className="s-btn">Skip</button>
          </div>
        </div>
      </div>

      <div className="s-msg">
        <div className="s-avatar" style={{ background: "#C9851A" }}>AD</div>
        <div>
          <div className="s-meta">
            <b>Ads</b>
            <span className="s-tag">Agent</span>
            <span className="s-tag rec">Recommendation</span>
            <span className="s-time">8:21 AM</span>
          </div>
          <div className="s-text">
            Recommend <b>pausing Campaign #4: Cold Audience</b>. 18% ROAS drop over 48h, creative fatigue suspected.
            Proposed reallocation: <b>+$140/day to Campaign #2</b>.
          </div>
          <div className="s-actions">
            <button className="s-btn primary">Approve plan</button>
            <button className="s-btn">Adjust</button>
            <button className="s-btn">Hold</button>
          </div>
        </div>
      </div>
    </div>
  </div>
    <div className="s-stamp">Your actual Slack</div>
  </div>
);

const Hero = () => (
  <section className="hero" id="top">
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <div className="eyebrow">
            <span className="pulse-dot" />
            For e-com businesses &amp; agencies under €10M
          </div>
          <h1 className="h-display">
            Scale your output,
            <br />
            not your <span className="accent">headcount</span>
          </h1>
          <p className="sub">
            A managed agentic crew that handles support, reporting, ads, retention, and content across the
            stack you already use. Runs the work for you. You approve at first, then it runs on its own. <b>No new dashboard. No prompt engineering.</b>
          </p>

          <div className="proof-line">
            <span className="pquote">“We ran this crew in our own ops for <b>90+ days</b> before offering it to a single client.”</span>
          </div>

          <div className="hero-ctas">
            <a href="#book" className="btn btn-primary">
              Hire your AI crew <ArrowRight />
            </a>
            <a href="#math" className="btn btn-ghost">
              See the dollar math <ArrowDown cls="arrow arrow-down" />
            </a>
          </div>
        </div>
        <div>
          <SlackMock />
        </div>
      </div>
    </div>
  </section>
);

/* ---------------------- Stack strip ---------------------- */

const StackStrip = () => {
  const tools = ["Slack", "Notion", "Shopify", "Klaviyo", "Gmail", "Google Workspace", "Meta Ads", "GA4"];
  const logos = window.BRAND_LOGOS || {};
  return (
    <div className="stack-strip">
      <div className="wrap stack-row">
        <div className="stack-label">→ The crew works inside</div>
        <div className="stack-chips">
          {tools.map((t) => {
            const L = logos[t];
            return (
              <span className="chip" key={t}>
                {L ? <L /> : null}
                <span>{t}</span>
              </span>
            );
          })}
          <span className="chip last">+ your stack</span>
        </div>
      </div>
    </div>
  );
};

/* ---------------------- §1 Reframe ---------------------- */

const Reframe = () => (
  <section className="section dark" id="math">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">01 — The leverage</div>
        <div>
          <h2 className="sec-h">
            You already have the team.
            <br />
            Give them back the week.
          </h2>
          <p className="sec-lead">
            Your operators, marketers, and founders run the business well. What drains them is the click-work between
            the decisions: pulling KPIs, drafting tickets, building campaigns from scratch, checking restock, writing
            the brief. The crew handles that 80%, so your team's hours go to the 20% that actually grows the business.
          </p>
        </div>
      </div>

      <div className="anchor">
        <div>
          <div className="reframe-anchor first">
            <div className="reframe-label">What your team gets back</div>
            <div className="reframe-price">+45<span className="unit"> hrs/wk</span></div>
            <div className="reframe-delta">
              across your core team, back to high-leverage work
              <br />· 2–3× output, same headcount
            </div>
          </div>
          <div className="reframe-anchor">
            <div className="reframe-label">Instead of your next hire</div>
            <div className="reframe-price">From €2.5<span className="unit">k/mo</span></div>
            <div className="reframe-delta">
              a fully managed team, for a fraction of one junior role (€80–120k loaded)
              <br />· capacity distributed across your whole team, not added to it
            </div>
          </div>
          <a className="micro-cta" href="#book">
            See what your team would get back <ArrowRight />
          </a>
        </div>
        <div>
          <table className="replace-table">
            <thead>
              <tr>
                <th>Where your team spends hours</th>
                <th>Hours/week</th>
                <th>Now handled by</th>
              </tr>
            </thead>
            <tbody>
              {[
                ["Daily KPI scraping & morning report", "4–6 hrs", "Ops Brief"],
                ["Inbound ticket drafting", "8–12 hrs", "Support agent"],
                ["Ad health checks & reallocations", "2–4 hrs", "Ads agent"],
                ["Campaign HTML & A/B drafting", "3–5 hrs", "Email agent"],
                ["Content briefs & QA", "4–6 hrs", "Content agent"],
                ["Social captions & scheduling", "2–3 hrs", "Social agent"],
                ["Restock alerts & theme tweaks", "1–3 hrs", "E-com agent"],
              ].map(([r, c, rep]) => (
                <tr key={r}>
                  <td>{r}</td>
                  <td className="cost">{c}</td>
                  <td className="rep">→ {rep}</td>
                </tr>
              ))}
            </tbody>
            <tfoot>
              <tr>
                <td colSpan="3">≈ 45 hrs/week given back · across a team of 3–5 · full Octocrew, plus one-time setup</td>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div>
  </section>
);

/* ---------------------- §2 Two promises ---------------------- */

const Promises = () => (
  <section className="section">
    <div className="wrap">
      <div className="sec-head">
        <div className="sec-num">02 — Two promises</div>
        <div>
          <h2 className="sec-h">Two things matter. We get both right</h2>
        </div>
      </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="M8 13V3M3 8l5-5 5 5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            Promise 01 · Output
          </div>
          <h3>More work shipped. Same payroll.</h3>
          <p>
            A junior employee costs €60–120k loaded, with ramp, turnover, and management. Octocrew handles the
            repetitive 80% (tickets, briefs, reports, drafts, QA) for a fraction of that. Your team focuses on the
            work humans should be doing.
          </p>
          <div className="promise-artifact">
            <span className="tag">Replacement math · monthly</span>
            <div className="row"><span>Junior employee, loaded</span><b>€8–10k</b></div>
            <div className="row"><span>Full Octocrew</span><b style={{ color: "var(--brand)" }}>€2.5–5.5k</b></div>
            <div className="row" style={{ background: "transparent", border: "none", padding: "0 12px" }}>
              <span>Delta</span><span className="delta">↑ ~2–3× output · ↓ cost</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="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>
            Promise 02 · Where
          </div>
          <h3>No new dashboard.<br />Ever.</h3>
          <p>
            Your team is in Slack, Notion, Telegram, Shopify, Klaviyo, Google Workspace. We deploy the crew there.
            Approvals happen in Slack threads. Drafts land in your tools. The interface is what you already use every
            day.
          </p>
          <div className="promise-artifact">
            <span className="tag">Where the crew lives</span>
            <div className="promise-stack">
              {[
                { 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", inline: "Klaviyo" },
                { name: "Gmail", src: "https://svgl.app/library/gmail.svg" },
                { 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: "X", src: "https://svgl.app/library/x.svg" },
                { name: "Google Workspace", src: "https://svgl.app/library/google.svg" },
              ].map(({ name, src, inline, highlight }) => {
                const L = inline ? (window.BRAND_LOGOS || {})[inline] : null;
                return (
                  <span className={"tool" + (highlight ? " brand" : "")} key={name} title={name} aria-label={name}>
                    {src ? <img src={src} alt={name} /> : L ? <L /> : null}
                  </span>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Logo, ArrowRight, ArrowDown, Nav, Hero, StackStrip, Reframe, Promises });