// About — How We Started + The Team

const About = () => {
  return (
    <section className="r-about" style={{ background: "var(--paper)", padding: "120px 0" }}>
      <div className="container">
        <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
          <SectionEyebrow index="(07)" label={copyText("home.about.eyebrow")} />
          <p className="display" style={{
            fontSize: "clamp(34px, 4.6vw, 52px)",
            margin: 0,
            marginTop: 24,
            letterSpacing: "-0.025em",
            lineHeight: 1.1,
            fontWeight: 500,
          }}>
            {copyText("home.about.statement_pre")}<span style={{ fontStyle: "italic", color: "var(--blue)", position: "relative", display: "inline-block", whiteSpace: "nowrap" }}>
              {copyText("home.about.statement_accent")}
              <SketchUnderline strokeWidth={3} color="#1AA5F5" style={{ position: "absolute", left: 0, bottom: "-0.12em", width: "100%", height: "0.22em" }} />
            </span>{copyText("home.about.statement_post")}
          </p>
        </div>

        <div className="r-grid-about-cards" style={{ marginTop: 80, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }}>
          <AboutCard
            kicker={copyText("home.about.card1_kicker")}
            title={copyText("home.about.card1_title")}
            body={copyText("home.about.card1_body")}
            icon={<IconSpark size={64} />}
            href="Subpages.html#history"
          />
          <AboutCard
            kicker={copyText("home.about.card2_kicker")}
            title={copyText("home.about.card2_title")}
            body={copyText("home.about.card2_body")}
            icon={<IconNetwork size={64} />}
            href="Subpages.html#leadership"
          />
        </div>
      </div>
    </section>
  );
};

const AboutCard = ({ kicker, title, body, icon, href }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={() => { if (href) window.location.href = href; }}
      style={{
        background: "transparent",
        border: "none",
        padding: "8px 0",
        minHeight: 320,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        textAlign: "center",
        position: "relative",
        cursor: href ? "pointer" : "default",
      }}
    >
      {icon && <div style={{ color: "var(--ink)" }}>{icon}</div>}
      <h3 className="display" style={{
        fontSize: 36, letterSpacing: "-0.025em", lineHeight: 1.05, fontWeight: 700,
        margin: "20px 0 24px",
      }}>{title}</h3>
      <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink)", margin: 0, maxWidth: 520, letterSpacing: "-0.005em" }}>{body}</p>
      <div style={{ marginTop: "auto", paddingTop: 32, display: "flex", alignItems: "center", gap: 10, color: hover ? "var(--blue)" : "var(--ink)", transition: "color .2s ease" }}>
        <span className="mono">Read more</span>
        <ArrowRight size={14} />
      </div>
    </article>
  );
};

window.About = About;