/* Problem & Opportunity — split, two-column with quotes from interviews */

function Problem() {
  const ref = useReveal()
  return (
    <section id="problem" style={{ paddingTop: 120 }}>
      <div className="wrap">
        <SectionHead
          num="01 — Context"
          eyebrow="Problem & Opportunity"
          // title="Today's car interfaces are stuck on rails."
          title="Today's car interfaces are rigid by design."
        />

        <div
          ref={ref}
          className="reveal"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            gap: 32,
          }}
        >
          <div className="card" style={{ background: "var(--page-card)" }}>
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-warn)", marginBottom: 12 }}
            >
              The Problem
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.5, marginBottom: 16 }}>
              Modern in-car interfaces still rely on{" "}
              <strong>rule-based logic</strong> and predefined scenarios.
              Real-time context, user state, and adaptability are largely
              underutilized, making the experience rigid, hard to scale, and
              costly to maintain.
            </p>
            <ul style={{ paddingLeft: 0, listStyle: "none", margin: 0 }}>
              {[
                "Functions split across menus → user frustration & confusion",
                "Adaptive features built on deterministic rules",
                "Each new use-case requires manual design + dev work",
              ].map((t) => (
                <li
                  key={t}
                  style={{
                    display: "flex",
                    gap: 10,
                    padding: "10px 0",
                    borderTop: "1px solid var(--page-line)",
                    fontSize: 15,
                  }}
                >
                  <span style={{ color: "var(--page-warn)", flexShrink: 0 }}>
                    —
                  </span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>

          <div
            className="card"
            style={{
              background: "var(--page-fg)",
              color: "#F4EFDF",
              border: "1px solid var(--page-fg)",
            }}
          >
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-accent)", marginBottom: 12 }}
            >
              The Opportunity
            </div>
            <p
              style={{
                fontSize: 18,
                lineHeight: 1.5,
                marginBottom: 16,
                color: "rgba(244,239,223,0.92)",
              }}
            >
              Recent advances in AI make it possible to{" "}
              <strong style={{ color: "#F4EFDF" }}>
                generate UI dynamically
              </strong>{" "}
              from real-time context and user state, reducing the dependency on
              predefined use-cases and lowering design + development effort
              significantly.
            </p>
            <ul style={{ paddingLeft: 0, listStyle: "none", margin: 0 }}>
              {[
                "Adaptive, personalized interaction models",
                "Use-case-independent experiences",
                "Industry already moving toward \u201cuse-case-less\u201d design",
              ].map((t) => (
                <li
                  key={t}
                  style={{
                    display: "flex",
                    gap: 10,
                    padding: "10px 0",
                    borderTop: "1px solid rgba(244,239,223,0.15)",
                    fontSize: 15,
                    color: "rgba(244,239,223,0.92)",
                  }}
                >
                  <span style={{ color: "var(--page-accent)", flexShrink: 0 }}>
                    +
                  </span>
                  <span>{t}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Solution statement */}
        <div
          style={{
            marginTop: 48,
            padding: "40px 0",
            borderTop: "1px solid var(--page-line-strong)",
            borderBottom: "1px solid var(--page-line-strong)",
          }}
        >
          <div className="h-eyebrow" style={{ marginBottom: 16 }}>
            The Solution
          </div>
          <p
            style={{
              fontFamily: "var(--font-display)",
              fontStyle: "italic",
              fontWeight: 400,
              fontSize: "clamp(28px, 3.4vw, 44px)",
              lineHeight: 1.15,
              letterSpacing: "-0.02em",
              margin: 0,
              maxWidth: "50ch",
            }}
          >
            An AI-native framework that{" "}
            <span style={{ color: "var(--page-accent)" }}>
              assembles infotainment UIs in real time
            </span>{" "}
            from pre-validated components, guided by context and bounded by
            safety.
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          #problem .card + .card,
          #problem [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  )
}

window.Problem = Problem