// ============================================================
// Process page - materials, finishes, and how pieces are chosen
// ============================================================

function ProcessPage() {
  const [activeMaterial, setActiveMaterial] = useState(null);
  const [activeFinish, setActiveFinish] = useState(null);

  return (
    <div className="scanlines">
      <section className="relative overflow-hidden py-16 md:py-24">
        <div className="absolute inset-0 grid-floor opacity-25"></div>
        <div
          className="pointer-events-none absolute left-1/2 top-20 h-72 w-[38rem] -translate-x-1/2 rounded-full blur-3xl"
          style={{ background: 'radial-gradient(circle, hsl(var(--cyan) / 0.18), hsl(var(--magenta) / 0.16), transparent 70%)' }}
        ></div>
        <div className="container relative mx-auto">
          <div className="mx-auto mb-14 max-w-3xl text-center">
            <Eyebrow accent="cyan"><span className="mx-auto">Materials + finishes</span></Eyebrow>
            <h1 className="crt-head mb-5 font-heading text-4xl md:text-5xl lg:text-6xl" style={{ letterSpacing: '-0.02em' }}>
              Pick the right glow, feel and finish.
            </h1>
            <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground">
              Every piece starts with the material. The finish decides whether it stays paintable, arrives color-finished, or carries glow-in-the-dark features.
            </p>
          </div>

          <div className="grid gap-6 lg:grid-cols-[minmax(0,1fr)_22rem]">
            <div className="grid gap-4 md:grid-cols-2">
              {MATERIAL_GUIDE.map((material) => (
                <MaterialGuideCard key={material.name} material={material} onOpen={setActiveMaterial} />
              ))}
            </div>

            <aside className="charged-panel rounded-2xl border border-border bg-card p-6 lg:sticky lg:top-24 lg:self-start" style={{ '--panel-accent': 'hsl(var(--magenta))' }}>
              <div className="mb-3 font-mono text-[10px] uppercase tracking-[0.25em] text-muted-foreground">How we choose</div>
              <h2 className="crt-head mb-4 font-heading text-2xl tracking-wide">Material first. Finish second.</h2>
              <p className="mb-6 text-sm leading-relaxed text-muted-foreground">
                If the piece is display-only, detail resin usually wins. If it clicks, slides or gets handled, durable resin is safer. Glow resin handles light-up features, while metallic resin covers armor, hardware and trophy-style shine.
              </p>
              <div className="space-y-4">
                {PROCESS.map((step) => (
                  <div key={step.step} className="border-t border-border pt-4">
                    <div className="mb-1 flex items-center gap-3">
                      <span className="font-display text-xl text-primary text-glow-cyan">{step.step}</span>
                      <span className="font-heading text-sm tracking-wide">{step.title}</span>
                    </div>
                    <p className="text-xs leading-relaxed text-muted-foreground">{step.body}</p>
                  </div>
                ))}
              </div>
            </aside>
          </div>
        </div>
      </section>

      <section className="bg-card py-20 text-card-foreground">
        <div className="container mx-auto">
          <div className="mb-10 max-w-2xl">
            <Eyebrow accent="magenta">Finish menu</Eyebrow>
            <h2 className="crt-head mb-4 font-heading text-3xl md:text-4xl">What gets applied after printing.</h2>
            <p className="text-lg text-muted-foreground">
              The same model can stay paintable, arrive color-finished, or carry the FreshWave glow treatment.
            </p>
          </div>

          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
            {FINISH_GUIDE.map((finish) => (
              <FinishGuideCard key={finish.name} finish={finish} onOpen={setActiveFinish} />
            ))}
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden py-24">
        <div className="absolute inset-0 grid-floor opacity-20"></div>
        <div className="container relative mx-auto grid gap-8 md:grid-cols-[minmax(0,1fr)_auto] md:items-center">
          <div>
            <Eyebrow accent="vapor-purple">Need help picking?</Eyebrow>
            <h2 className="crt-head mb-4 font-heading text-3xl md:text-4xl">You can just tell us what it needs to survive.</h2>
            <p className="max-w-2xl text-lg leading-relaxed text-muted-foreground">
              Shelf display, fidget toy, gift, cosplay detail, moving hinge, tiny replica, full glow piece - that is enough for us to recommend the right material and finish.
            </p>
          </div>
          <Button size="lg" onClick={() => go('/commission')}>Start a piece <Icon name="arrow-right" /></Button>
        </div>
      </section>

      {activeMaterial && <MaterialDetailModal material={activeMaterial} onClose={() => setActiveMaterial(null)} />}
      {activeFinish && <FinishDetailModal finish={activeFinish} onClose={() => setActiveFinish(null)} />}
    </div>
  );
}

function MaterialGuideCard({ material, onOpen }) {
  const color = accentHsl(material.accent);
  return (
    <button
      type="button"
      className="spark-button card-accent charged-panel group block w-full rounded-2xl border border-border bg-background/40 p-6 text-left transition-all duration-300 hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
      style={{ '--card-accent': color, '--panel-accent': color, borderColor: accentHsl(material.accent, 0.26) }}
      onClick={() => onOpen(material)}
      onPointerDown={triggerButtonSparks}
    >
      <div className="mb-4 flex items-start justify-between gap-4">
        <div>
          <div className="quote-data mb-2 text-xs uppercase" style={{ color }}>{material.feel}</div>
          <h2 className="font-heading text-xl tracking-wide">{material.name}</h2>
        </div>
        <Icon name="check" className="h-5 w-5 transition-transform duration-300 group-hover:scale-110" style={{ color }} />
      </div>
      <p className="mb-3 text-sm font-bold leading-relaxed text-foreground">{material.bestFor}</p>
      <p className="mb-5 text-sm leading-relaxed text-muted-foreground">{material.finish}</p>
      <span className="inline-flex items-center gap-2 font-heading text-[10px] uppercase tracking-wider transition-all group-hover:gap-3" style={{ color }}>
        View details <Icon name="arrow-right" className="h-3.5 w-3.5" />
      </span>
    </button>
  );
}

function MaterialDetailModal({ material, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  const color = accentHsl(material.accent);

  return (
    <div className="detail-backdrop fixed inset-0 z-[200] flex items-start justify-center overflow-y-auto p-4 md:p-10" onClick={onClose}>
      <div
        className="detail-surface charged-panel relative w-full max-w-3xl overflow-hidden rounded-2xl border border-border bg-card p-7 md:p-10"
        style={{ '--panel-accent': color, borderColor: accentHsl(material.accent, 0.34) }}
        onClick={(e) => e.stopPropagation()}
      >
        <button type="button" onClick={onClose} className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/70 text-foreground transition-colors hover:text-primary" aria-label="Close">
          <Icon name="close" className="h-5 w-5" />
        </button>

        <div className="mb-8 max-w-2xl pr-12">
          <div className="quote-data mb-3 text-xs uppercase" style={{ color }}>{material.feel}</div>
          <h3 className="crt-head mb-4 font-heading text-3xl tracking-wide md:text-4xl">{material.name}</h3>
          <p className="text-base font-bold leading-relaxed text-foreground">{material.bestFor}</p>
          <p className="mt-4 text-base leading-relaxed text-muted-foreground">{material.finish}</p>
        </div>

        <div className="grid gap-4">
          {(material.details || []).map((detail, idx) => (
            <div key={detail} className="rounded-xl border border-border bg-background/45 p-4">
              <div className="mb-2 font-display text-xl" style={{ color }}>{String(idx + 1).padStart(2, '0')}</div>
              <p className="text-sm leading-relaxed text-muted-foreground">{detail}</p>
            </div>
          ))}
        </div>

        <div className="mt-8 flex flex-col gap-3 border-t border-border pt-6 sm:flex-row">
          <Button onClick={() => { onClose(); go('/commission'); }}>Start with this material <Icon name="arrow-right" /></Button>
          <Button variant="outline" onClick={onClose}>Back to materials</Button>
        </div>
      </div>
    </div>
  );
}

function FinishGuideCard({ finish, onOpen }) {
  const color = accentHsl(finish.accent);
  return (
    <button
      type="button"
      className="spark-button card-accent charged-panel group block w-full rounded-2xl border border-border bg-background/40 p-6 text-left transition-all duration-300 hover:-translate-y-1 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
      style={{ '--card-accent': color, '--panel-accent': color, borderColor: accentHsl(finish.accent, 0.26) }}
      onClick={() => onOpen(finish)}
      onPointerDown={triggerButtonSparks}
    >
      <div className="mb-4 flex items-start justify-between gap-4">
        <div>
          <div className="quote-data mb-2 text-xs uppercase" style={{ color }}>{finish.cost}</div>
          <h3 className="font-heading text-xl tracking-wide">{finish.name}</h3>
        </div>
        <Icon name="check" className="h-5 w-5 transition-transform duration-300 group-hover:scale-110" style={{ color }} />
      </div>
      <p className="mb-5 text-sm leading-relaxed text-muted-foreground">{finish.description}</p>
      <span className="inline-flex items-center gap-2 font-heading text-[10px] uppercase tracking-wider transition-all group-hover:gap-3" style={{ color }}>
        View details <Icon name="arrow-right" className="h-3.5 w-3.5" />
      </span>
    </button>
  );
}

function FinishDetailModal({ finish, onClose }) {
  useEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  const color = accentHsl(finish.accent);

  return (
    <div className="fixed inset-0 z-[200] flex items-start justify-center overflow-y-auto bg-background/85 p-4 backdrop-blur-sm md:p-10" onClick={onClose}>
      <div
        className="charged-panel relative w-full max-w-3xl overflow-hidden rounded-2xl border border-border bg-card p-7 md:p-10"
        style={{ '--panel-accent': color, borderColor: accentHsl(finish.accent, 0.34) }}
        onClick={(e) => e.stopPropagation()}
      >
        <button type="button" onClick={onClose} className="absolute right-4 top-4 z-10 flex h-11 w-11 items-center justify-center rounded-full border border-border bg-background/70 text-foreground transition-colors hover:text-primary" aria-label="Close">
          <Icon name="close" className="h-5 w-5" />
        </button>

        <div className="mb-8 max-w-2xl pr-12">
          <div className="quote-data mb-3 text-xs uppercase" style={{ color }}>{finish.cost}</div>
          <h3 className="crt-head mb-4 font-heading text-3xl tracking-wide md:text-4xl">{finish.name}</h3>
          <p className="text-base leading-relaxed text-muted-foreground">{finish.description}</p>
        </div>

        <div className="grid gap-4">
          {(finish.details || []).map((detail, idx) => (
            <div key={detail} className="rounded-xl border border-border bg-background/45 p-4">
              <div className="mb-2 font-display text-xl" style={{ color }}>{String(idx + 1).padStart(2, '0')}</div>
              <p className="text-sm leading-relaxed text-muted-foreground">{detail}</p>
            </div>
          ))}
        </div>

        <div className="mt-8 flex flex-col gap-3 border-t border-border pt-6 sm:flex-row">
          <Button onClick={() => { onClose(); go('/commission'); }}>Start with this finish <Icon name="arrow-right" /></Button>
          <Button variant="outline" onClick={onClose}>Back to finishes</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ProcessPage });