// ============================================================
// Home page - FreshWave Digital Studio
// ============================================================

// Rotating featured object (signature hero moment) ------------------------
function FeaturedObject() {
  const [i, setI] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setI((v) => (v + 1) % FEATURED.length), 4200);
    return () => clearInterval(t);
  }, []);
  const f = FEATURED[i];

  return (
    <div className="relative mx-auto flex w-full max-w-sm flex-col items-center">
      {/* glow halo */}
      <div
        className="pointer-events-none absolute left-1/2 top-1/2 h-72 w-72 -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl pulse-glow"
        style={{ background: `radial-gradient(circle, ${accentHsl(f.accent, 0.85)}, transparent 70%)` }}
      ></div>

      {/* rotating pedestal ring */}
      <div className="relative flex h-80 w-80 items-center justify-center">
        <div className="spin-slow absolute inset-0 rounded-full border" style={{ borderColor: accentHsl(f.accent, 0.35) }}></div>
        <div className="spin-slow absolute inset-8 rounded-full border border-dashed" style={{ borderColor: accentHsl(f.accent, 0.25), animationDirection: 'reverse' }}></div>

        {/* object placeholder, cross-fades */}
        <div className="relative h-52 w-52 float-y">
          {FEATURED.map((item, idx) => (
            <div
              key={item.name}
              className="absolute inset-0 transition-opacity duration-700"
              style={{ opacity: idx === i ? 1 : 0 }}
            >
              <Placeholder label="featured print" accent={item.accent} glow className="h-full w-full rounded-2xl" />
            </div>
          ))}
        </div>
      </div>

      {/* caption */}
      <div className="mt-6 text-center">
        <div className="font-heading text-xl tracking-wide" style={{ color: accentHsl(f.accent) }}>{f.name}</div>
        <div className="mt-1 text-sm text-muted-foreground">{f.sub}</div>
        <div className="mt-2 font-mono text-[10px] uppercase tracking-[0.25em] text-muted-foreground">{f.material}</div>
      </div>

      {/* dots */}
      <div className="mt-5 flex items-center gap-2">
        {FEATURED.map((item, idx) => (
          <button
            key={item.name}
            onClick={() => setI(idx)}
            aria-label={`Show ${item.name}`}
            className="h-2.5 rounded-full transition-all"
            style={{ width: idx === i ? 26 : 10, background: idx === i ? accentHsl(item.accent) : 'hsl(var(--muted))' }}
          ></button>
        ))}
      </div>
    </div>
  );
}

function HomePage({ onOpenProject }) {
  const [activeService, setActiveService] = useState(null);

  return (
    <div className="scanlines">
      {/* HERO */}
      <section className="relative overflow-hidden">
        <div className="absolute inset-0 grid-floor opacity-30"></div>
        <div className="container relative mx-auto grid items-center gap-12 py-20 lg:grid-cols-2 lg:py-28">

          <div>
            <div className="mb-6 font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">DESIGN · PRINT · CREATE · EST 2024</div>
            <h1 className="crt-head mb-6 font-heading text-5xl leading-[1.05] md:text-6xl" style={{ letterSpacing: '-0.02em' }}>
              We print things that <span className="ombre">glow</span> in the dark.
            </h1>
            <p className="mb-8 max-w-xl text-lg leading-relaxed text-muted-foreground">
              Anime figures, vintage replicas, fidget toys and display statues, printed in fine resin and finished by hand. From a palm-sized collectible to a full 12-inch statue, made one of one for people who want something nobody else has.
            </p>
            <div className="flex flex-col gap-4 sm:flex-row">
              <Button size="lg" onClick={() => go('/commission')}>Start a piece <Icon name="arrow-right" /></Button>
              <Button size="lg" variant="outline" onClick={() => go('/work')}>See favorites</Button>
            </div>
            <TrustStrip className="mt-5 max-w-xl justify-center sm:justify-start" />
            <div className="mt-12 flex items-center gap-6 font-mono text-xs uppercase tracking-[0.25em] text-muted-foreground">
              <span>VOL. 01</span>
              <span className="h-1 w-1 rounded-full bg-muted-foreground"></span>
              <span>BENCH · LIVE</span>
            </div>
          </div>
          <div className="relative mx-auto flex w-full max-w-md items-center justify-center py-6">
            <div
              className="pointer-events-none absolute inset-0 rounded-full blur-3xl pulse-glow"
              style={{ background: 'radial-gradient(circle, hsl(var(--magenta) / 0.40), hsl(var(--sunset) / 0.18) 45%, transparent 70%)' }}
            ></div>
            <div
              className="hero-logo-badge charged-panel relative w-full max-w-md overflow-hidden rounded-3xl bg-black p-5 float-y sm:p-6"
              style={{ '--panel-accent': 'hsl(var(--magenta))', boxShadow: '0 0 0 1px hsl(var(--cyan) / 0.34), 0 0 80px hsl(var(--magenta) / 0.34), 0 0 120px hsl(var(--cyan) / 0.16), inset 0 0 0 1px hsl(0 0% 100% / 0.04)' }}
            >
              <LogoImage variant="full" alt="FreshWave Digital Studio" className="block w-full rounded-2xl" />
            </div>
          </div>
        </div>
      </section>

      {/* SELECTED WORK */}
      <section className="py-24">
        <div className="container mx-auto">
          <div className="mb-12 flex flex-wrap items-end justify-between gap-4">
            <div>
              <Eyebrow accent="magenta">Off the bench</Eyebrow>
              <h2 className="crt-head font-heading text-3xl md:text-4xl">Personal favorites</h2>
            </div>
            <button onClick={() => go('/work')} className="flex items-center gap-1 font-heading text-xs uppercase tracking-wider text-primary transition-all hover:gap-2">
              Open favorites <Icon name="arrow-right" />
            </button>
          </div>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            {PROJECTS.slice(0, 4).map((p) => (
              <ProjectCard key={p.slug} project={p} onOpen={onOpenProject} />
            ))}
          </div>
        </div>
      </section>

      {/* WHAT WE MAKE */}
      <section className="bg-card py-24 text-card-foreground">
        <div className="container mx-auto">
          <div className="mb-12">
            <Eyebrow accent="cyan">Disciplines</Eyebrow>
            <h2 className="crt-head mb-4 font-heading text-3xl md:text-4xl">What we make</h2>
            <p className="max-w-xl text-lg text-muted-foreground">Resin printers, a wall of paint, and a lot of patience. Palm-sized to a full foot tall, with one obsession: the finish.</p>
          </div>
          <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
            {SERVICES.map((s) => (<ServiceCard key={s.title} s={s} onOpen={setActiveService} />))}
          </div>
        </div>
      </section>

      {/* MATERIAL + PROCESS STORYTELLING (signature) */}
      <section id="process" className="py-24">
        <div className="container mx-auto">
          <div className="mb-16 text-center">
            <Eyebrow accent="vapor-purple"><span className="mx-auto">Materials + finishes</span></Eyebrow>
            <h2 className="crt-head mb-6 font-heading text-3xl md:text-4xl lg:text-5xl">The right resin changes the whole piece.</h2>
            <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground">
              Detail resin keeps hairlines crisp. Durable resin handles fidget toys and moving parts. Glow resin carries the FreshWave signature. The finish turns the print into a collectible.
            </p>
          </div>

          {/* process steps */}
          <div className="mb-20 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-4">
            {PROCESS.map((p, idx) => (
              <div key={p.step} className="relative rounded-2xl border border-border bg-card p-7">
                <div className="mb-5 flex items-center justify-between">
                  <span className="font-display text-3xl text-primary text-glow-cyan">{p.step}</span>
                  <Icon name="layers" className="h-5 w-5 text-muted-foreground" />
                </div>
                <h3 className="mb-2 font-heading text-lg tracking-wide">{p.title}</h3>
                <p className="text-sm leading-relaxed text-muted-foreground">{p.body}</p>
                {idx < PROCESS.length - 1 && (
                  <div className="absolute -right-3 top-1/2 hidden -translate-y-1/2 text-muted-foreground lg:block">
                    <Icon name="arrow-right" className="h-5 w-5" />
                  </div>
                )}
              </div>
            ))}
          </div>

          {/* material palette */}
          <div className="mb-10 text-center">
            <h3 className="crt-head font-heading text-2xl tracking-wide">The material wall</h3>
            <p className="mt-2 text-sm text-muted-foreground">A working selection. Ask us about specialty resins and finishes.</p>
          </div>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {MATERIALS.map((m) => (<MaterialSwatch key={m.name} m={m} />))}
          </div>
          <div className="mt-10 text-center">
            <Button variant="outline" onClick={() => go('/process')}>See materials and finishes <Icon name="arrow-right" /></Button>
          </div>
        </div>
      </section>

      {/* STUDIO STATEMENT + STATS */}
      <section className="bg-card py-24 text-card-foreground">
        <div className="container mx-auto">
          <div className="mb-9 text-center md:mb-10">
            <h2 className="ombre ombre-round mb-6 text-4xl md:text-5xl lg:text-6xl">Volume up. Layer lines down.</h2>
            <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground">
              We believe a printed object should feel made, not manufactured. Bold where it counts, clean where it matters, and finished like someone cared.
            </p>
          </div>
          <StatsStrip />
        </div>
      </section>

      {/* COMMISSION CTA */}
      <section className="relative overflow-hidden py-28">
        <div className="absolute inset-0 grid-floor opacity-20"></div>
        <div
          className="pointer-events-none absolute left-1/2 top-1/2 h-72 w-[36rem] -translate-x-1/2 -translate-y-1/2 rounded-full blur-3xl"
          style={{ background: 'radial-gradient(circle, hsl(var(--magenta) / 0.2), transparent 70%)' }}
        ></div>
        <div className="container relative mx-auto text-center">
          <h2 className="ombre ombre-round mb-4 text-4xl md:text-5xl lg:text-6xl">Bring us the weird one.</h2>
          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted-foreground">
            The character that only exists in your head. The collectible nobody makes anymore. The gift that has to be one of one. Let's scope it.
          </p>
          <Button size="lg" variant="secondary" onClick={() => go('/commission')}>Start a commission <Icon name="arrow-right" /></Button>
        </div>
      </section>

      {activeService && <ServiceDetailModal service={activeService} onClose={() => setActiveService(null)} />}
    </div>
  );
}

function ServiceDetailModal({ service, 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(service.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(service.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 }}>{service.tag}</div>
          <h3 className="crt-head mb-4 font-heading text-3xl tracking-wide md:text-4xl">{service.title}</h3>
          <p className="text-base leading-relaxed text-muted-foreground">{service.description}</p>
          {service.from != null && (
            <div className="mt-5 flex items-baseline gap-2">
              <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">From</span>
              <span className="lit-price quote-data text-2xl neon-text" style={{ color }}>${service.from}</span>
            </div>
          )}
        </div>

        <div className="grid gap-4">
          {(service.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 this kind of piece <Icon name="arrow-right" /></Button>
          <Button variant="outline" onClick={onClose}>Back to disciplines</Button>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { HomePage, FeaturedObject, ServiceDetailModal });