/* Why HCAI — three columns: Human Centered · AI · Academy */
const WhyHCAI = () => {
  const { isMobile } = useViewport();
  const cols = [
    {
      kicker: "Human Centered",
      body: "Human Centered Design places people at the heart of every decision. We build AI systems for human needs — not the other way around. We start with your team. Not the tool.",
      tag: "People-first AI adoption.",
    },
    {
      kicker: "AI",
      body: "The full spectrum: using AI tools (prompting), working with AI (monitoring), building with AI (agentic design). Not just one tool. The whole capability ladder — every level of AI fluency.",
      tag: "Every level of AI fluency.",
    },
    {
      kicker: "Academy",
      body: "Structured, evidence-based learning grounded in human factors science. Progressive scaffolding that builds real capability — not a vendor demo you forget the next day.",
      tag: "Skills that stick beyond the room.",
    },
  ];

  const wrap = {
    padding: isMobile ? "72px 0 80px" : "120px 0 140px",
    borderTop: "1px solid var(--rule)",
    position: "relative",
  };
  const container = { maxWidth: 1440, margin: "0 auto", padding: isMobile ? "0 20px" : "0 56px" };
  const head = { maxWidth: 920, marginBottom: isMobile ? 48 : 88 };
  const grid = {
    display: "grid",
    gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)",
    gap: 0,
    borderTop: "1px solid var(--rule-2)",
  };
  const cell = (i) => ({
    padding: isMobile ? "32px 0" : "44px 36px 40px",
    borderRight: !isMobile && i < 2 ? "1px solid var(--rule)" : "none",
    borderBottom: isMobile && i < 2 ? "1px solid var(--rule)" : "none",
    display: "flex",
    flexDirection: "column",
    gap: isMobile ? 20 : 28,
    minHeight: isMobile ? "auto" : 360,
    position: "relative",
  });
  const idx = {
    fontFamily: "var(--mono)", fontSize: 11,
    letterSpacing: "0.22em", color: "var(--ink-3)",
  };
  const titleSerif = {
    fontFamily: "var(--serif)",
    fontStyle: "italic",
    fontSize: isMobile ? 36 : 44,
    lineHeight: 1.0,
    letterSpacing: "-0.02em",
    color: "var(--ink)",
    margin: 0,
  };
  const titleMono = {
    fontFamily: "var(--mono)",
    fontSize: isMobile ? 32 : 40,
    lineHeight: 1.0,
    letterSpacing: "-0.02em",
    textTransform: "uppercase",
    color: "var(--ink)",
    margin: 0,
  };
  const body = { fontSize: 15, lineHeight: 1.6, color: "var(--ink-2)", textWrap: "pretty" };
  const tag = {
    marginTop: isMobile ? 8 : "auto",
    paddingTop: isMobile ? 16 : 24,
    borderTop: "1px solid var(--rule)",
    fontFamily: "var(--serif)",
    fontStyle: "italic",
    fontSize: 17,
    color: "var(--lav-1)",
    lineHeight: 1.4,
  };

  const footer = {
    textAlign: "center",
    marginTop: isMobile ? 48 : 80,
    fontFamily: "var(--serif)",
    fontStyle: "italic",
    fontSize: isMobile ? 17 : 22,
    lineHeight: 1.5,
    color: "var(--ink-2)",
    maxWidth: 820,
    marginLeft: "auto",
    marginRight: "auto",
    textWrap: "balance",
  };

  return (
    <section id="why" style={wrap} data-screen-label="03 Why HCAI">
      <div style={container}>
        <div style={head}>
          <div className="eyebrow">— Our Philosophy</div>
          <h2 style={{
            fontFamily: "var(--serif)",
            fontSize: isMobile ? 40 : 72,
            lineHeight: 1.0,
            letterSpacing: "-0.02em",
            margin: "20px 0 0",
            textWrap: "balance",
          }}>
            Why Human Centered <em style={{ fontStyle: "italic", color: "var(--lav-1)" }}>AI</em> Academy?
          </h2>
        </div>

        <div style={grid}>
          {cols.map((c, i) => (
            <div key={c.kicker} style={cell(i)}>
              <div style={idx}>0{i+1} / 03</div>
              {c.kicker === "AI" ? (
                <h3 style={titleMono}>A<span style={{
                  display: "inline-block", width: 12, height: 12, borderRadius: "50%",
                  background: "radial-gradient(circle at 35% 30%, #f0ecff, #cfc7ff 55%, #8a6fc8)",
                  boxShadow: "0 0 14px rgba(184,168,255,0.65)",
                  margin: "0 4px",
                  verticalAlign: "middle",
                }}></span>I</h3>
              ) : (
                <h3 style={titleSerif}>{c.kicker}<span style={{ color: "var(--lav-1)" }}>.</span></h3>
              )}
              <p style={body}>{c.body}</p>
              <div style={tag}>{c.tag}</div>
            </div>
          ))}
        </div>

        <p style={footer}>
          Sitting at the intersection of <span style={{ color: "var(--ink)" }}>Human Factors science</span>, <span style={{ color: "var(--ink)" }}>AI capability</span>, and <span style={{ color: "var(--ink)" }}>evidence-based learning design</span>.
        </p>
      </div>
    </section>
  );
};

window.WhyHCAI = WhyHCAI;