// Sections for the Build vs Buy landing page.

/* ── Responsive styles ───────────────────────────────────── */
const RESPONSIVE_CSS = `
  .bvb-hero-wrap {
    max-width: 1320px;
    margin: 0 auto;
    padding: 88px 40px 88px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .bvb-inside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
  }
  .bvb-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .bvb-costs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .bvb-alt-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 64px;
    align-items: start;
  }
  .bvb-table-row {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.15fr 1.15fr;
    gap: 24px;
  }
  .bvb-cover-col {
    display: flex;
    justify-content: center;
    padding: 20px 40px;
  }

  @media (max-width: 900px) {
    .bvb-hero-wrap {
      gap: 32px;
      padding: 48px 24px 56px !important;
    }
    .bvb-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .bvb-cover-col { display: none; }
    .bvb-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .bvb-stats-grid > div {
      border-right: none !important;
      border-bottom: 1px solid var(--av-rule);
      padding-left: 0 !important;
      padding-right: 0 !important;
      padding-bottom: 20px;
      padding-top: 20px;
    }
    .bvb-stats-grid > div:first-child { padding-top: 0; }
    .bvb-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .bvb-costs-grid {
      grid-template-columns: 1fr;
    }
    .bvb-alt-grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }
    .bvb-table-row {
      grid-template-columns: 1fr;
      gap: 10px;
    }
    .bvb-table-head { display: none !important; }
    /* The column headers are hidden when the table stacks, so each cell
       carries its own label on mobile — otherwise the three values read
       as an unlabelled list. */
    .bvb-table-row [data-col]::before {
      content: attr(data-col);
      display: block;
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--av-ink-muted);
      margin-bottom: 3px;
    }
    .bvb-section-pad {
      padding: 64px 24px 48px !important;
    }
    .bvb-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .bvb-inside-copy {
      max-width: 100% !important;
    }
    .bvb-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
  }

  @media (max-width: 480px) {
    .bvb-hero-wrap { padding: 36px 20px 48px !important; }
    .bvb-inside-grid { padding: 48px 20px !important; }
    .bvb-section-pad { padding: 56px 20px 40px !important; }
    .bvb-closing-inner { padding: 64px 20px 56px !important; }
    .bvb-footer { padding: 24px 20px !important; }
  }
`;

const ResponsiveStyles = () => (
  <style dangerouslySetInnerHTML={{ __html: RESPONSIVE_CSS }} />
);

/* ── NavBar ──────────────────────────────────────────────── */
const BuildNavBar = () => (
  <>
    <ResponsiveStyles />
    <header style={{
      background: "var(--av-canvas)",
      borderBottom: "1px solid var(--av-rule)",
    }}>
      <div style={{
        maxWidth: 1320, margin: "0 auto", padding: "0 40px", height: 75,
        display: "flex", justifyContent: "space-between", alignItems: "center",
      }}>
        <a href="https://algoverde.ai" aria-label="AlgoVerde — home"
          style={{ display: "inline-flex", alignItems: "center", textDecoration: "none" }}>
          <BuildLogo width={170} />
        </a>
      </div>
    </header>
  </>
);

/* ── Hero ─────────────────────────────────────────────────── */
const BuildHeroSection = ({ Italic, t, accent }) => (
  <section>
    <div className="bvb-hero-wrap">
      <BuildEyebrow color={t.accentColor}>{t.eyebrowText}</BuildEyebrow>

      <h1 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(40px, 6.4vw, 88px)", lineHeight: 0.98, letterSpacing: "-0.038em",
        color: "var(--av-ink)", margin: 0, maxWidth: 1180,
      }}>
        Everyone can build AI agents. <Italic>Almost nobody</Italic> can maintain them.
      </h1>

      <p style={{
        fontSize: "clamp(16px, 2vw, 21px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
        fontFamily: "var(--font-sans)", margin: 0, maxWidth: 760, textWrap: "pretty",
      }}>
        Why DIY agents for concept testing and product innovation stall — an honest take
        on "build vs buy," and why that is the wrong question in the first place.
      </p>

      {/* CTA row */}
      <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
        <a href={BUILD_PDF} download onClick={() => buildTrackDownload("hero")} style={{
          background: "var(--av-ink)", color: "#fff", border: "none",
          padding: "17px 28px", borderRadius: 10, fontSize: 15.5, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)", textDecoration: "none",
          display: "inline-flex", alignItems: "center", gap: 12,
          transition: "background 160ms ease, transform 160ms ease",
          letterSpacing: "-0.005em",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.background = accent; e.currentTarget.style.transform = "translateY(-1px)"; }}
          onMouseLeave={(e) => { e.currentTarget.style.background = "var(--av-ink)"; e.currentTarget.style.transform = "none"; }}
        >
          <span>{t.ctaLabel}</span>
          <span style={{ fontSize: 16 }}>↓</span>
        </a>
        <a href="#inside" style={{
          fontSize: 14, fontWeight: 500, color: "var(--av-ink-soft)",
          textDecoration: "none", padding: "14px 8px",
          display: "inline-flex", alignItems: "center", gap: 8,
          transition: "color 160ms ease",
        }}
          onMouseEnter={(e) => e.currentTarget.style.color = accent}
          onMouseLeave={(e) => e.currentTarget.style.color = "var(--av-ink-soft)"}
        >
          <span>See what's inside</span>
          <span>↓</span>
        </a>
        <span style={{
          fontSize: 12.5, color: "var(--av-ink-muted)", letterSpacing: "0.04em",
          paddingLeft: 4,
        }}>
          Free PDF · No email required
        </span>
      </div>

      {/* Proof row */}
      <div className="bvb-stats-grid" style={{
        marginTop: 16, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
      }}>
          {[
            { k: "Cancelled by 2027", v: <><span style={{ color: accent }}>40</span>%</>, note: "Of agentic AI projects, per Gartner" },
            { k: "Building → buying", v: <><span style={{ color: accent }}>47</span>→<span style={{ color: accent }}>24</span>%</>, note: "Internal building's share of enterprise AI deployments, in a single year" },
            { k: "Model releases in 2025", v: <><span style={{ color: accent }}>87</span></>, note: "Roughly one every four days — each one a re-test decision" },
          ].map((s, i) => (
            <div key={i} style={{
              paddingRight: 24, borderRight: i < 2 ? "1px solid var(--av-rule)" : "none",
              paddingLeft: i > 0 ? 24 : 0,
            }}>
              <div style={{
                fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--av-ink-muted)", marginBottom: 10,
              }}>{s.k}</div>
              <div style={{
                fontSize: "clamp(28px, 3vw, 38px)", fontWeight: 600, letterSpacing: "-0.025em",
                color: "var(--av-ink)", lineHeight: 1.1, marginBottom: 10,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 13, color: "var(--av-ink-muted)", lineHeight: 1.45, maxWidth: 300 }}>{s.note}</div>
            </div>
          ))}
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const BuildInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="bvb-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="bvb-cover-col">
        <BuildCover width={280} rotate={-4} />
      </div>
      <div className="bvb-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <BuildEyebrow color={t.accentColor}>Inside the paper</BuildEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          The question is not build vs buy.<br />
          It is <Italic>which layer</Italic> you build at.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          Not a case against building with AI. A case against owning the part of it
          that has to be rebuilt every week.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "The illusion of building yourself",
            "The real costs of DIY that never appear in the business case",
            "AlgoVerde is a validated system, not an experiment",
            "We go beyond automating an existing workflow",
            "The comparison: five paths, side by side",
            "Ownership: a capability, not just access",
            "Own the question",
          ].map((title, i) => (
            <BuildTocChip key={i} idx={["i", "ii", "iii", "iv", "v", "vi", "vii"][i]} color={t.accentColor}>
              {title}
            </BuildTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── The hidden costs (differentiator 1) ──────────────────── */
const BuildCostsSection = ({ accent, Italic, t }) => {
  const soft = buildAccent(t.accentColor).soft;
  const costs = [
    {
      n: "Cost one",
      title: "Compounding error.",
      body: "Thousands of steps, each one only 99% reliable.",
    },
    {
      n: "Cost two",
      title: "Weekly maintenance.",
      body: "Not a task on somebody's list. A standing function.",
    },
    {
      n: "Cost three",
      title: "Knowledge that walks out.",
      body: "The fifty small tuning decisions nobody wrote down.",
    },
  ];
  return (
    <section className="bvb-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>
      <div style={{ marginBottom: 56, maxWidth: 760 }}>
        <BuildEyebrow color={t.accentColor}>The costs</BuildEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 16,
        }}>
          The real costs of DIY that <Italic>never appear</Italic> in the business case.
        </h2>
        <p style={{
          fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500,
          fontSize: "clamp(18px, 2.2vw, 22px)", color: "var(--av-ink)", lineHeight: 1.45, margin: 0,
        }}>
          "A system built in-house will outlive several model generations and the person who understood it."
        </p>
      </div>

      <div className="bvb-costs-grid">
        {costs.map((c) => (
          <div key={c.n} style={{
            background: "#fff", border: "1px solid var(--av-rule)", borderRadius: 16,
            padding: "32px 32px", display: "flex", flexDirection: "column", gap: 14,
          }}>
            <div style={{
              fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
              textTransform: "uppercase", color: accent,
            }}>{c.n}</div>
            <h3 style={{
              fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 21,
              letterSpacing: "-0.015em", color: "var(--av-ink)", lineHeight: 1.25, margin: 0,
            }}>{c.title}</h3>
            <p style={{ fontSize: 14.5, color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0 }}>
              {c.body}
            </p>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 24, borderRadius: 14, background: soft, padding: "26px 32px",
      }}>
        <p style={{
          fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.6, margin: 0, fontWeight: 500,
        }}>
          None of this is fixed by a better model. Independent testing of seven widely used
          multi-agent frameworks put the failure rates in a range most business cases would
          not survive.
        </p>
      </div>

      <p style={{
        marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
        fontStyle: "italic", fontFamily: "var(--font-serif)",
      }}>
        The range itself, what each cost does to a build over six months, and the documented
        case where accuracy fell by a third under an unchanged model name — inside the paper.
      </p>
    </section>
  );
};

/* ── The alternative (differentiator 2) ───────────────────── */
const BuildAlternativeSection = ({ accent, Italic, t }) => (
  <section style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="bvb-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "88px 40px" }}>
      <div className="bvb-alt-grid">
        <div>
          <BuildEyebrow color={t.accentColor}>The alternative</BuildEyebrow>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 46px)", letterSpacing: "-0.028em", lineHeight: 1.05,
            marginTop: 18, marginBottom: 20,
          }}>
            AlgoVerde is not just a set of agents. It is a <Italic>living AI model</Italic> of your market.
          </h2>
          <p style={{
            fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.6, margin: 0,
          }}>
            A validated representation of your consumers, competitors and channels that stays
            current — so you can simulate a growth decision before deploying capital. Every model
            release goes through our lab before it reaches your work. The weekly maintenance
            above does not disappear. It moves.
          </p>

          <div style={{ marginTop: 32 }}>
            <div style={{
              fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "var(--av-ink-muted)", marginBottom: 16,
            }}>What your team never has to do</div>
            {[
              "No model migration project on the roadmap",
              "No quality-check framework to design, staff and maintain",
              "No output drifting when something changes underneath",
            ].map((item, i) => (
              <div key={i} style={{
                display: "flex", alignItems: "baseline", gap: 12,
                padding: "10px 0", borderTop: "1px solid var(--av-rule)",
                fontSize: 15, color: "var(--av-ink)", lineHeight: 1.5,
              }}>
                <span style={{ color: accent, flexShrink: 0, fontSize: 13 }}>—</span>
                <span>{item}</span>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 20 }}>
          {[
            { v: "85–90%", k: "Validation across customers", note: "Measured on the client's own questions, in the client's own market" },
            { v: "30+", k: "Forward deployments", note: null },
            { v: "25+", k: "Use cases across industries", note: null },
          ].map((s, i) => (
            <div key={i} style={{
              border: "1px solid var(--av-rule)", borderRadius: 14,
              padding: "24px 28px",
            }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontWeight: 500,
                fontSize: 34, letterSpacing: "-0.02em", color: accent, lineHeight: 1.05,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{
                marginTop: 8, fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
                textTransform: "uppercase", color: "var(--av-ink-muted)",
              }}>{s.k}</div>
              {s.note && (
                <div style={{ marginTop: 8, fontSize: 13.5, color: "var(--av-ink-soft)", lineHeight: 1.5 }}>
                  {s.note}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── Five paths comparison (proof teaser) ─────────────────── */
const BuildComparisonSection = ({ accent, Italic, t }) => {
  const soft = buildAccent(t.accentColor).soft;
  const rows = [
    {
      dim: "Time to first answer",
      diy: "~6 months to a working system",
      consultancy: "Months of scoping and build, on their schedule",
      av: "Hours to days",
    },
    {
      dim: "Who maintains it",
      diy: "Your team, weekly, indefinitely",
      consultancy: "They do — as long as you keep them on retainer",
      av: "Our lab, continuously",
    },
    {
      dim: "When the key person leaves",
      diy: "The capability leaves with them",
      consultancy: "Their consultants rotate; your context goes with them",
      av: "The capability stays with your team",
    },
  ];
  return (
    <section className="bvb-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 80px" }}>
      <div style={{ marginBottom: 48, maxWidth: 720 }}>
        <BuildEyebrow color={t.accentColor}>The comparison</BuildEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 46px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 0,
        }}>
          Five paths. Three of them, <Italic>side by side</Italic>.
        </h2>
      </div>

      <div>
        <div className="bvb-table-row bvb-table-head" style={{
          padding: "0 0 14px", borderBottom: "1px solid var(--av-rule)",
        }}>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}></div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}>DIY — build it internally</div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}>Consultancy-built agents</div>
          <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: accent }}>AlgoVerde</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} className="bvb-table-row" style={{
            padding: "24px 0", borderBottom: "1px solid var(--av-rule)",
          }}>
            <div style={{
              fontSize: 11, fontWeight: 500, letterSpacing: "0.18em",
              textTransform: "uppercase", color: "var(--av-ink-muted)", lineHeight: 1.5,
            }}>{r.dim}</div>
            <div data-col="DIY" style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.55 }}>{r.diy}</div>
            <div data-col="Consultancy" style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.55 }}>{r.consultancy}</div>
            <div data-col="AlgoVerde" style={{ fontSize: 14, color: "var(--av-ink)", lineHeight: 1.55, fontWeight: 500 }}>{r.av}</div>
          </div>
        ))}
      </div>

      <p style={{
        marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
        fontStyle: "italic", fontFamily: "var(--font-serif)",
      }}>
        Plus point solutions and traditional research partners, and three more dimensions —
        cost shape, what happens when a model changes, and what actually compounds — in the
        full five-path table inside the paper, alongside AlgoVerde's transparent pricing.
      </p>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const BuildClosingCTA = ({ t, accent, accentTint }) => (
  <section style={{
    background: "var(--av-bg-dark)", color: "#fff", position: "relative", overflow: "hidden",
  }}>
    <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 2, background: accent }}></div>
    <div className="bvb-closing-inner" style={{
      maxWidth: 1320, margin: "0 auto", padding: "96px 40px 88px",
      display: "flex", flexDirection: "column", alignItems: "center",
      gap: 36, textAlign: "center",
    }}>
      <h2 style={{
        fontFamily: "var(--font-sans)", fontWeight: 600,
        fontSize: "clamp(32px, 5vw, 60px)", letterSpacing: "-0.03em", lineHeight: 1.05,
        margin: 0, color: "#fff", maxWidth: 940, textWrap: "balance",
      }}>
        Not a set of agents.{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          Own the question.
        </span>
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 620,
      }}>
        Own your data, your questions and your decisions — and buy the system that turns them
        into answers, from somebody whose only job is keeping it current.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <a href={BUILD_PDF} download onClick={() => buildTrackDownload("closing")} style={{
          background: "#fff", color: "var(--av-ink)", border: "none",
          padding: "18px 32px", borderRadius: 10, fontSize: 16, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)", textDecoration: "none",
          display: "inline-flex", alignItems: "center", gap: 14,
          transition: "transform 160ms ease, background 160ms ease",
          letterSpacing: "-0.005em",
        }}
          onMouseEnter={(e) => { e.currentTarget.style.transform = "translateY(-2px)"; e.currentTarget.style.background = accentTint; }}
          onMouseLeave={(e) => { e.currentTarget.style.transform = "none"; e.currentTarget.style.background = "#fff"; }}
        >
          <span>{t.ctaLabel}</span>
          <span style={{ fontSize: 16 }}>↓</span>
        </a>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>
          Free PDF · No email required · Build vs buy
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  BuildNavBar, BuildHeroSection, BuildInsideSection,
  BuildCostsSection, BuildAlternativeSection, BuildComparisonSection, BuildClosingCTA,
});