// "What Makes Ignited Different" — bold stats marquee + two-column manifesto

const Different = () => {
  const stats = [
    { num: copyText("home.different.stat1_num"), unit: copyText("home.different.stat1_unit"), label: copyText("home.different.stat1_label") },
    { num: copyText("home.different.stat2_num"), unit: copyText("home.different.stat2_unit"), label: copyText("home.different.stat2_label") },
    { num: copyText("home.different.stat3_num"), unit: copyText("home.different.stat3_unit"), label: copyText("home.different.stat3_label") },
    { num: copyText("home.different.stat4_num"), unit: copyText("home.different.stat4_unit"), label: copyText("home.different.stat4_label") },
  ];

  return (
    <section id="about" className="r-different" style={{ background: "var(--ink)", color: "white", padding: "200px 0 96px" }}>
      <div className="container">
        <div className="r-section-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40 }}>
          <SectionEyebrow index="(02)" label={copyText("home.different.eyebrow")} color="var(--muted-on-dark)" />
          <div className="mono" style={{ color: "var(--muted-on-dark)" }}>{copyText("home.different.meta")}</div>
        </div>

        <h2 className="display r-h2-large" style={{
          fontSize: "clamp(40px, 5.8vw, 100px)",
          margin: 0,
          letterSpacing: "-0.035em",
          lineHeight: 0.92,
        }}>
          {copyText("home.different.headline_pre")} <span style={{ fontStyle: "italic", fontWeight: 500, color: "var(--blue)" }}>{copyText("home.different.headline_brand")}</span><br/>
          <span style={{ position: "relative", display: "inline-block" }}>
            {copyText("home.different.headline_accent")}
            <SketchUnderline strokeWidth={3} color="#1AA5F5" style={{ position: "absolute", left: 0, bottom: "-0.18em", width: "100%", height: "0.22em" }} />
          </span>
        </h2>

        <p style={{
          marginTop: 28,
          maxWidth: 820,
          fontSize: 20,
          lineHeight: 1.45,
          color: "var(--muted-on-dark)",
          letterSpacing: "-0.01em",
          fontWeight: 400,
        }}>
          {copyText("home.different.intro_pre")}<span style={{ color: "white" }}>{copyText("home.different.intro_emphasis")}</span>
        </p>

        {/* Stats row */}
        <div style={{ marginTop: 56, borderTop: "1px solid var(--rule-on-dark)" }}>
          <div className="r-grid-stats" style={{
            display: "grid",
            gridTemplateColumns: "repeat(4, 1fr)",
            borderBottom: "1px solid var(--rule-on-dark)",
          }}>
            {stats.map((s, i) => (
              <div key={i} style={{
                padding: "40px 28px 36px",
                borderRight: i < stats.length - 1 ? "1px solid var(--rule-on-dark)" : "none",
                display: "flex",
                flexDirection: "column",
                gap: 18,
                minHeight: 200,
                position: "relative",
              }}>
                <span className="mono" style={{ color: "var(--muted-on-dark)", position: "absolute", top: 18, right: 18 }}>
                  {String(i + 1).padStart(2, "0")}
                </span>
                <div className="display r-stat-num" style={{ fontSize: 88, lineHeight: 0.9, fontWeight: 700, letterSpacing: "-0.04em" }}>
                  <Counter value={s.num} duration={1600} />
                  {s.unit && <span style={{ fontSize: 28, marginLeft: 8, fontWeight: 500, letterSpacing: "-0.01em", verticalAlign: "top", display: "inline-block", paddingTop: 14 }}>{s.unit}</span>}
                </div>
                <div style={{ fontSize: 14, color: "var(--muted-on-dark)", letterSpacing: "-0.005em" }}>
                  {s.label}
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Two-column manifesto */}
        <div className="r-grid-manifesto" style={{ marginTop: 56, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64 }}>
          <ManifestoBlock
            icon="guide"
            heading={copyText("home.different.manifesto1_heading")}
            body={copyText("home.different.manifesto1_body")}
            tagline={copyText("home.different.manifesto1_tagline")}
          />
          <ManifestoBlock
            icon="independent"
            heading={copyText("home.different.manifesto2_heading")}
            body={copyText("home.different.manifesto2_body")}
            tagline={copyText("home.different.manifesto2_tagline")}
          />
        </div>
      </div>
    </section>
  );
};

const ManifestoBlock = ({ icon, heading, body, tagline }) => (
  <div className="r-manifesto" style={{
    border: "1px solid var(--rule-on-dark)",
    padding: "36px 36px 40px",
    position: "relative",
    background: "rgba(255,255,255,0.02)",
    color: "white",
  }}>
    <div style={{ marginBottom: 28, color: "white" }}>
      {icon === "guide" ? <IconCompass size={64} /> : <IconFlag size={64} />}
    </div>
    <h3 className="display" style={{
      fontSize: 36,
      letterSpacing: "-0.02em",
      lineHeight: 1.02,
      margin: 0,
      marginBottom: 24,
      fontWeight: 600,
      maxWidth: 460,
    }}>{heading}</h3>
    <p style={{ fontSize: 15, lineHeight: 1.55, color: "var(--muted-on-dark)", margin: 0, marginBottom: 24 }}>{body}</p>
    <div style={{ fontSize: 15, fontWeight: 500, letterSpacing: "-0.01em" }}>{tagline}</div>
  </div>
);

window.Different = Different;