// landing.jsx — StudioKerf CR landing page
// Two variants (Nocturna / Luminoso) controlled via Tweaks.

const { useState, useEffect, useRef, useMemo } = React;

// ─── Data ───────────────────────────────────────────────────────────────────

const TRACKS = [
  { id: 'monaco',    name: 'Mónaco',           country: 'MCO', laps: 78, file: 'assets/f1-monaco.svg' },
  { id: 'spa',       name: 'Spa-Francorchamps', country: 'BEL', laps: 44, file: 'assets/f1-spa-belgium.png' },
  { id: 'suzuka',    name: 'Suzuka',            country: 'JPN', laps: 53, file: 'assets/f1-suzuka-japan.png' },
];

const MOTOS = [
  { id: 'transalp', name: 'Motos', sub: 'Adventure · 750cc', file: 'assets/moto-transalp.svg' },
];

const MASCOTAS = [
  { id: 'farid', name: 'Mascotas', sub: 'Retrato personalizado', file: 'assets/mascota-perrito.svg' },
];

const SERVICES = [
  {
    n: '01',
    title: 'Llaveros & souvenirs',
    desc: 'Piezas pequeñas con detalle. Ideal para regalos, eventos, recuerdos de viaje o de pasión.',
    specs: [['MAT', 'Acrílico · MDF'], ['KERF', '0.10 mm'], ['LEAD', '3–5 días']],
    wide: false,
  },
  {
    n: '02',
    title: 'Tablas de corte grabadas',
    desc: 'Madera de calidad con grabado profundo. Para bodas, aniversarios y regalos premium.',
    specs: [['MAT', 'Roble · Bambú'], ['SIZE', 'Hasta 40×30'], ['LEAD', '7–10 días']],
    wide: false,
  },
  {
    n: '03',
    title: 'Botellas, termos & vidrio',
    desc: 'Grabado rotativo en vidrio y acero. Detalle fino para regalos corporativos y graduaciones.',
    specs: [['MAT', 'Vidrio · Acero'], ['VOL', '500ml–1L'], ['LEAD', '5–7 días']],
    wide: false,
  },
  {
    n: '04',
    title: 'Encargos a medida',
    desc: 'Letreros iluminados, cuero personalizado, parches, marcos con fecha, puzzles. Si tienes una idea, podemos cortarla.',
    specs: [['MAT', 'Multi-material'], ['MIN', '1 pieza'], ['LEAD', 'Consultar']],
    wide: true,
  },
];

const PROCESS = [
  { n: '01', title: 'Cuéntanos la idea', desc: 'Por DM en Instagram o WhatsApp. Foto, boceto, o solo la intención — partimos de cualquier cosa.', time: '< 24 h respuesta' },
  { n: '02', title: 'Diseñamos juntos', desc: 'Te mando un mockup digital. Iteramos hasta que cada milímetro esté como lo querés.', time: '1–2 días' },
  { n: '03', title: 'Cortamos & grabamos', desc: 'Láser CO₂ calibrado por material. Cada pieza se prueba antes de salir del taller.', time: '2–5 días' },
  { n: '04', title: 'Lo recibís', desc: 'Entrega en el GAM o envío Correos de Costa Rica. Llega listo para regalar.', time: '+1–3 días' },
];

const MATERIALS = ['Madera', 'MDF', 'Acrílico', 'Cuero', 'Vidrio', 'Acero', 'Tela', 'Bambú'];

// ─── Hooks ──────────────────────────────────────────────────────────────────

function useReveal() {
  useEffect(() => {
    // Opt into the hidden-by-default state ONLY now that JS is running, so a
    // failed IO never leaves the page blank.
    document.body.classList.add('js-reveal');

    const els = document.querySelectorAll('[data-reveal]');
    const inViewport = (el) => {
      const r = el.getBoundingClientRect();
      return r.top < (window.innerHeight || 800) && r.bottom > 0;
    };

    // Anything already on-screen → reveal next frame so the transition still plays.
    requestAnimationFrame(() => {
      els.forEach((el) => { if (inViewport(el)) el.classList.add('is-in'); });
    });

    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('is-in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));

    // Safety net: if IO is broken or never fires for some reason, force-reveal
    // everything after 1.5s so the page is never stuck blank.
    const safety = setTimeout(() => {
      els.forEach((el) => el.classList.add('is-in'));
    }, 1500);

    return () => { io.disconnect(); clearTimeout(safety); };
  }, []);
}

// Tracks scroll for parallax-y hero
function useScrollY() {
  const [y, setY] = useState(0);
  useEffect(() => {
    let raf = 0;
    const on = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => setY(window.scrollY));
    };
    window.addEventListener('scroll', on, { passive: true });
    return () => { window.removeEventListener('scroll', on); cancelAnimationFrame(raf); };
  }, []);
  return y;
}

// ─── Small components ───────────────────────────────────────────────────────

function Crosshair({ style }) {
  return <span className="crosshair" style={style} aria-hidden />;
}

function IGIcon({ size = 16 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
      <rect x="3" y="3" width="18" height="18" rx="5" stroke="currentColor" strokeWidth="1.8"/>
      <circle cx="12" cy="12" r="4" stroke="currentColor" strokeWidth="1.8"/>
      <circle cx="17.4" cy="6.6" r="1.1" fill="currentColor"/>
    </svg>
  );
}

function ArrowIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden>
      <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Striped placeholder with optional content overlay
function Placeholder({ label, aspect = '4/3', children, style }) {
  return (
    <div className="placeholder" style={{ aspectRatio: aspect, ...style }}>
      {children}
      {label && <span className="placeholder-tag">{label}</span>}
    </div>
  );
}

// SVG-loader: fetch + inline (so we can recolor via CSS filter)
function LaserSVG({ src, alt }) {
  // Use <img> with a CSS filter; simpler + cached. We rely on .gal-item-thumb img filter.
  return <img src={src} alt={alt} loading="lazy" />;
}

// ─── Sections ───────────────────────────────────────────────────────────────

function Nav({ instagram }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <a href="#top" className="nav-logo" aria-label="StudioKerf CR">
          <img src="assets/logo.png" alt="" />
          <span className="nav-logo-text">Studio Kerf <span style={{ color: 'var(--gold)' }}>CR</span></span>
        </a>
        <nav className="nav-links">
          <a className="nav-link" href="#servicios">Servicios</a>
          <a className="nav-link" href="#galeria">Galería</a>
          <a className="nav-link" href="#proceso">Proceso</a>
          <a className="nav-link" href="#taller">Taller</a>
          <a className="nav-link" href="#contacto">Contacto</a>
        </nav>
        <a className="btn btn--ghost" href={`https://instagram.com/${instagram}`} target="_blank" rel="noopener noreferrer">
          <IGIcon /> @{instagram}
        </a>
      </div>
    </header>
  );
}

function Hero({ heroLine1, heroLine2, instagram }) {
  const y = useScrollY();
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden style={{ transform: `translateY(${y * 0.12}px)` }}>
        <img src="assets/f1-monaco.svg" alt="" />
      </div>
      <div className="hero-inner">
        <div className="hero-eyebrow" data-reveal>
          <span style={{ width: 28, height: 1, background: 'currentColor', display: 'inline-block' }} />
          Studio Kerf · Costa Rica
          <span>· est. 2025</span>
        </div>
        <h1 className="display hero-title">
          {heroLine1}<br/>
          <em>{heroLine2}</em>
        </h1>
        <p className="hero-sub" data-reveal style={{ '--d': '180ms' }}>
          Corte y grabado láser personalizado en San José, Desamparados. Piezas únicas
          para regalos, recuerdos y proyectos en madera, acrílico, cuero y vidrio.
        </p>
        <div className="hero-ctas" data-reveal style={{ '--d': '260ms' }}>
          <a className="btn btn--gold" href={`https://instagram.com/${instagram}`} target="_blank" rel="noopener noreferrer">
            <IGIcon /> Ver trabajos en Instagram
          </a>
          <a className="btn btn--ghost" href="#galeria">
            Explorar galería <ArrowIcon />
          </a>
        </div>
      </div>

      <div className="hero-meta" data-reveal style={{ '--d': '340ms' }}>
        <div className="hero-meta-item">
          <div className="hero-meta-k">Máquina</div>
          <div className="hero-meta-v">Láser CO₂</div>
        </div>
        <div className="hero-meta-item">
          <div className="hero-meta-k">Materiales</div>
          <div className="hero-meta-v">Madera · Acrílico · Cuero · Vidrio</div>
        </div>
        <div className="hero-meta-item">
          <div className="hero-meta-k">Ubicación</div>
          <div className="hero-meta-v">San José · Desamparados</div>
        </div>
        <div className="hero-meta-item">
          <div className="hero-meta-k">Contacto</div>
          <div className="hero-meta-v">@{instagram}</div>
        </div>
      </div>
    </section>
  );
}

function Marquee() {
  return (
    <div className="matstrip">
      <div className="matstrip-row">
        {MATERIALS.map((m) => <span key={m}>{m}</span>)}
      </div>
    </div>
  );
}

function Services() {
  return (
    <section className="section" id="servicios">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">§ 01 — Servicios</div>
            <h2 className="display section-title">Qué puedo<br/>hacer para vos</h2>
          </div>
          <div className="section-kicker">04 categorías · materiales múltiples</div>
        </div>

        <div className="svc-grid">
          {SERVICES.map((s, i) => (
            <article
              key={s.n}
              className={`svc-card card-hover ${s.wide ? 'svc-card--wide' : ''}`}
              data-reveal
              style={{ '--d': `${i * 80}ms` }}
            >
              {s.wide ? (
                <>
                  <div className="svc-body">
                    <span className="svc-num">{s.n} · ENCARGOS</span>
                    <h3 className="svc-title">{s.title}</h3>
                    <p className="svc-desc">{s.desc}</p>
                    <div className="svc-specs">
                      {s.specs.map(([k, v]) => (
                        <span className="svc-spec" key={k}>{k} · <b>{v}</b></span>
                      ))}
                    </div>
                  </div>
                  <div className="svc-visual">
                    <Crosshair style={{ top: 12, left: 12 }} />
                    <Crosshair style={{ top: 12, right: 12 }} />
                    <Crosshair style={{ bottom: 12, left: 12 }} />
                    <Crosshair style={{ bottom: 12, right: 12 }} />
                    <Placeholder label="Letrero LED · Cuero · Marcos · Parches" aspect="4/3" />
                  </div>
                </>
              ) : (
                <>
                  <span className="svc-num">{s.n}</span>
                  <h3 className="svc-title">{s.title}</h3>
                  <p className="svc-desc">{s.desc}</p>
                  <div className="svc-specs">
                    {s.specs.map(([k, v]) => (
                      <span className="svc-spec" key={k}>{k} · <b>{v}</b></span>
                    ))}
                  </div>
                </>
              )}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Gallery({ category, setCategory }) {
  const items = useMemo(() => {
    if (category === 'F1') return TRACKS;
    if (category === 'Motos') return MOTOS;
    if (category === 'Mascotas') return MASCOTAS;
    return [...TRACKS, ...MOTOS, ...MASCOTAS];
  }, [category]);

  const isF1 = category === 'F1';

  return (
    <section className="section" id="galeria" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">§ 02 — Galería</div>
            <h2 className="display section-title">Trabajos<br/><em style={{ color: 'var(--gold)', fontStyle: 'italic' }}>recientes</em></h2>
          </div>
          <div className="section-kicker">Tres líneas · catálogo en crecimiento</div>
        </div>

        <div className="gal-head" data-reveal>
          <div className="tag tag--solo" style={{ fontSize: 12 }}>
            {items.length} {items.length === 1 ? 'pieza' : 'piezas'} · línea {category.toLowerCase()}
          </div>
          <div className="gal-tabs" role="tablist">
            {['F1', 'Motos', 'Mascotas', 'Todas'].map((cat) => (
              <button
                key={cat}
                role="tab"
                aria-selected={category === cat}
                className={`gal-tab ${category === cat ? 'is-active' : ''}`}
                onClick={() => setCategory(cat)}
              >
                {cat}
              </button>
            ))}
          </div>
        </div>

        <div className="gal-grid" key={category}>
          {items.map((it, i) => {
            // Determine display name & sub
            const isTrack = 'country' in it;
            return (
              <article
                key={it.id}
                className="gal-item"
                data-reveal
                style={{ '--d': `${(i % 9) * 50}ms` }}
              >
                <div className="gal-item-thumb">
                  {isTrack && (
                    <span className="mono f1-label">F1 · {it.country}</span>
                  )}
                  <LaserSVG src={it.file} alt={it.name} />
                </div>
                <div className="gal-item-meta">
                  <h3 className={isTrack ? 'f1 gal-item-name' : 'gal-item-name'} style={isTrack ? { fontFamily: 'Formula1, "Instrument Serif", serif', fontSize: 18, letterSpacing: '0.04em', textTransform: 'uppercase' } : undefined}>
                    {it.name}
                  </h3>
                  <span className="gal-item-tag">
                    {isTrack ? `${it.laps} LAPS` : (it.sub ? it.sub.split('·')[0].trim().toUpperCase() : '')}
                  </span>
                </div>
                <div className="gal-item-specs">
                  <span className="gal-item-spec">MAT · MDF 3MM</span>
                  <span className="gal-item-spec">Ø 18CM</span>
                  <span className="gal-item-spec">GRABADO</span>
                </div>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function Process() {
  return (
    <section className="section" id="proceso">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">§ 03 — Proceso</div>
            <h2 className="display section-title">De la idea<br/>a tu mano</h2>
          </div>
          <div className="section-kicker">04 pasos · 1–2 semanas promedio</div>
        </div>

        <div className="proc-grid">
          {PROCESS.map((p, i) => (
            <div key={p.n} className="proc-step" data-reveal style={{ '--d': `${i * 100}ms` }}>
              <span className="proc-num">{p.n}</span>
              <h3 className="proc-title">{p.title}</h3>
              <p className="proc-desc">{p.desc}</p>
              <span className="proc-time">⌖ {p.time}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section" id="taller" style={{ background: 'var(--bg-2)' }}>
      <div className="container">
        <div className="section-head">
          <div>
            <div className="section-num">§ 04 — El taller</div>
            <h2 className="display section-title">Técnico de día,<br/>artesano de tarde</h2>
          </div>
          <div className="section-kicker">San José · Desamparados</div>
        </div>

        <div className="about">
          <div className="about-img" data-reveal>
            <Placeholder label="Foto del taller · láser en acción" aspect="4/5">
              <Crosshair style={{ top: 12, left: 12 }} />
              <Crosshair style={{ top: 12, right: 12 }} />
              <Crosshair style={{ bottom: 12, left: 12 }} />
              <Crosshair style={{ bottom: 12, right: 12 }} />
            </Placeholder>
          </div>
          <div className="about-body" data-reveal style={{ '--d': '120ms' }}>
            <p>
              StudioKerf nació en un taller pequeño en Desamparados, con una máquina
              láser CO₂ y diez años de oficio en sistemas y precisión técnica.
            </p>
            <p>
              No competimos por volumen ni por precio bajo. Cada pieza se diseña,
              prueba y termina a mano. La idea es que lo que recibís sea único —
              y dure.
            </p>
            <p>
              Trabajamos con clientes particulares, negocios pequeños, y empresas
              que buscan regalos corporativos con detalle. Si tu idea no calza en
              ninguna categoría, mejor: escribinos.
            </p>

            <div className="about-mats">
              {[
                ['CO₂', 'Láser de CO₂ calibrado'],
                ['Δ KERF', '0.08 – 0.12 mm'],
                ['MAT', 'Madera · MDF · Acrílico · Cuero · Vidrio · Tela'],
                ['ÁREA', 'Hasta 400 × 300 mm'],
              ].map(([k, v]) => (
                <div className="about-mat" key={k}>
                  <div className="about-mat-k">{k}</div>
                  <div className="about-mat-v">{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA({ instagram }) {
  return (
    <section className="section" id="contacto" style={{ padding: '40px 0' }}>
      <div className="container" style={{ padding: '0' }}>
        <div className="cta" data-reveal>
          <div className="cta-bg" aria-hidden>
            <img src="assets/f1-monaco.svg" alt="" />
          </div>
          <div className="cta-inner">
            <div className="cta-eyebrow">§ 05 — Empezá tu pieza</div>
            <h2 className="cta-title">¿Una idea<br/>en mente?<br/><em>Mandala.</em></h2>
            <p className="cta-sub">
              La forma más rápida de encargar algo es por DM en Instagram. Mostranos
              la idea, una foto o un boceto — respondemos en menos de 24 horas.
            </p>
            <div className="cta-row">
              <a className="btn btn--primary" href={`https://instagram.com/${instagram}`} target="_blank" rel="noopener noreferrer">
                <IGIcon size={18} /> Seguir @{instagram}
              </a>
              <a className="btn btn--ghost" href={`https://instagram.com/${instagram}`} target="_blank" rel="noopener noreferrer">
                Enviar DM <ArrowIcon />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ instagram }) {
  return (
    <footer className="footer">
      <div>STUDIO KERF CR · MMXXV · SAN JOSÉ, CR</div>
      <div style={{ display: 'flex', gap: 18 }}>
        <a href={`https://instagram.com/${instagram}`} target="_blank" rel="noopener noreferrer">@{instagram}</a>
        <span>·</span>
        <a href="#top">Volver arriba ↑</a>
      </div>
    </footer>
  );
}

// ─── Tweaks UI ──────────────────────────────────────────────────────────────

function TweaksUI({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Dirección visual" />
      <TweakRadio
        label="Variante"
        value={t.variant}
        options={[
          { value: 'nocturna', label: 'A · Nocturna' },
          { value: 'luminoso', label: 'B · Luminoso' },
        ]}
        onChange={(v) => setTweak('variant', v)}
      />
      <TweakColor
        label="Acento dorado"
        value={t.goldHue}
        options={['#d4a24a', '#b8843a', '#e3b75c', '#9a6a26', '#c89548']}
        onChange={(v) => setTweak('goldHue', v)}
      />
      <TweakToggle
        label="Textura granulada"
        value={t.grain}
        onChange={(v) => setTweak('grain', v)}
      />

      <TweakSection label="Hero · copy" />
      <TweakText label="Línea 1" value={t.heroLine1} onChange={(v) => setTweak('heroLine1', v)} />
      <TweakText label="Línea 2" value={t.heroLine2} onChange={(v) => setTweak('heroLine2', v)} />

      <TweakSection label="Galería" />
      <TweakSelect
        label="Categoría destacada"
        value={t.category}
        options={['F1', 'Motos', 'Mascotas', 'Todas']}
        onChange={(v) => setTweak('category', v)}
      />

      <TweakSection label="Marca" />
      <TweakText label="Handle Instagram" value={t.instagram} onChange={(v) => setTweak('instagram', v)} />
    </TweaksPanel>
  );
}

// ─── App ────────────────────────────────────────────────────────────────────

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);
  useReveal();

  // Sync category back into tweaks if user clicks gallery tabs
  const setCategory = (v) => setTweak('category', v);

  // Apply variant class on body (preserves any other classes like .js-reveal)
  useEffect(() => {
    const b = document.body;
    b.classList.remove('v-nocturna', 'v-luminoso');
    b.classList.add(`v-${t.variant}`);
    b.classList.toggle('grain', !!t.grain);
  }, [t.variant, t.grain]);

  // Apply gold accent override via CSSOM — no injection surface
  useEffect(() => {
    const SAFE_COLOR = /^#[0-9a-fA-F]{3,8}$|^rgb\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*\)$/;
    const safeHue = SAFE_COLOR.test(t.goldHue) ? t.goldHue : '#9a6a26';
    document.documentElement.style.setProperty('--gold', safeHue);
    document.querySelectorAll('.v-nocturna, .v-luminoso').forEach((el) => {
      el.style.setProperty('--gold', safeHue);
    });
    document.getElementById('gold-override-style')?.remove();
  }, [t.goldHue]);

  return (
    <>
      <Nav instagram={t.instagram} />
      <Hero heroLine1={t.heroLine1} heroLine2={t.heroLine2} instagram={t.instagram} />
      <Marquee />
      <Services />
      <Gallery category={t.category} setCategory={setCategory} />
      <Process />
      <About />
      <CTA instagram={t.instagram} />
      <Footer instagram={t.instagram} />
      <TweaksUI t={t} setTweak={setTweak} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);