/* Learnings & Recommendations */

function Learnings() {
  const recs = [
    {
      k: "Bound the AI design space",
      desc: "Don't let an AI freely generate elements or code. Generative reasoning should operate on a validated component library that complies with established design and safety guidelines, limiting interface states to a controlled space.",
    },
    {
      k: "Preserve a stable spatial grammar",
      desc: "Even when interfaces adapt dynamically, certain spatial structures should remain stable to support glanceability and learnability. Restrict generative assembly to predefined regions.",
    },
    {
      k: "Separate reasoning from rendering",
      desc: "LLM output should not be rendered directly. Producing structured configuration data interpreted by a deterministic rendering layer prevents malformed output and ensures only valid states reach the user.",
    },
    {
      k: "Constrain agent autonomy through safety policies",
      desc: "In safety-critical domains, generative systems must operate under explicit constraints derived from domain guidelines. Embed these constraints in the system prompt and rendering logic.",
    },
  ]

  return (
    <section id="learnings">
      <div className="wrap">
        <SectionHead
          num="07 — Recommendations"
          eyebrow="What I'd tell a team building this"
          title="A hybrid strategy is the practical takeaway."
        >
          <p className="lede">
            AI showed strong capabilities in assembling and generating UI on the
            fly. But high variation in the output can compromise trust and
            safety. The pragmatic answer is hybrid:{" "}
            <strong>designers retain control of critical components</strong>,
            while AI handles non-critical, supplementary information that
            benefits from being personalised.
          </p>
        </SectionHead>

        {/* Hybrid diagram */}
        <div className="hybrid">
          <div className="hybrid-half">
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-fg)", marginBottom: 8 }}
            >
              Designer-controlled
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>
              Critical components
            </div>
            <ul
              style={{
                paddingLeft: 0,
                listStyle: "none",
                margin: 0,
                display: "grid",
                gap: 6,
                fontSize: 14,
              }}
            >
              {[
                "Navigation",
                "Speed & alerts",
                "Vehicle status",
                "Predictable placement",
              ].map((x) => (
                <li key={x} style={{ display: "flex", gap: 8 }}>
                  <Icon.Check
                    style={{
                      color: "var(--page-fg)",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />{" "}
                  <span>{x}</span>
                </li>
              ))}
            </ul>
          </div>
          <div className="hybrid-divider">
            <div className="hybrid-divider-line" />
          </div>
          <div className="hybrid-half hybrid-ai">
            <div
              className="h-eyebrow"
              style={{ color: "var(--page-accent)", marginBottom: 8 }}
            >
              AI-assembled
            </div>
            <div style={{ fontSize: 18, fontWeight: 600, marginBottom: 12 }}>
              Supplementary, contextual
            </div>
            <ul
              style={{
                paddingLeft: 0,
                listStyle: "none",
                margin: 0,
                display: "grid",
                gap: 6,
                fontSize: 14,
              }}
            >
              {[
                "Recommendations",
                "Comfort widgets",
                "Contextual hints",
                "Personalised content",
              ].map((x) => (
                <li key={x} style={{ display: "flex", gap: 8 }}>
                  <Icon.Plus
                    style={{
                      color: "var(--page-accent)",
                      flexShrink: 0,
                      marginTop: 2,
                    }}
                  />{" "}
                  <span>{x}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        {/* Recommendations */}
        <div className="recs">
          {recs.map((r, i) => (
            <RecCard key={r.k} num={i + 1} k={r.k} desc={r.desc} />
          ))}
        </div>
      </div>

      <style>{`
        .hybrid {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          gap: 0;
          background: var(--page-card);
          border: 1px solid var(--page-line);
          border-radius: 16px;
          overflow: hidden;
          margin-bottom: 48px;
        }
        .hybrid-half { padding: 32px; }
        .hybrid-ai { background: rgba(224,123,44,0.05); }
        .hybrid-divider { width: 1px; background: var(--page-line); position: relative; }
        @media (max-width: 720px) {
          .hybrid { grid-template-columns: 1fr; }
          .hybrid-divider { width: 100%; height: 1px; }
        }
        .recs {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        @media (max-width: 720px) { .recs { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  )
}

// function RecCard({ num, k, desc }) {
//   const ref = useReveal(0.2);
//   const [open, setOpen] = useState(false);
//   return (
//     <div ref={ref} className="card reveal" style={{ background: "var(--page-card)", padding: 24, cursor: "pointer", transition: "border-color 200ms" }}
//       onClick={() => setOpen(o => !o)} onMouseEnter={(e) => e.currentTarget.style.borderColor = "var(--page-accent)"} onMouseLeave={(e) => e.currentTarget.style.borderColor = "var(--page-line)"}>
//       <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 16 }}>
//         <div>
//           <div className="mono" style={{ fontSize: 11, color: "var(--page-accent)", marginBottom: 8 }}>R{String(num).padStart(2,"0")}</div>
//           <div style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.3 }}>{k}</div>
//         </div>
//         <button style={{
//           width: 32, height: 32, borderRadius: 999,
//           border: "1px solid var(--page-line)", background: "var(--page-bg)",
//           display: "flex", alignItems: "center", justifyContent: "center",
//           flexShrink: 0, cursor: "pointer",
//           transform: open ? "rotate(45deg)" : "rotate(0)", transition: "transform 250ms",
//         }}><Icon.Plus/></button>
//       </div>
//       <div style={{
//         marginTop: open ? 16 : 0,
//         maxHeight: open ? 400 : 0,
//         opacity: open ? 1 : 0,
//         overflow: "hidden",
//         transition: "max-height 350ms cubic-bezier(.2,0,0,1), opacity 250ms, margin-top 350ms",
//         fontSize: 14, lineHeight: 1.55, color: "var(--page-muted)",
//       }}>{desc}</div>
//     </div>
//   );
// }

function RecCard({ num, k, desc }) {
  const ref = useReveal(0.2)

  return (
    <div
      ref={ref}
      className="card reveal"
      style={{
        background: "var(--page-card)",
        padding: 24,
        transition: "border-color 200ms",
      }}
      onMouseEnter={(e) =>
        (e.currentTarget.style.borderColor = "var(--page-accent)")
      }
      onMouseLeave={(e) =>
        (e.currentTarget.style.borderColor = "var(--page-line)")
      }
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          gap: 16,
        }}
      >
        <div>
          <div
            className="mono"
            style={{
              fontSize: 11,
              color: "var(--page-accent)",
              marginBottom: 8,
            }}
          >
            Recommendation {String(num).padStart(2, "0")}
          </div>
          <div style={{ fontSize: 18, fontWeight: 600, lineHeight: 1.3 }}>
            {k}
          </div>
        </div>
      </div>

      {/* Always visible description */}
      <div
        style={{
          marginTop: 16,
          fontSize: 14,
          lineHeight: 1.55,
          color: "var(--page-muted)",
        }}
      >
        {desc}
      </div>
    </div>
  )
}

window.Learnings = Learnings