import { Link } from "react-router-dom";

const workflow = [
  {
    label: "Input",
    title: "Choose a tool",
    copy: "Paste text, pick a file, or adjust options in a generated tool panel.",
    icon: (
      <path d="M12 5v14M5 12h14" />
    ),
  },
  {
    label: "Run",
    title: "Process locally",
    copy: "The plugin runs in your browser using JavaScript, workers, Canvas, or PDF libraries.",
    icon: (
      <>
        <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
        <circle cx="12" cy="12" r="4" />
      </>
    ),
  },
  {
    label: "Output",
    title: "Copy or download",
    copy: "Results appear immediately in the page. Files stay on the device unless you export them.",
    icon: (
      <>
        <path d="M12 4v11" />
        <path d="m7 10 5 5 5-5" />
        <path d="M5 20h14" />
      </>
    ),
  },
];

const principles = [
  {
    title: "No upload step",
    copy: "Plimi does not send your inputs to an application server for conversion.",
  },
  {
    title: "Plugin boundaries",
    copy: "Each utility declares its own inputs, options, permissions, and result type.",
  },
  {
    title: "Responsive execution",
    copy: "Heavier work can move off the main interface thread so the page stays usable.",
  },
  {
    title: "Explicit results",
    copy: "Tools return structured outputs: copied text, rendered previews, or downloadable files.",
  },
];

const layers = [
  { name: "Tool manifest", detail: "Inputs, options, permissions" },
  { name: "Generated UI", detail: "Forms, sliders, selects, validation" },
  { name: "Runner", detail: "Browser APIs, workers, local libraries" },
  { name: "Result panel", detail: "Preview, copy, download" },
];

function IconFrame({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex h-10 w-10 items-center justify-center rounded-[10px] border border-[var(--p-border)] bg-[var(--p-chip)] text-[var(--p-text)]">
      <svg
        width="19"
        height="19"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        {children}
      </svg>
    </span>
  );
}

export function HowItWorksPage() {
  return (
    <div className="mx-auto flex max-w-[1120px] flex-col gap-10 pb-16 animate-plimi-slide">
      <section className="grid grid-cols-1 gap-8 md:grid-cols-[0.95fr_1.05fr] md:items-end">
        <div className="flex flex-col gap-4">
          <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
            browser-first architecture
          </span>
          <h1 className="m-0 max-w-[620px] font-sans text-4xl font-bold leading-[1.02] tracking-tight text-[var(--p-text)] text-balance md:text-[56px]">
            Your files stay where they started.
          </h1>
          <p className="m-0 max-w-[560px] text-base leading-relaxed text-[var(--p-muted)] text-pretty">
            Plimi is a collection of small local utilities. The interface loads the tool, runs the
            work in the browser, then hands the result back to you without uploading your tool
            input. Optional audience measurement stays separate from tool processing and can be
            disabled from the privacy controls.
          </p>
        </div>

        <div
          className="rounded-[20px] border border-[var(--p-border)] bg-[var(--p-surface)] p-4 md:p-5"
          style={{
            boxShadow:
              "0 18px 38px -28px var(--p-shadow-soft), 0 1px 0 0 var(--p-shadow-inset)",
          }}
        >
          <div className="grid grid-cols-1 gap-3 sm:grid-cols-3 md:grid-cols-1 lg:grid-cols-3">
            {workflow.map((step, index) => (
              <div
                key={step.label}
                className="relative flex min-h-[170px] flex-col gap-4 rounded-[16px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-5"
              >
                <div className="flex items-center justify-between gap-3">
                  <IconFrame>{step.icon}</IconFrame>
                  <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
                    {String(index + 1).padStart(2, "0")}
                  </span>
                </div>
                <div className="flex flex-col gap-1.5">
                  <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-accent)]">
                    {step.label}
                  </span>
                  <h2 className="m-0 font-sans text-[17px] font-semibold tracking-tight text-[var(--p-text)]">
                    {step.title}
                  </h2>
                  <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">{step.copy}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="grid grid-cols-1 gap-4 md:grid-cols-4">
        {principles.map((item) => (
          <article
            key={item.title}
            className="flex min-h-[150px] flex-col justify-between gap-5 rounded-[16px] border border-[var(--p-border)] bg-[var(--p-surface)] p-5"
          >
            <h2 className="m-0 font-sans text-[16px] font-semibold tracking-tight text-[var(--p-text)]">
              {item.title}
            </h2>
            <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">{item.copy}</p>
          </article>
        ))}
      </section>

      <section className="grid grid-cols-1 gap-6 rounded-[20px] border border-[var(--p-border)] bg-[var(--p-surface-2)] p-5 md:grid-cols-[0.75fr_1.25fr] md:p-7">
        <div className="flex flex-col gap-3">
          <span className="font-mono text-[11px] uppercase tracking-[0.12em] text-[var(--p-muted)]">
            plugin model
          </span>
          <h2 className="m-0 font-sans text-2xl font-bold tracking-tight text-[var(--p-text)]">
            One shell, many tools.
          </h2>
          <p className="m-0 text-sm leading-relaxed text-[var(--p-muted)]">
            Plimi keeps the application shell simple. Each tool contributes a compact manifest and
            a runner, so new utilities can share the same dependable interface.
          </p>
        </div>

        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
          {layers.map((layer, index) => (
            <div
              key={layer.name}
              className="flex items-start gap-4 rounded-[14px] border border-[var(--p-border)] bg-[var(--p-surface)] p-4"
            >
              <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-[var(--p-chip)] font-mono text-[11px] text-[var(--p-muted)]">
                {index + 1}
              </span>
              <div className="flex flex-col gap-1">
                <h3 className="m-0 font-sans text-sm font-semibold text-[var(--p-text)]">
                  {layer.name}
                </h3>
                <p className="m-0 text-[13px] leading-relaxed text-[var(--p-muted)]">
                  {layer.detail}
                </p>
              </div>
            </div>
          ))}
        </div>
      </section>

      <section className="flex flex-col items-start justify-between gap-4 border-t border-[var(--p-border)] pt-7 md:flex-row md:items-center">
        <div className="flex flex-col gap-1">
          <h2 className="m-0 font-sans text-xl font-semibold tracking-tight text-[var(--p-text)]">
            Ready to run something?
          </h2>
          <p className="m-0 text-sm text-[var(--p-muted)]">
            Pick a utility and the same local workflow applies.
          </p>
        </div>
        <Link
          to="/tools"
          className="inline-flex w-full items-center justify-center rounded-[12px] bg-[var(--p-accent)] px-5 py-3.5 font-sans text-sm font-semibold tracking-tight text-[var(--p-accent-ink)] no-underline transition-[filter] hover:brightness-110 md:w-auto md:rounded-[10px] md:py-3"
        >
          Browse tools
        </Link>
      </section>
    </div>
  );
}
