/* My Role / what I owned */

function Role() {
  return (
    <section id="role" style={{ background: "var(--page-fg)", color: "#F4EFDF" }}>
      <div className="wrap">
        <div className="section-head reveal in">
          <div className="num" style={{ color: "rgba(244,239,223,0.6)", borderTop: "1px solid rgba(244,239,223,0.3)" }}>08 — My role</div>
          <div>
            <div className="h-eyebrow" style={{ color: "var(--page-accent)", marginBottom: 16 }}>End-to-end ownership</div>
            <h2 className="h-section" style={{ color: "#F4EFDF" }}>I drove this project from concept to working car.</h2>
            <p className="lede" style={{ color: "rgba(244,239,223,0.8)", marginTop: 24 }}>
              The work spanned design, concept development, and implementation.
              I combined UX research and design with system architecture and
              development to turn the idea into a functioning, in-vehicle
              prototype evaluated with real drivers.
            </p>
          </div>
        </div>

        <div className="role-grid">
          <RoleCard k="UX Research" items={["Expert interviews (n=7)", "Heuristic eval (n=4)", "User study (n=30)", "UEQ+, NASA TLX, custom"]}/>
          <RoleCard k="Concept & UX" items={["System architecture", "Atomic UI library (31)", "Voice assistant flow", "Design recommendations"]}/>
          <RoleCard k="Engineering" items={["React frontend", "Python LLM backend", "Voice integration", "In-car deployment"]}/>
          <RoleCard k="Eval & Synthesis" items={["A/B study design", "Statistical analysis", "Open-ended coding", "Final recommendations"]}/>
        </div>

        {/* Outcomes ribbon */}
        <div className="outcomes">
          {[
            ["Functional GUI system", "Two-way natural voice interaction"],
            ["Empirical data", "Across 9 UX & safety variables"],
            ["Design recommendations", "For future generative-UI systems"],
          ].map(([k, v]) => (
            <div key={k} className="outcome">
              <div style={{ fontSize: 16, fontWeight: 600 }}>{k}</div>
              <div style={{ fontSize: 13, color: "rgba(244,239,223,0.6)", marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .role-grid {
          display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
          margin-bottom: 48px;
        }
        @media (max-width: 880px) { .role-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 480px) { .role-grid { grid-template-columns: 1fr; } }
        .outcomes {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
          padding: 32px 0; border-top: 1px solid rgba(244,239,223,0.15);
          border-bottom: 1px solid rgba(244,239,223,0.15);
        }
        .outcome { padding: 0 24px; border-right: 1px solid rgba(244,239,223,0.1); }
        .outcome:last-child { border-right: 0; }
        .outcome:first-child { padding-left: 0; }
        @media (max-width: 720px) {
          .outcomes { grid-template-columns: 1fr; gap: 24px; }
          .outcome { border-right: 0; padding: 0; border-bottom: 1px solid rgba(244,239,223,0.1); padding-bottom: 16px; }
          .outcome:last-child { border-bottom: 0; }
        }
      `}</style>
    </section>
  );
}

function RoleCard({ k, items }) {
  return (
    <div style={{
      padding: 20, borderRadius: 12,
      border: "1px solid rgba(244,239,223,0.12)",
      background: "rgba(244,239,223,0.03)",
    }}>
      <div className="h-eyebrow" style={{ color: "var(--page-accent)", marginBottom: 12 }}>{k}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 6 }}>
        {items.map(x => (
          <li key={x} style={{ fontSize: 13, color: "rgba(244,239,223,0.85)", paddingTop: 6, borderTop: "1px solid rgba(244,239,223,0.08)" }}>{x}</li>
        ))}
      </ul>
    </div>
  );
}

window.Role = Role;