/* global React, Reveal, SectionLabel, HexTick, IconStrategy, IconPricing, IconWorkshop, ApisMark */

/* ───────────────────────────── About ───────────────────────────── */
const CREDENTIALS = [
  "Strategy and execution across technology businesses",
  "AI product strategy, pricing, and go-to-market",
  "B2B SaaS growth, from early stage to scale",
  "Hands-on with live AI deployment, not just advice",
];

function About() {
  return (
    <section id="about" style={{ position: "relative", scrollMarginTop: 80, padding: "112px 0" }}>
      <div className="wrap">
        <Reveal><SectionLabel index="01">About</SectionLabel></Reveal>
        <div className="about-grid" style={{ marginTop: 44, display: "grid", gap: 56 }}>
          <div>
            <Reveal delay={0.05}>
              <h2 className="h2" style={{ maxWidth: "38rem", margin: 0 }}>
                You don't need another AI deck. You need it <span style={{ color: "var(--accent-bright)" }}>working</span>.
              </h2>
            </Reveal>
            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 20 }}>
              {[
                "The gap that stalls most teams isn't ambition. It's the path from a good idea to a system that runs in your business. We close that gap by picking the few AI moves worth making, then building and shipping them with your team.",
                "We've led strategy, pricing, and go-to-market for AI products, and put AI into live operations. So the advice you get holds up in the room and in production, not just on a slide.",
                "You work directly with senior people, never a junior team running playbooks. We take on a handful of clients at a time, which means real focus and fast decisions.",
              ].map((t, i) => (
                <Reveal as="p" delay={0.1 + i * 0.05} key={i}
                  style={{ margin: 0, fontSize: "var(--fluid-base)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{t}</Reveal>
              ))}
            </div>
          </div>
          <div style={{ paddingTop: 8 }}>
            <Reveal delay={0.15}>
              <p className="kicker" style={{ fontSize: 11, color: "var(--text-muted)", margin: 0 }}>What we bring</p>
              <ul style={{ marginTop: 22, listStyle: "none", padding: 0 }}>
                {CREDENTIALS.map((c, i) => (
                  <li key={c} className="ruled-row cred-row"
                    style={{ display: "flex", alignItems: "baseline", gap: 16, borderTop: "1px solid rgba(255,255,255,.08)", padding: "17px 0", transition: "border-color .3s" }}>
                    <span style={{ position: "relative", top: 2 }}><HexTick size={11} color="rgba(79,124,255,.85)" /></span>
                    <span className="cred-cell" style={{ fontSize: "var(--fluid-sm)", lineHeight: 1.55, color: "var(--text-body)", transition: "color .3s" }}>{c}</span>
                  </li>
                ))}
                <li style={{ borderTop: "1px solid rgba(255,255,255,.08)" }} />
              </ul>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ──────────────────────────── Services ─────────────────────────── */
const SERVICES = [
  { primary: true, index: "01", Icon: IconStrategy, title: "AI Strategy & Build",
    what: "From a blank page to AI running in your business: strategy and build, one partner.",
    detail: "Most AI work dies in the gap between strategy and shipping. We close it. We pinpoint the highest-leverage opportunities, choose the right approach, then build and deploy the solutions and agents, live in your business, not stuck in a deck.",
    goodFor: "Owners who don't know where to start, and teams ready to move fast with a senior partner who builds alongside them." },
  { index: "02", Icon: IconPricing, title: "AI Pricing & Packaging",
    what: "Price your AI so it sells, scales, and stops leaving money on the table.",
    detail: "AI pricing is still being figured out, and most teams either undercharge or bolt on friction that kills adoption. We build a model that fits your market, your customers, and your stage, one that grows margin without scaring off the deal.",
    goodFor: "Teams with an AI product in market, or on the roadmap, that needs to package and price right." },
  { index: "03", Icon: IconWorkshop, title: "Workshops, Speaking & Panels",
    what: "Get your team off the fence: clear on what AI changes and what to do Monday.",
    detail: "Sessions that cut hype and leave people able to act: where AI actually moves the needle, what's genuinely working now, and the calls your team should make next. A practitioner's view, built for a leadership offsite, a team workshop, or a conference stage.",
    goodFor: "Leadership teams, innovation functions, and conference organisers who want signal, not slideware." },
];

function PrimaryService({ s }) {
  const Icon = s.Icon;
  return (
    <Reveal className="primary-card"
      style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-card)",
        border: "1px solid rgba(79,124,255,.3)",
        background: "linear-gradient(135deg, rgba(79,124,255,.13), rgba(15,17,23,.5) 55%, rgba(15,17,23,.3))",
        padding: 40, transition: "border-color .3s" }}>
      <span aria-hidden="true" className="text-stroke"
        style={{ position: "absolute", right: -6, top: -34, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "14rem", lineHeight: 1, pointerEvents: "none", userSelect: "none" }}>
        {s.index}
      </span>
      <div className="primary-inner" style={{ position: "relative", display: "grid", gap: 48 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
            <span className="hex-chip" style={{ width: 44, height: 44, borderRadius: 12, background: "var(--accent-soft)", border: "1px solid rgba(79,124,255,.3)", color: "var(--accent-bright)" }}>
              <Icon size={22} />
            </span>
            <span style={{ display: "inline-flex", whiteSpace: "nowrap", alignItems: "center", borderRadius: 999, background: "var(--accent)", padding: "5px 12px",
              fontSize: 10, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.16em", color: "#fff", boxShadow: "var(--shadow-chip)" }}>
              Primary offering
            </span>
          </div>
          <h3 className="h3" style={{ margin: 0 }}>{s.title}</h3>
          <p style={{ marginTop: 12, marginBottom: 0, fontSize: "var(--fluid-base)", fontWeight: 500, lineHeight: 1.35, color: "#E2E8F0" }}>{s.what}</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <p style={{ margin: 0, fontSize: "var(--fluid-sm)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{s.detail}</p>
          <div style={{ marginTop: 24, borderTop: "1px solid rgba(255,255,255,.08)", paddingTop: 20 }}>
            <p className="kicker" style={{ fontSize: 10, color: "var(--text-muted)", margin: 0 }}>Good for</p>
            <p style={{ marginTop: 8, marginBottom: 0, fontSize: "var(--fluid-sm)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{s.goodFor}</p>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function ServiceRow({ s, index }) {
  const Icon = s.Icon;
  return (
    <Reveal delay={index * 0.08} className="service-row ruled-row"
      style={{ display: "grid", gap: 24, borderTop: "1px solid rgba(255,255,255,.1)", padding: "40px 0", transition: "border-color .3s" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
        <span className="kicker tnum service-idx" style={{ fontSize: 13, color: "var(--text-muted)", transition: "color .3s" }}>{s.index}</span>
        <span className="hex-chip" style={{ width: 38, height: 38, borderRadius: 11, border: "1px solid rgba(255,255,255,.1)", color: "var(--accent-bright)" }}>
          <Icon size={19} />
        </span>
      </div>
      <div className="service-body" style={{ display: "grid", gap: 48 }}>
        <div>
          <h3 className="h3" style={{ margin: 0 }}>{s.title}</h3>
          <p style={{ marginTop: 12, marginBottom: 0, fontSize: "var(--fluid-base)", fontWeight: 500, lineHeight: 1.35, color: "var(--text-body)" }}>{s.what}</p>
        </div>
        <div>
          <p style={{ margin: 0, fontSize: "var(--fluid-sm)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{s.detail}</p>
          <div style={{ marginTop: 20 }}>
            <span className="kicker" style={{ fontSize: 10, color: "var(--text-muted)" }}>Good for · </span>
            <span style={{ fontSize: "var(--fluid-sm)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{s.goodFor}</span>
          </div>
        </div>
      </div>
    </Reveal>
  );
}

function Services() {
  const [primary, ...rest] = SERVICES;
  return (
    <section id="services" style={{ position: "relative", scrollMarginTop: 80, padding: "112px 0" }}>
      <div className="wrap">
        <div className="services-head" style={{ display: "flex", gap: 24 }}>
          <div style={{ maxWidth: "42rem" }}>
            <Reveal><SectionLabel index="02">Services</SectionLabel></Reveal>
            <Reveal delay={0.05}><h2 className="h2" style={{ marginTop: 30, marginBottom: 0 }}>Three ways to put AI to work</h2></Reveal>
          </div>
          <Reveal delay={0.1}>
            <span className="kicker" style={{ fontSize: 11, color: "var(--text-muted)" }}>
              <span className="tnum" style={{ color: "var(--text-body-2)" }}>03</span> engagements
            </span>
          </Reveal>
        </div>
        <div style={{ marginTop: 52 }}>
          <PrimaryService s={primary} />
          <div style={{ marginTop: 16 }}>
            {rest.map((s, i) => <ServiceRow key={s.title} s={s} index={i} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ───────────────────────────── Process ──────────────────────────── */
const STEPS = [
  { n: "01", k: "Find", t: "We pinpoint the few AI moves with real leverage, and rule out the ones that don't pay. You leave with a clear, ranked plan, not a wish list." },
  { n: "02", k: "Build", t: "We build the solution and wire it into how your business actually runs, working alongside your team, not handing over a doc and walking away." },
  { n: "03", k: "Ship & scale", t: "It goes live where it has to earn its keep. Then we price it, tune it, and scale what works, so the leverage compounds." },
];

function Process() {
  return (
    <section id="process" style={{ position: "relative", scrollMarginTop: 80, padding: "112px 0" }}>
      <div className="wrap">
        <div className="services-head" style={{ display: "flex", gap: 24 }}>
          <div style={{ maxWidth: "42rem" }}>
            <Reveal><SectionLabel index="03">Process</SectionLabel></Reveal>
            <Reveal delay={0.05}><h2 className="h2" style={{ marginTop: 30, marginBottom: 0 }}>From first call to live, in weeks not quarters</h2></Reveal>
          </div>
          <Reveal delay={0.1}>
            <span className="kicker" style={{ fontSize: 11, color: "var(--text-muted)" }}>
              <span className="tnum" style={{ color: "var(--text-body-2)" }}>03</span> steps · one partner
            </span>
          </Reveal>
        </div>
        <div className="steps-grid" style={{ marginTop: 52 }}>
          {STEPS.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.08} className="step-row"
              style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-card)",
                border: "1px solid rgba(255,255,255,.08)", background: "rgba(15,17,23,.45)",
                padding: "28px 26px 30px", transition: "border-color .3s" }}>
              <span aria-hidden="true" className="text-stroke"
                style={{ position: "absolute", right: 14, top: -14, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "5.4rem", lineHeight: 1, pointerEvents: "none", userSelect: "none" }}>
                {s.n}
              </span>
              <div style={{ position: "relative" }}>
                <span className="kicker tnum step-idx" style={{ fontSize: 12, color: "var(--accent)", transition: "color .3s" }}>{s.n}</span>
                <h3 style={{ margin: "16px 0 0", fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--fluid-lg)", letterSpacing: "-0.02em", color: "#fff" }}>{s.k}</h3>
                <p style={{ margin: "12px 0 0", fontSize: "var(--fluid-sm)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{s.t}</p>
              </div>
              {i < STEPS.length - 1 && (
                <span aria-hidden="true" style={{ position: "absolute", right: -1, top: "50%", transform: "translateY(-50%)" }} />
              )}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ─────────────────────────── Experience ────────────────────────── */
const TRACK = [
  { k: "0→scale", v: "Taken B2B SaaS products from early stage to real, repeatable revenue." },
  { k: "Pricing", v: "Built pricing and packaging that lifts margin without killing adoption." },
  { k: "Market entry", v: "Won ground in crowded markets with sharp positioning and go-to-market." },
  { k: "Deployment", v: "Put AI into day-to-day operations, where it has to earn its keep." },
];

function Experience() {
  return (
    <section id="experience" style={{ position: "relative", scrollMarginTop: 80, padding: "112px 0" }}>
      <div className="wrap">
        <Reveal><SectionLabel index="04">Experience</SectionLabel></Reveal>
        <Reveal delay={0.05}><h2 className="h2" style={{ marginTop: 30, maxWidth: "42rem", marginBottom: 0 }}>This isn't our first rodeo</h2></Reveal>
        <div style={{ marginTop: 52 }}>
          {TRACK.map((t, i) => (
            <Reveal key={t.k} delay={i * 0.06} className="track-row ruled-row"
              style={{ display: "grid", alignItems: "baseline", borderTop: "1px solid rgba(255,255,255,.1)", padding: "30px 0", transition: "border-color .3s" }}>
              <span className="kicker tnum track-idx" style={{ fontSize: 12, color: "var(--text-muted)", transition: "color .3s" }}>{String(i + 1).padStart(2, "0")}</span>
              <span className="track-key" style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: "var(--fluid-lg)", letterSpacing: "-0.03em", color: "var(--accent-bright)" }}>{t.k}</span>
              <span className="track-val" style={{ maxWidth: "36rem", fontSize: "var(--fluid-base)", lineHeight: 1.6, color: "var(--text-body-2)" }}>{t.v}</span>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid rgba(255,255,255,.1)" }} />
        </div>
        <Reveal delay={0.1}>
          <blockquote style={{ marginTop: 48, marginInline: 0, maxWidth: "48rem", borderLeft: "2px solid rgba(79,124,255,.5)", paddingLeft: 24,
            fontFamily: "var(--font-display)", fontWeight: 500, fontSize: "var(--fluid-lg)", lineHeight: 1.35, color: "#E2E8F0" }}>
            None of this is theory. It's the same operator's judgment we bring to your problem from day one, so you skip the expensive detours and get to what works.
          </blockquote>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { About, Services, Process, Experience });
