// Stats band + Process steps + Why Zentro section.
function Results() {
  const { Container, Eyebrow, Icon } = window;
  const { Stat } = window.ZentroDesignSystem_967cea;

  const stats = [
    { value: "1",         label: "Dedicated Editor Per Client" },
    { value: "1–2 Days",  label: "Average Delivery Per Short-Form Video" },
    { value: "Revisions", label: "Included — No Extra Charge" },
    { value: "Monthly",   label: "Partnership, Not Per-Project" },
  ];

  const steps = [
    { n: "01", icon: "Upload",   title: "Send your footage",     body: "Each week, upload your raw footage and any notes. Your editor already knows your brand — no re-briefing required." },
    { n: "02", icon: "Scissors", title: "Your editor handles it", body: "Your dedicated editor produces the content inside your established workflow. The creative team reviews and supports quality." },
    { n: "03", icon: "CheckCircle", title: "Review and publish", body: "Approve your edits, request any revisions, and publish. Then repeat — the same editor, the same quality, every month." },
  ];

  return (
    <section style={{ padding: "100px 0", borderTop: "1px solid var(--border-subtle)" }}>
      <Container>

        {/* Why Zentro Exists */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", paddingBottom: 80, borderBottom: "1px solid var(--border-subtle)" }} className="z-pricing-grid">
          <div>
            <Eyebrow>Why Zentro exists</Eyebrow>
            <h2 style={{ marginTop: 20, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.25rem, 4vw, 3.2rem)", lineHeight: 1.04, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>
              The Problem Isn't Recording.<br /><span style={{ color: "var(--gold-500)", fontStyle: "italic" }}>It's Everything After.</span>
            </h2>
            <p style={{ marginTop: 20, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.8, color: "var(--text-secondary)" }}>
              Most businesses don't struggle to create content. They struggle to stay consistent with it. Editing piles up. Freelancers disappear. Revisions drag on. The workflow breaks.
            </p>
            <p style={{ marginTop: 14, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.8, color: "var(--text-secondary)" }}>
              Zentro removes editing from your business entirely. We assign you one dedicated editor — backed by a creative team — and build a workflow you never have to think about again.
            </p>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            {[
              { icon: "AlertCircle", label: "Editing backs up and content stops" },
              { icon: "UserX",       label: "Freelancers are inconsistent and hard to manage" },
              { icon: "RefreshCcw",  label: "Every project requires re-briefing from scratch" },
              { icon: "Clock",       label: "Delays push back publishing schedules" },
              { icon: "TrendingDown", label: "Inconsistency erodes brand trust over time" },
            ].map((p) => (
              <div key={p.label} style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 20px", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)" }}>
                <Icon name={p.icon} size={18} color="rgba(255,80,80,0.7)" />
                <span style={{ fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--text-secondary)" }}>{p.label}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Stats */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, paddingTop: 80, paddingBottom: 80, borderBottom: "1px solid var(--border-subtle)" }} className="z-stats-grid">
          {stats.map((s) => <Stat key={s.label} value={s.value} label={s.label} />)}
        </div>

        {/* Process */}
        <div id="process" style={{ marginTop: 80, scrollMarginTop: 90 }}>
          <div style={{ maxWidth: 620 }}>
            <Eyebrow>How it works</Eyebrow>
            <h2 style={{ marginTop: 20, fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(2.25rem, 4.5vw, 3.5rem)", lineHeight: 1.02, letterSpacing: "-0.03em", color: "var(--text-primary)" }}>
              A Workflow That Runs<br /><span style={{ color: "var(--gold-500)", fontStyle: "italic" }}>Without You.</span>
            </h2>
            <p style={{ marginTop: 16, fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.7, color: "var(--text-secondary)" }}>
              Once your editor knows your brand, the workflow runs itself. You record, they edit, you publish. Same editor, same quality, every month.
            </p>
          </div>
          <div style={{ marginTop: 52, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }} className="z-process-grid">
            {steps.map((st) => (
              <div key={st.n} style={{ position: "relative", padding: "32px 28px", background: "var(--surface-card)", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-lg)" }}>
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 13, fontWeight: 600, color: "var(--gold-500)" }}>{st.n}</span>
                <span style={{ position: "absolute", top: 28, right: 28, color: "var(--text-tertiary)" }}><Icon name={st.icon} size={22} /></span>
                <h3 style={{ marginTop: 28, fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, letterSpacing: "-0.02em", color: "var(--text-primary)" }}>{st.title}</h3>
                <p style={{ marginTop: 10, fontFamily: "var(--font-sans)", fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)" }}>{st.body}</p>
              </div>
            ))}
          </div>

          {/* Repeat badge */}
          <div style={{ marginTop: 24, display: "flex", justifyContent: "center" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "8px 18px", borderRadius: "9999px", background: "rgba(251,208,40,0.08)", border: "1px solid rgba(251,208,40,0.25)", fontFamily: "var(--font-sans)", fontSize: 13, fontWeight: 600, color: "var(--gold-400)" }}>
              <Icon name="RefreshCw" size={14} color="var(--gold-400)" />
              Then repeat — month after month, without interruption.
            </span>
          </div>
        </div>

      </Container>
    </section>
  );
}
window.Results = Results;