// Sections for the Industry Validation landing page.

/* ── Responsive styles ───────────────────────────────────── */
const RESPONSIVE_CSS = `
  .proof-hero-grid {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .proof-inside-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 80px;
    align-items: center;
  }
  .proof-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .proof-bars-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .proof-table-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.5fr;
    gap: 24px;
  }
  .proof-cover-col {
    display: flex;
    justify-content: center;
    padding: 20px 40px;
  }

  @media (max-width: 900px) {
    .proof-hero-grid {
      grid-template-columns: 1fr;
      gap: 48px;
      padding: 48px 24px 64px !important;
    }
    .proof-inside-grid {
      grid-template-columns: 1fr;
      gap: 40px;
      padding: 56px 24px !important;
    }
    .proof-cover-col { display: none; }
    .proof-stats-grid {
      grid-template-columns: 1fr;
      gap: 0;
    }
    .proof-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;
    }
    .proof-stats-grid > div:first-child { padding-top: 0; }
    .proof-stats-grid > div:last-child { border-bottom: none; padding-bottom: 0; }
    .proof-bars-grid {
      grid-template-columns: 1fr;
    }
    .proof-table-row {
      grid-template-columns: 1fr;
      gap: 6px;
    }
    .proof-section-pad {
      padding: 64px 24px 48px !important;
    }
    .proof-closing-inner {
      padding: 72px 24px 64px !important;
    }
    .proof-inside-copy {
      max-width: 100% !important;
    }
    .proof-footer {
      padding: 24px 24px !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 12px !important;
    }
  }

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

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

/* ── NavBar ──────────────────────────────────────────────── */
const ProofNavBar = () => (
  <>
    <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" }}>
          <ProofLogo width={170} />
        </a>
      </div>
    </header>
  </>
);

/* ── Hero ─────────────────────────────────────────────────── */
const ProofHeroSection = ({ Italic, t, accent, scrollToForm, formRef }) => (
  <section>
    <div className="proof-hero-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "64px 40px 96px" }}>
      {/* Left — copy */}
      <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        <ProofEyebrow color={t.accentColor}>{t.eyebrowText}</ProofEyebrow>

        <h1 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(40px, 5.6vw, 80px)", lineHeight: 1.0, letterSpacing: "-0.035em",
          color: "var(--av-ink)", margin: 0, textWrap: "balance",
        }}>
          Don't trust the persona. Judge the <Italic>output</Italic>.
        </h1>

        <p style={{
          fontSize: "clamp(16px, 2vw, 20px)", lineHeight: 1.5, color: "var(--av-ink-soft)",
          fontFamily: "var(--font-sans)", margin: 0, textWrap: "pretty",
        }}>
          Four client engagements provide clear industry validation for AlgoVerde —
          our GenAI Personas matched the studies clients already trusted, then went further.
        </p>

        {/* CTA row */}
        <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <button onClick={scrollToForm} style={{
            background: "var(--av-ink)", color: "#fff", border: "none",
            padding: "16px 26px", borderRadius: 10, fontSize: 15, fontWeight: 500,
            cursor: "pointer", fontFamily: "var(--font-sans)",
            display: "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>
          </button>
          <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>
        </div>

        {/* Proof row */}
        <div className="proof-stats-grid" style={{
          marginTop: 24, paddingTop: 36, borderTop: "1px solid var(--av-rule)",
        }}>
          {[
            { k: "Client engagements", v: <>4</>, note: "Blind tests, market tests, and creative testing across automotive & CPG" },
            { k: "Add-to-cart lift", v: <><span style={{ color: accent }}>+60</span>%</>, note: "When AI-developed CPG concepts were built into a live website" },
            { k: "Audience gap uncovered", v: <>~<span style={{ color: accent }}>95</span>%</>, note: "Of the target audience not yet ready to consider the product — a gap the source research missed" },
          ].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: 26, fontWeight: 600, letterSpacing: "-0.02em",
                color: "var(--av-ink)", lineHeight: 1.1, marginBottom: 8,
                fontVariantNumeric: "tabular-nums",
              }}>{s.v}</div>
              <div style={{ fontSize: 12, color: "var(--av-ink-muted)", lineHeight: 1.45 }}>{s.note}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Right — form */}
      <div ref={formRef}>
        <ProofEmailForm accentColor={t.accentColor} />
      </div>
    </div>
  </section>
);

/* ── Inside the Paper ────────────────────────────────────── */
const ProofInsideSection = ({ t, Italic }) => (
  <section id="inside" style={{
    background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
  }}>
    <div className="proof-inside-grid" style={{ maxWidth: 1320, margin: "0 auto", padding: "80px 40px" }}>
      <div className="proof-cover-col">
        <ProofCover width={280} rotate={-4} />
      </div>
      <div className="proof-inside-copy" style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 640 }}>
        <ProofEyebrow color={t.accentColor}>Inside the paper</ProofEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.05, margin: 0,
        }}>
          Four engagements.<br />
          One <Italic>consistent</Italic> pattern.
        </h2>
        <p style={{
          fontSize: "clamp(15px, 1.8vw, 17px)", color: "var(--av-ink-soft)", lineHeight: 1.55, margin: 0,
        }}>
          Methodological studies describe how a persona is built. This paper is about what
          it does — measured against studies our clients already trusted, then tested against
          real market behavior.
        </p>
        <div style={{ marginTop: 12 }}>
          {[
            "The argument: industry validation matters more than methodology",
            "Engagement 01 — European automotive OEM: blind test",
            "Engagement 02 — Global CPG company: market test",
            "Engagement 03 — Global vehicle manufacturer: creative testing",
            "Engagement 04 — Global automotive manufacturer: head-to-head",
            "Summary: the evidence at a glance",
            "Conclusion: the merit of real-life proof",
          ].map((title, i) => (
            <ProofTocChip key={i} idx={["i", "ii", "iii", "iv", "v", "vi", "vii"][i]} color={t.accentColor}>
              {title}
            </ProofTocChip>
          ))}
        </div>
      </div>
    </div>
  </section>
);

/* ── The Argument (differentiator) ───────────────────────── */
const ProofArgumentSection = ({ accent, Italic, t }) => {
  const soft = proofAccent(t.accentColor).soft;
  const bars = [
    {
      n: "Bar one",
      title: "Match the trusted study.",
      body: "Run the same question through both methods — the client's traditional research and AlgoVerde's AI Experts and GenAI Personas — and see whether the outputs converge.",
    },
    {
      n: "Bar two",
      title: "Move the market.",
      body: "Put the resulting insight into the market — a concept, a creative, a launch decision — and see whether it moves real customer behavior.",
    },
  ];
  return (
    <section className="proof-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "96px 40px 64px" }}>
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <ProofEyebrow color={t.accentColor}>The argument</ProofEyebrow>
        <h2 style={{
          fontFamily: "var(--font-sans)", fontWeight: 600,
          fontSize: "clamp(32px, 4vw, 48px)", letterSpacing: "-0.028em", lineHeight: 1.05,
          marginTop: 18, marginBottom: 16,
        }}>
          Industry validation matters more than <Italic>methodology</Italic>.
        </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,
        }}>
          "Every company evaluating synthetic research asks the same question: can I trust it?"
        </p>
      </div>

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

      <div style={{
        marginTop: 24, borderRadius: 14, background: soft,
        padding: "24px 32px",
      }}>
        <p style={{
          fontSize: 14.5, color: "var(--av-ink)", lineHeight: 1.6, margin: 0, fontWeight: 500,
        }}>
          Across four client engagements, AlgoVerde's GenAI Personas and AI Experts cleared
          both bars. That is not a claim about method. It is a record of results.
        </p>
      </div>
    </section>
  );
};

/* ── Evidence / proof teaser ──────────────────────────────── */
const ProofEvidenceSection = ({ accent, t }) => {
  const rows = [
    {
      tag: "European automotive OEM · Blind test",
      test: "Same 2035 foresight study, run twice — traditional vs. AI",
      result: "“Sufficient and suitable” across all three phases; more comprehensive on the segment the human study covered lightly",
    },
    {
      tag: "Global CPG company · Market test",
      test: "Personas embedded in concept development, then judged in market",
      result: "Iteration collapsed from months to a week; two concepts cleared the internal benchmark; +60% add-to-cart",
    },
    {
      tag: "Global vehicle manufacturer · Creative testing",
      test: "Personas rank campaign concepts vs. client benchmark research",
      result: "Same rank order; surfaced that ~95% of the audience wasn't ready to consider the product — a gap the source research missed",
    },
  ];
  return (
    <section style={{
      background: "#fff", borderTop: "1px solid var(--av-rule)", borderBottom: "1px solid var(--av-rule)",
    }}>
      <div className="proof-section-pad" style={{ maxWidth: 1320, margin: "0 auto", padding: "88px 40px" }}>
        <div style={{ marginBottom: 48, maxWidth: 680 }}>
          <ProofEyebrow color={t.accentColor}>The evidence</ProofEyebrow>
          <h2 style={{
            fontFamily: "var(--font-sans)", fontWeight: 600,
            fontSize: "clamp(32px, 4vw, 46px)", letterSpacing: "-0.028em", lineHeight: 1.05,
            marginTop: 18, marginBottom: 0,
          }}>
            Three engagements. Three trusted bars cleared.
          </h2>
        </div>

        <div>
          <div className="proof-table-row" 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)" }}>Engagement</div>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}>The test</div>
            <div style={{ fontSize: 11, fontWeight: 500, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--av-ink-muted)" }}>The result</div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="proof-table-row" style={{
              padding: "24px 0", borderBottom: "1px solid var(--av-rule)",
            }}>
              <div style={{
                fontFamily: "var(--font-sans)", fontWeight: 600, fontSize: 15,
                color: "var(--av-ink)", lineHeight: 1.4,
              }}>{r.tag}</div>
              <div style={{ fontSize: 14, color: "var(--av-ink-soft)", lineHeight: 1.55 }}>{r.test}</div>
              <div style={{ fontSize: 14, color: "var(--av-ink)", lineHeight: 1.55 }}>{r.result}</div>
            </div>
          ))}
        </div>

        <p style={{
          marginTop: 28, fontSize: 14, color: "var(--av-ink-muted)", lineHeight: 1.6,
          fontStyle: "italic", fontFamily: "var(--font-serif)",
        }}>
          Plus a fourth engagement — an in-flight automotive ad-testing head-to-head, with early
          signals already ahead of the legacy process — inside the paper.
        </p>
      </div>
    </section>
  );
};

/* ── Closing CTA ─────────────────────────────────────────── */
const ProofClosingCTA = ({ t, accent, accentTint, scrollToForm }) => (
  <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="proof-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: 900, textWrap: "balance",
      }}>
        Not a claim about method.{" "}
        <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontWeight: 500, color: accentTint }}>
          A record of results.
        </span>
      </h2>
      <p style={{
        fontSize: "clamp(15px, 1.8vw, 17px)", color: "rgba(255,255,255,0.65)", lineHeight: 1.6,
        margin: 0, maxWidth: 600,
      }}>
        Four engagements, four industries — the same pattern every time. The personas matched
        the study our clients already trusted, then went further.
      </p>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 14, marginTop: 8 }}>
        <button onClick={scrollToForm} style={{
          background: "#fff", color: "var(--av-ink)", border: "none",
          padding: "18px 32px", borderRadius: 10, fontSize: 16, fontWeight: 500,
          cursor: "pointer", fontFamily: "var(--font-sans)",
          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>
        </button>
        <div style={{ fontSize: 12, color: "rgba(255,255,255,0.5)", letterSpacing: "0.04em" }}>
          Free · White paper · Industry validation
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, {
  ProofNavBar, ProofHeroSection, ProofInsideSection,
  ProofArgumentSection, ProofEvidenceSection, ProofClosingCTA,
});