/* CGI / Federal Statistical Office case study — content sections.
   A national business-register platform, via CGI.
   Uses shared utilities from case-study/util.jsx (loaded before this file). */

/* Reveal wrapper */
function CgiRv({ children, delay }) {
  const ref = useReveal()
  return (
    <div
      className="reveal"
      ref={ref}
      style={delay ? { transitionDelay: delay + "ms" } : {}}
    >
      {children}
    </div>
  )
}

/* Body: indented content column (aligns under the section-head number) */
function CgiBody({ children, style }) {
  return (
    <div
      className="section-head"
      style={{ marginBottom: 0, marginTop: 8, ...style }}
    >
      <div />
      <div style={{ maxWidth: "72ch" }}>{children}</div>
    </div>
  )
}

/* Para: standard body paragraph */
function CgiPara({ children, style }) {
  return (
    <p
      style={Object.assign(
        {
          fontSize: 17,
          lineHeight: 1.7,
          color: "#4a4a4a",
          maxWidth: "68ch",
          margin: "0 0 20px",
          textWrap: "pretty",
        },
        style || {},
      )}
    >
      {children}
    </p>
  )
}

/* Bulleted list — small accent marker */
function CgiBullets({ items, columns }) {
  columns = columns || 1
  return (
    <ul
      style={{
        listStyle: "none",
        margin: 0,
        padding: 0,
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: "14px 40px",
      }}
    >
      {items.map((it, i) => (
        <li
          key={i}
          style={{
            display: "grid",
            gridTemplateColumns: "18px 1fr",
            gap: 12,
            alignItems: "baseline",
            fontSize: 16.5,
            lineHeight: 1.55,
            color: "#4a4a4a",
          }}
        >
          <span
            style={{
              color: "var(--page-accent)",
              fontFamily: "var(--font-display)",
              fontStyle: "normal",
              fontSize: 20,
            }}
          >
            •
          </span>
          <span style={{ textWrap: "pretty" }}>{it}</span>
        </li>
      ))}
    </ul>
  )
}

/* Diagram slot — styled figure container for self-made SVGs.
   Drop a `src` once a diagram is ready; until then it renders a placeholder. */
function CgiDiagram({ label, desc, caption, ratio, src, alt }) {
  const slotStyle = {
    width: "100%",
    aspectRatio: ratio || "16 / 9",
    minHeight: "unset",
  }
  return (
    <figure style={{ margin: "32px 0 0" }}>
      <CgiRv>
        {src ? (
          <img
            src={src}
            alt={alt || label || ""}
            style={{
              width: "100%",
              aspectRatio: ratio || "16 / 9",
              objectFit: "contain",
              borderRadius: 12,
              display: "block",
              border: "1px solid var(--page-line)",
              background: "var(--page-card)",
            }}
          />
        ) : (
          <Placeholder
            label={label || "Diagram"}
            desc={desc}
            style={slotStyle}
          />
        )}
        {caption && (
          <figcaption
            style={{
              marginTop: 14,
              fontSize: 13.5,
              lineHeight: 1.5,
              color: "var(--page-muted)",
              fontStyle: "normal",
              fontFamily: "var(--font-display)",
              letterSpacing: "0.01em",
            }}
          >
            {caption}
          </figcaption>
        )}
      </CgiRv>
    </figure>
  )
}

/* ============================================================
   Confidentiality note — sits right under the hero
   ============================================================ */
function CgiIntro() {
  return (
    <section
      style={{
        background: "url(grain.png)",
        backgroundSize: "500px",
        backgroundColor: "var(--page-bg)",
      }}
    >
      <div className="wrap">
        <CgiRv>
          <div
            className="h-eyebrow"
            style={{ color: "var(--page-accent)", marginBottom: 16 }}
          >
            A note on this case study
          </div>
          <div
            className="card"
            style={{
              padding: 28,
              background: "var(--page-fg)",
              backgroundImage:
                "url('/dots_background.png'), url('/noise-light.png')",
              backgroundSize: "170px",
              backgroundRepeat: "repeat",
              backgroundColor: "var(--page-dark)",
              borderColor: "transparent",
            }}
          >
            <p
              style={{
                fontFamily: "var(--font-sans)",
                lineHeight: 1.6,
                color: "#F4EFDF",
                margin: 0,
                textWrap: "pretty",
              }}
            >
              This was a confidential internal government system. No screens or
              proprietory details are available. The below information focuses
              on the problem, the constraints, and the decisions.
            </p>
          </div>
        </CgiRv>
      </div>
    </section>
  )
}

/* ============================================================
   Role map diagram — hub-and-spoke SVG showing Akshil's position
   as the connector between users, architecture, frontend, and
   the external accessibility auditor inside a SAFe programme.
   ============================================================ */
function CgiRoleMap() {
  const accent = "#c37e70"
  const cream = "rgba(244,239,223,0.92)"
  const dim = "rgba(244,239,223,0.42)"
  const dimmer = "rgba(244,239,223,0.20)"
  const nodeBg = "rgba(244,239,223,0.05)"
  const nodeBdr = "rgba(244,239,223,0.14)"
  const hubBg = "rgba(195,126,112,0.14)"
  const mono = "var(--font-mono)"

  return (
    <figure style={{ margin: "32px 0 0" }}>
      <div
        style={{
          borderRadius: 14,
          overflow: "hidden",
          border: "1px solid rgba(244,239,223,0.1)",
          background: "#0e0e0e",
          backgroundImage: "url(/dots_background.png), url(/noise-light.png)",
          backgroundSize: "170px",
          backgroundRepeat: "repeat",
        }}
      >
        <svg viewBox="0 0 900 530" style={{ width: "100%", display: "block" }}>
          <defs>
            <marker
              id="rm-a"
              viewBox="0 0 10 10"
              refX="8"
              refY="5"
              markerWidth="5"
              markerHeight="5"
              orient="auto"
            >
              <path d="M 0 1 L 9 5 L 0 9 z" fill={accent} />
            </marker>
            <marker
              id="rm-d"
              viewBox="0 0 10 10"
              refX="8"
              refY="5"
              markerWidth="5"
              markerHeight="5"
              orient="auto"
            >
              <path d="M 0 1 L 9 5 L 0 9 z" fill={dimmer} />
            </marker>
          </defs>

          {/* SAFe outer dashed border */}
          <rect
            x="12"
            y="12"
            width="876"
            height="506"
            rx="12"
            fill="none"
            stroke="rgba(244,239,223,0.07)"
            strokeWidth="1"
            strokeDasharray="6 3"
          />
          <text
            x="24"
            y="33"
            fontFamily={mono}
            fontSize="9.5"
            letterSpacing="0.09em"
            fill="rgba(244,239,223,0.25)"
          >
            SAFE AGILE · PI PLANNING · 2-WEEK SPRINTS · ~60 PEOPLE
          </text>

          {/* ── Fachbereich Users ── rect(325,55,250,68) bottom=123 */}
          <rect
            x="325"
            y="55"
            width="250"
            height="68"
            rx="10"
            fill={nodeBg}
            stroke={nodeBdr}
            strokeWidth="1"
          />
          <text
            x="450"
            y="82"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="12"
            fontWeight="600"
            fill={cream}
          >
            Fachbereich Users
          </text>
          <text
            x="450"
            y="100"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.07em"
            fill={dim}
          >
            5–6 PRODUCT OWNERS &amp; SPECIALISTS
          </text>

          {/* ── Akshil — central hub ── rect(308,228,284,84) top=228 bot=312 */}
          <rect
            x="308"
            y="228"
            width="284"
            height="84"
            rx="12"
            fill={hubBg}
            stroke={accent}
            strokeWidth="1.5"
          />
          <text
            x="450"
            y="256"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="12"
            fontWeight="700"
            fill={accent}
          >
            Akshil (Me) — UI/UX Designer
          </text>
          <text
            x="450"
            y="273"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.06em"
            fill={dim}
          >
            SOLE FULL-TIME UX ACROSS THE PROGRAMME
          </text>
          <text
            x="450"
            y="289"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.06em"
            fill={dim}
          >
            HI-FI SCREENS · JIRA EPICS/STORIES · ABSTIMMUNGEN
          </text>

          {/* ── Software Architecture ── rect(52,396,210,68) */}
          <rect
            x="52"
            y="396"
            width="210"
            height="68"
            rx="10"
            fill={nodeBg}
            stroke={nodeBdr}
            strokeWidth="1"
          />
          <text
            x="157"
            y="422"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="12"
            fontWeight="600"
            fill={cream}
          >
            Software Architecture
          </text>
          <text
            x="157"
            y="440"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.07em"
            fill={dim}
          >
            CONSTRAINTS · FEASIBILITY
          </text>

          {/* ── Frontend Team ── rect(358,396,184,68) */}
          <rect
            x="358"
            y="396"
            width="184"
            height="68"
            rx="10"
            fill={nodeBg}
            stroke={nodeBdr}
            strokeWidth="1"
          />
          <text
            x="450"
            y="422"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="12"
            fontWeight="600"
            fill={cream}
          >
            Frontend Team
          </text>
          <text
            x="450"
            y="440"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.07em"
            fill={dim}
          >
            IMPLEMENTATION
          </text>

          {/* ── Accessibility Auditor ── rect(638,238,214,68) left=638 */}
          <rect
            x="638"
            y="238"
            width="214"
            height="68"
            rx="10"
            fill={nodeBg}
            stroke={nodeBdr}
            strokeWidth="1"
          />
          <text
            x="745"
            y="265"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="12"
            fontWeight="600"
            fill={cream}
          >
            Accessibility Auditor
          </text>
          <text
            x="745"
            y="283"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.07em"
            fill={dim}
          >
            EXTERNAL · WCAG / BITV
          </text>

          {/* ─── Arrows ─── */}

          {/* Users → Akshil: left lane down (interviews / requirements) */}
          <path
            d="M 421 123 L 421 228"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          {/* Akshil → Users: right lane up (prototypes / testing) */}
          <path
            d="M 479 228 L 479 123"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          {/* Labels: left of left-lane / right of right-lane */}
          <text
            x="410"
            y="175"
            textAnchor="end"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            INTERVIEWS ·
          </text>
          <text
            x="410"
            y="188"
            textAnchor="end"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            REQUIREMENTS
          </text>
          <text
            x="490"
            y="175"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            · PROTOTYPES
          </text>
          <text
            x="490"
            y="188"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            USABILITY TESTING
          </text>

          {/* Akshil → Architecture: curved diagonal (solid orange) */}
          <path
            d="M 348 312 C 330 354, 240 372, 215 396"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          {/* Architecture → Akshil: offset return curve (dim dashed) */}
          <path
            d="M 207 396 C 196 364, 326 350, 337 312"
            stroke={dimmer}
            strokeWidth="1.5"
            fill="none"
            strokeDasharray="4 3"
            markerEnd="url(#rm-d)"
          />
          {/* Labels between the two curves */}
          <text
            x="258"
            y="354"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            DESIGN SPECS
          </text>
          <text
            x="246"
            y="368"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dimmer}
          >
            TECH CONSTRAINTS
          </text>

          {/* Akshil → Frontend: left lane down (solid orange) */}
          <path
            d="M 436 312 L 436 396"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          {/* Frontend → Akshil: right lane up (dim dashed) */}
          <path
            d="M 456 396 L 456 312"
            stroke={dimmer}
            strokeWidth="1.5"
            fill="none"
            strokeDasharray="4 3"
            markerEnd="url(#rm-d)"
          />
          <text
            x="424"
            y="358"
            textAnchor="end"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            HANDOFF
          </text>
          <text
            x="468"
            y="358"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dimmer}
          >
            FEEDBACK
          </text>

          {/* Akshil → Accessibility: upper right (solid orange) */}
          <path
            d="M 592 260 L 638 260"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          {/* Accessibility → Akshil: lower return (solid orange) */}
          <path
            d="M 638 282 L 592 282"
            stroke={accent}
            strokeWidth="1.5"
            fill="none"
            markerEnd="url(#rm-a)"
          />
          <text
            x="615"
            y="250"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            COORDINATION
          </text>
          <text
            x="615"
            y="298"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="8.5"
            letterSpacing="0.05em"
            fill={dim}
          >
            WCAG AUDITS
          </text>

          {/* ── Deliverables strip ── */}
          <rect
            x="52"
            y="478"
            width="796"
            height="26"
            rx="6"
            fill="rgba(244,239,223,0.03)"
            stroke="rgba(244,239,223,0.06)"
            strokeWidth="1"
          />
          <text
            x="450"
            y="496"
            textAnchor="middle"
            fontFamily={mono}
            fontSize="9"
            letterSpacing="0.06em"
            fill="rgba(244,239,223,0.32)"
          >
            OUTPUTS → Hi-fi screens &amp; prototypes · Jira epics &amp; stories
            · Accessibility specs · Abstimmungen
          </text>
        </svg>
      </div>
      {/* <figcaption style={{
        marginTop: 14,
        fontSize: 13,
        lineHeight: 1.5,
        color: "var(--page-muted)",
        fontStyle: "normal",
        fontFamily: "var(--font-display)",
        letterSpacing: "0.01em",
      }}>
        Role &amp; communication map — Akshil as the central connector between Fachbereich user needs and technical delivery, within a ~60-person SAFe programme.
      </figcaption> */}
    </figure>
  )
}

/* ============================================================
   The setup
   ============================================================ */
const CORE_DUTIES = [
  "Conception of new features",
  "Research via interviews, usability testing, and discovery sessions",
  "Wireframes and hi-fidelity UI prototypes; design system in Axure RP (migrated to Figma at a later stage)",
  "Advocating for end-users and coordinating between cross-functional teams",
  "Ensuring web accessibility",
  "Contributing towards writing and managing features and user stories on Jira, and maintaining documentation on Confluence",
]

function SetupSection() {
  return (
    <section
      id="setup"
      style={{
        background: "var(--page-card)",
        borderTop: "1px solid var(--page-line)",
        borderBottom: "1px solid var(--page-line)",
      }}
    >
      <div className="wrap">
        <SectionHead num="01 — Setup" title="The setup" />
        <CgiBody>
          <CgiPara>
            60+ people divided into different cross-functional teams
            (multi-vendor) under the SAFe framework.
          </CgiPara>
          <CgiPara style={{ marginBottom: 20 }}>Core duties:</CgiPara>
          <CgiBullets items={CORE_DUTIES} />
          <CgiDiagram
            src="/cgi_stakeholders.png"
            alt="Regular stakeholder communication map — Akshil at the centre, connecting to Product Owners, System Users, Software Architecture, Accessibility Expert, and FE/BE Dev Teams."
            ratio="2834 / 1763"
          />
        </CgiBody>
      </div>
    </section>
  )
}

/* Sub-heading — topic divider inside a multi-topic section */
function CgiSubHead({ children, style }) {
  return (
    <h3
      style={Object.assign(
        {
          fontFamily: "var(--font-display)",
          fontWeight: 400,
          fontSize: 26,
          lineHeight: 1.2,
          letterSpacing: "-0.01em",
          color: "var(--page-fg)",
          margin: "0 0 16px",
          textWrap: "pretty",
        },
        style || {},
      )}
    >
      {children}
    </h3>
  )
}

/* ============================================================
   In a nutshell — condensed constraints, data, and features
   ============================================================ */
function NutshellSection() {
  return (
    <section
      id="nutshell"
      style={{
        background: "url(grain.png)",
        backgroundSize: "500px",
        backgroundColor: "var(--page-bg)",
      }}
    >
      <div className="wrap">
        <SectionHead num="02 — In a nutshell" title="In a nutshell" />
        <CgiBody>
          <CgiSubHead>Constraints I designed within</CgiSubHead>
          <CgiPara>
            Accessibility was a legal requirement. As a public-sector system, it
            had to meet WCAG and BITV standards. It was thought of from the very
            first wireframes and kept throughout the whole process. I extended
            my own WCAG knowledge, at the same time working with an
            accessibility specialist on a weekly basis.
          </CgiPara>
          <CgiPara style={{ marginBottom: 40 }}>
            I was in regular communication with the software architects. Design
            decisions had to line up with what was technically possible and what
            could be delivered in time. As features were conceptualised, my role
            was to discuss them and work through their feasibility together. The
            tricky part was that the architecture had been built about six
            months before the project even started, so the architects were
            naturally quite invested in it and hesitant about features requiring
            bigger structural changes. So a lot of my job was navigating that,
            understanding what could realistically be changed and what couldn't,
            and advocating for the user need while finding solutions that worked
            within what they'd already built. Every sprint needed to be balanced
            between where to push for a better UX and where to simplify things
            to keep the MVP moving. The hard part was finding that balance
            without hurting usability or accessibility.
          </CgiPara>
          <CgiSubHead>Designing for messy, complex data</CgiSubHead>
          <CgiPara>
            The comprehensiveness and complexity of the data was another
            challenge. Registry records aren't always clean or consistent. We
            dealt with high amounts of data while addressing the cases where
            information is conflicting, such as duplicate addresses of the same
            company. It was important to provide the users a clear way to
            resolve such queries without losing important information.
            Principles such as traceability and progressive disclosure were
            important to address these challenges. The things people needed
            right away stayed in view, and the rest showed up as it became
            relevant. Depending on the area, that meant use of tabs, expandable
            sections, master-detail layouts, or drill-down from tables.
          </CgiPara>
          <CgiPara>
            RBAC(Role-based access control) was another important aspect and
            cases were assigned to individual staff to work on. This meant that
            absense of case workers needed to be taken into consideration, and a
            case needed to be able to move from one person to another. Which in
            turn also requires versioning history, so when a case changed hands,
            the record of who did what stayed intact.
          </CgiPara>
          <CgiPara>
            Every user was able to personalise their interface to suit their
            "style of working". For example, by saving their preferences of how
            table should be showed to them, font-sizes, and other visual and
            layout aspects.
          </CgiPara>
        </CgiBody>
      </div>
    </section>
  )
}

Object.assign(window, {
  CgiIntro,
  SetupSection,
  NutshellSection,
})
