/* How we design — dedicated design-practice page.
   Principles → process steps → Figma-centered toolchain → app examples. */

const DESIGN_PRINCIPLES = [
  {
    num: "01",
    title: "Design sits next to engineering",
    body: "Our designers and engineers share a standup, not a ticket queue. Every screen drawn in Figma is reviewed by the person who will build it — before it's final, not after.",
  },
  {
    num: "02",
    title: "Real content or no content",
    body: "No lorem ipsum, no perfect names that all happen to be short. We design with production data: long Arabic names, 9-digit balances, empty states, error states, offline states.",
  },
  {
    num: "03",
    title: "Arabic-first, not Arabic-also",
    body: "RTL is designed as a mirror from the first wireframe — typography, iconography and motion tuned for both scripts. If it only works in English, it doesn't work.",
  },
  {
    num: "04",
    title: "Motion with intent",
    body: "Animation explains hierarchy and state — never decoration for its own sake. Every transition has a job; anything that doesn't earn its milliseconds gets cut.",
  },
];

const DESIGN_STEPS = [
  {
    num: "01",
    phase: "Understand",
    title: "Discovery before pixels",
    body: "Workshops, user interviews and competitor teardown in FigJam. We leave with the user's actual job-to-be-done in writing — and a kill-list of features that don't serve it.",
    deliverable: "Problem map + scoped flows",
  },
  {
    num: "02",
    phase: "Structure",
    title: "Flows and wireframes",
    body: "Every screen of every flow, low-fi, clickable. This is where navigation gets argued about and fixed — cheaply, in grayscale, before anyone falls in love with a gradient.",
    deliverable: "Clickable wireframe prototype",
  },
  {
    num: "03",
    phase: "Design",
    title: "Hi-fi screens in Figma",
    body: "Real content, both languages, every edge case. Light and dark. Components built with variables and auto-layout so a copy change doesn't break forty screens.",
    deliverable: "Hi-fi Figma file — live link, not PDF",
  },
  {
    num: "04",
    phase: "Systemize",
    title: "Tokens and the design system",
    body: "Colors, type, spacing and radii become named tokens that match the codebase one-to-one. The Figma component library mirrors Storybook — same names, same props, same states.",
    deliverable: "Design system + token export",
  },
  {
    num: "05",
    phase: "Validate",
    title: "Prototype, test, adjust",
    body: "Interactive prototypes go in front of real users (Maze, moderated sessions) and in front of investors when that's the goal. Findings loop back into the file the same week.",
    deliverable: "Usability report + iterated screens",
  },
  {
    num: "06",
    phase: "Ship",
    title: "Handoff that isn't a handoff",
    body: "Engineers were in the file all along — Dev Mode, annotated edge cases, motion specs with curves and durations. Design reviews every build until the shipped screen matches the drawn one.",
    deliverable: "Pixel-parity production UI",
  },
];

function HowWeDesignPage() {
  React.useEffect(() => {
    document.title = "How we design — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name", "description"); document.head.appendChild(m); }
    m.setAttribute("content", "Innoveev's design practice: discovery, wireframes, hi-fi Figma screens with real content, design tokens, usability testing, and pixel-parity handoff.");
  }, []);

  const apps = window.APPS || [];
  const examples = ["haven-stay", "qira-learn", "ledgerflow"]
    .map((sl) => apps.find((a) => a.slug === sl))
    .filter(Boolean);

  return (
    <>
      <Nav />

      <header className="sub-hero" data-screen-label="How we design — hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">Studio · Design practice</span>
            <h1 className="sub-hero__title">How we design <em>apps.</em></h1>
            <p className="sub-hero__lede">
              Every product we ship starts as a Figma file — and the distance between
              that file and the App Store is the whole craft. This is the process,
              the principles, and the proof.
            </p>
          </div>
        </div>
      </header>

      {/* Principles */}
      <section className="section section--tight" data-screen-label="Design principles">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Principles</span>
              <h2 className="h2 section-head__title">Four rules we don't bend.</h2>
            </div>
          </div>
          <div className="app-features">
            {DESIGN_PRINCIPLES.map((p) => (
              <div key={p.num} className="app-feature">
                <div className="app-feature__num">{p.num}</div>
                <div className="app-feature__title">{p.title}</div>
                <p className="app-feature__desc">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Process */}
      <section className="section section--tight" data-screen-label="Design process">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Process</span>
              <h2 className="h2 section-head__title">Brief to shipped, in six moves.</h2>
            </div>
            <p className="lede section-head__lede">
              Each step ends with something you can open, click, and judge — never a status update.
            </p>
          </div>
          <ol className="design-steps">
            {DESIGN_STEPS.map((s) => (
              <li key={s.num} className="design-step">
                <div className="design-step__rail">
                  <span className="design-step__num">{s.num}</span>
                  <span className="design-step__line" aria-hidden="true"></span>
                </div>
                <div className="design-step__body">
                  <div className="design-step__phase">{s.phase}</div>
                  <h3 className="design-step__title">{s.title}</h3>
                  <p className="design-step__text">{s.body}</p>
                  <div className="design-step__deliverable">
                    <span className="design-step__deliverable-label">You get</span>
                    {s.deliverable}
                  </div>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Tools */}
      <section className="section section--tight" data-screen-label="Design tools">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Toolchain</span>
              <h2 className="h2 section-head__title">Figma at the center.</h2>
            </div>
            <p className="lede section-head__lede">
              One live file from kickoff to launch — flows in FigJam, screens and tokens in Figma,
              parity with Storybook in code.
            </p>
          </div>
          {window.TechStrip && (
            <TechStrip slugs={["figma"]} size={48} label="Deep dive — why Figma, and what else we considered" />
          )}
          <div className="app-stack">
            {["Figma", "FigJam", "Dev Mode", "Design tokens", "Storybook", "Framer", "Lottie", "Maze"].map((t) => (
              <span key={t} className="app-stack__pill">{t}</span>
            ))}
          </div>
        </div>
      </section>

      {/* Examples */}
      <section className="section section--tight" data-screen-label="Designed and shipped examples">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Proof</span>
              <h2 className="h2 section-head__title">Designed here, shipped here.</h2>
            </div>
            <p className="lede section-head__lede">
              The same team that drew these screens wrote them. Open any of them to see
              the screens, the stack, and the story.
            </p>
          </div>
          <div className="apps-grid">
            {examples.map((app) => (
              <AppPeekCard key={app.slug} app={app} />
            ))}
          </div>
          <div style={{ marginTop: 28, display: "flex", justifyContent: "center" }}>
            <a href="apps.html" className="btn btn--secondary">All shipped apps <Arrow /></a>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--tight">
        <div className="container">
          <div className="faq-closing">
            <h2 className="faq-closing__title">Have something that needs <em>designing?</em></h2>
            <p className="faq-closing__lede">
              Two-week discovery sprint: workshops, flows, and a clickable prototype — yours to keep either way.
            </p>
            <div className="faq-closing__ctas">
              <a href="contact.html" className="btn btn--primary">Start a discovery <Arrow /></a>
              <a href="services/design.html" className="btn btn--secondary">Product design service</a>
            </div>
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
      <BuildMode />
      <KeyboardEggs />
    </>
  );
}

window.HowWeDesignPage = HowWeDesignPage;