// ============================================================
// About page - studio story + video link
// ============================================================

const ABOUT_VIDEO_URL = 'https://www.youtube.com/@freshwavefinds';
const ABOUT_CONNECT = ['Instagram', 'TikTok', 'YouTube', 'Discord', 'WhatsApp'];
const ABOUT_VALUES = [
  {
    title: 'Proof on camera',
    body: 'Finished pieces, material tests and glow demos get documented so customers can see how the work behaves in real light.',
    accent: 'cyan',
    details: [
      'Photos, clips and demos show how pieces look outside a perfect product mockup.',
      'Glow tests, material behavior and finished surfaces get shown so customers can judge the work with context.',
      'The goal is simple: no mystery box energy. You should know what the bench can actually produce.',
    ],
  },
  {
    title: 'Collector-first finish',
    body: 'Edges, surface feel, color and coating get treated like part of the product, not the afterthought after printing.',
    accent: 'magenta',
    details: [
      'The finish is planned as part of the object, not rushed after the printer stops.',
      'Edges, touch points, coating and display presence matter because customers are buying a finished piece, not just machine time.',
      'Every tier still needs to feel intentional enough to hold up on a shelf, in a hand, or under a camera.',
    ],
  },
  {
    title: 'Human quote process',
    body: 'The form starts the brief, then the final quote gets confirmed by hand so oddball ideas still fit the right scope.',
    accent: 'vapor-purple',
    details: [
      'The form collects the basics, but the actual scope gets reviewed before anyone moves forward.',
      'Size, finish, quantity, material choice and reference details all affect the real quote.',
      'That human check keeps weird ideas possible without pretending every project fits a flat-price menu.',
    ],
  },
];

function AboutPage() {
  const [activeValue, setActiveValue] = 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 right-0 top-16 h-80 w-[34rem] rounded-full blur-3xl"
          style={{ background: 'radial-gradient(circle, hsl(var(--magenta) / 0.20), hsl(var(--cyan) / 0.14), transparent 70%)' }}
        ></div>

        <div className="container relative mx-auto grid gap-10 lg:grid-cols-[minmax(0,1fr)_30rem] lg:items-center">
          <div>
            <Eyebrow accent="magenta">About FreshWave</Eyebrow>
            <h1 className="crt-head mb-6 font-heading text-4xl md:text-5xl lg:text-6xl" style={{ letterSpacing: '-0.02em' }}>
              Small-batch prints with arcade-shelf energy.
            </h1>
            <p className="mb-6 max-w-2xl text-lg leading-relaxed text-muted-foreground">
              FreshWave Digital Studio is a one-at-a-time 3D print bench for character figures, vintage replicas, fidget toys and display pieces. The goal is simple: make pieces that feel collected, handled and cared for, not churned out.
            </p>
            <p className="mb-8 max-w-2xl leading-relaxed text-muted-foreground">
              The work sits between maker culture and collector culture: resin detail where it matters, durable parts when motion matters, and glow features when the piece deserves a night mode.
            </p>
            <div className="flex flex-col gap-3 sm:flex-row">
              <Button size="lg" onClick={() => go('/commission')}>Start a piece <Icon name="arrow-right" /></Button>
              <Button size="lg" variant="outline" as="a" href={ABOUT_VIDEO_URL} target="_blank" rel="noreferrer">Watch on YouTube <Icon name="arrow-up-right" /></Button>
            </div>
          </div>

          <a
            href={ABOUT_VIDEO_URL}
            target="_blank"
            rel="noreferrer"
            className="charged-panel group block overflow-hidden rounded-2xl border border-border bg-card"
            style={{ '--panel-accent': 'hsl(var(--magenta))', borderColor: 'hsl(var(--magenta) / 0.32)' }}
          >
            <div className="relative aspect-video overflow-hidden bg-background">
              <div className="absolute inset-0 grid-floor opacity-30"></div>
              <div
                className="pointer-events-none absolute inset-0"
                style={{ background: 'radial-gradient(circle at 50% 45%, hsl(var(--magenta) / 0.35), hsl(var(--cyan) / 0.16) 42%, transparent 70%)' }}
              ></div>
              <div className="relative flex h-full flex-col items-center justify-center gap-5 p-8 text-center">
                <span className="flex h-20 w-20 items-center justify-center rounded-full border border-primary bg-background/80 text-primary glow-rest-cyan transition-transform group-hover:scale-105">
                  <Icon name="arrow-right" className="h-9 w-9" stroke={2.5} />
                </span>
                <div>
                  <div className="font-mono text-[10px] uppercase tracking-[0.28em] text-muted-foreground">Build demos</div>
                  <h2 className="crt-head mt-2 font-heading text-2xl tracking-wide">Watch the bench work</h2>
                </div>
              </div>
            </div>
            <div className="border-t border-border p-5">
              <p className="text-sm leading-relaxed text-muted-foreground">
                Demo clips, glow tests, tolerance checks and print reveals for Instagram, TikTok and YouTube.
              </p>
            </div>
          </a>
        </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="cyan">How we show up</Eyebrow>
            <h2 className="crt-head mb-4 font-heading text-3xl md:text-4xl">Transparent enough to trust. Weird enough to remember.</h2>
          </div>
          <div className="grid gap-4 md:grid-cols-3">
            {ABOUT_VALUES.map((item) => (
              <button
                key={item.title}
                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': accentHsl(item.accent), '--panel-accent': accentHsl(item.accent), borderColor: accentHsl(item.accent, 0.28) }}
                onClick={() => setActiveValue(item)}
                onPointerDown={triggerButtonSparks}
              >
                <h3 className="mb-3 font-heading text-xl tracking-wide">{item.title}</h3>
                <p className="mb-5 text-sm leading-relaxed text-muted-foreground">{item.body}</p>
                <span className="inline-flex items-center gap-2 font-heading text-[10px] uppercase tracking-wider transition-all group-hover:gap-3" style={{ color: accentHsl(item.accent) }}>
                  View details <Icon name="arrow-right" className="h-3.5 w-3.5" />
                </span>
              </button>
            ))}
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden py-20">
        <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="sunset">Connect</Eyebrow>
            <h2 className="crt-head mb-4 font-heading text-3xl md:text-4xl">Follow the drops and ask questions where you already hang out.</h2>
            <div className="flex flex-wrap gap-3">
              {ABOUT_CONNECT.map((label) => (
                <a key={label} href="#" onClick={(e) => e.preventDefault()} className="rounded-md border border-border bg-card px-4 py-3 font-mono text-xs uppercase tracking-[0.18em] text-muted-foreground transition-colors hover:border-primary hover:text-primary">
                  {label}
                </a>
              ))}
            </div>
          </div>
          <Button size="lg" onClick={() => go('/contact')}>Contact us <Icon name="arrow-right" /></Button>
        </div>
      </section>

      {activeValue && <AboutValueModal value={activeValue} onClose={() => setActiveValue(null)} />}
    </div>
  );
}

function AboutValueModal({ value, 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(value.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(value.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 }}>Transparency standard</div>
          <h3 className="crt-head mb-4 font-heading text-3xl tracking-wide md:text-4xl">{value.title}</h3>
          <p className="text-base leading-relaxed text-muted-foreground">{value.body}</p>
        </div>

        <div className="grid gap-4">
          {value.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 a transparent quote <Icon name="arrow-right" /></Button>
          <Button variant="outline" onClick={onClose}>Back to about</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage });