// components.jsx — Componentes principales del sitio

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

// ============================================
// CURSOR PERSONALIZADO
// ============================================
function CustomCursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);

  useEffect(() => {
    if (window.matchMedia('(hover: none)').matches) return;
    let dotX = 0, dotY = 0, ringX = 0, ringY = 0;
    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rafId;

    const onMove = (e) => { mx = e.clientX; my = e.clientY; };
    window.addEventListener('mousemove', onMove);

    const tick = () => {
      dotX += (mx - dotX) * 0.6;
      dotY += (my - dotY) * 0.6;
      ringX += (mx - ringX) * 0.18;
      ringY += (my - ringY) * 0.18;
      if (dotRef.current) dotRef.current.style.transform = `translate(${dotX}px, ${dotY}px) translate(-50%, -50%)`;
      if (ringRef.current) ringRef.current.style.transform = `translate(${ringX}px, ${ringY}px) translate(-50%, -50%)`;
      rafId = requestAnimationFrame(tick);
    };
    rafId = requestAnimationFrame(tick);

    // Hover detection
    const hoverables = 'a, button, .chip, .photo-item, .recipe-card, .blog-card, .product, input, .theme-toggle';
    const onOver = (e) => {
      if (e.target.closest(hoverables)) document.body.classList.add('cursor-hover');
    };
    const onOut = (e) => {
      if (e.target.closest(hoverables)) document.body.classList.remove('cursor-hover');
    };
    document.addEventListener('mouseover', onOver);
    document.addEventListener('mouseout', onOut);

    return () => {
      window.removeEventListener('mousemove', onMove);
      document.removeEventListener('mouseover', onOver);
      document.removeEventListener('mouseout', onOut);
      cancelAnimationFrame(rafId);
    };
  }, []);

  return (
    <React.Fragment>
      <div ref={ringRef} className="cursor-ring"></div>
      <div ref={dotRef} className="cursor-dot"></div>
    </React.Fragment>
  );
}

// ============================================
// NAVBAR
// ============================================
function Navbar({ theme, toggleTheme, cartCount, onCart }) {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [active, setActive] = useState('inicio');

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 20);
      const sections = ['inicio', 'blog', 'fotografia', 'cocina', 'merch', 'sobre-mi'];
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el) {
          const r = el.getBoundingClientRect();
          if (r.top <= 120 && r.bottom > 120) {
            setActive(id);
            break;
          }
        }
      }
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'blog', label: 'Blog' },
    { id: 'fotografia', label: 'Fotografía' },
    { id: 'cocina', label: 'Cocina' },
    { id: 'merch', label: 'Merch' },
    { id: 'sobre-mi', label: 'Sobre mí' },
  ];

  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#inicio" className="nav-logo" onClick={() => setMenuOpen(false)}>
        <span className="logo-mark">
          <svg viewBox="0 0 32 32" width="28" height="28">
            <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1"/>
            <path d="M 22 11 Q 17 8 13 12 Q 9 16 13 20 Q 17 24 22 21" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
            <circle cx="24" cy="22" r="1.5" fill="var(--accent)"/>
          </svg>
        </span>
        <span className="logo-word">Cristhy</span>
      </a>
      <div className={`nav-links ${menuOpen ? 'mobile-open' : ''}`}>
        {links.map(l => (
          <a
            key={l.id}
            href={`#${l.id}`}
            className={active === l.id ? 'active' : ''}
            onClick={() => setMenuOpen(false)}
          >
            {l.label}
          </a>
        ))}
      </div>
      <div className="nav-actions">
        <button className="theme-toggle" onClick={() => {
          const e = new CustomEvent('cmdk-open');
          window.dispatchEvent(new KeyboardEvent('keydown', { key: 'k', metaKey: true }));
        }} aria-label="Buscar" style={{ width: 38, height: 38 }}>
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-5-5" strokeLinecap="round"/></svg>
        </button>
        {onCart && <CartButton count={cartCount || 0} onClick={onCart} />}
        <button className="theme-toggle" onClick={toggleTheme} aria-label="Cambiar tema">
          <svg className="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <circle cx="12" cy="12" r="4"/>
            <path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" strokeLinecap="round"/>
          </svg>
          <svg className="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" strokeLinejoin="round"/>
          </svg>
        </button>
        <button className="menu-btn" onClick={() => setMenuOpen(!menuOpen)} aria-label="Menú">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
            {menuOpen ? <React.Fragment><path d="M6 6l12 12"/><path d="M6 18L18 6"/></React.Fragment> : <React.Fragment><path d="M4 7h16"/><path d="M4 12h16"/><path d="M4 17h16"/></React.Fragment>}
          </svg>
        </button>
      </div>
    </nav>
  );
}

// ============================================
// HERO
// ============================================
function Hero() {
  return (
    <section id="inicio" className="hero">
      <div className="hero-bg">
        <div className="blob blob-1"></div>
        <div className="blob blob-2"></div>
        <div className="blob blob-3"></div>
        <div className="hero-amp" aria-hidden="true">&amp;</div>
        <div className="hero-orbit" aria-hidden="true">
          <svg viewBox="0 0 200 200" width="100%" height="100%">
            <defs>
              <path id="orbit-path" d="M 100,100 m -82,0 a 82,82 0 1,1 164,0 a 82,82 0 1,1 -164,0" />
            </defs>
            <circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.3"/>
            <circle cx="100" cy="100" r="68" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.2"/>
            <circle cx="100" cy="100" r="44" fill="none" stroke="currentColor" strokeWidth="0.4" opacity="0.15"/>
            <circle cx="100" cy="8" r="3" fill="currentColor"/>
            <text fontSize="7" fill="currentColor" letterSpacing="3" opacity="0.7" fontFamily="var(--font-body)">
              <textPath href="#orbit-path" startOffset="0">
                ✦  CRISTHY · DIARIO ABIERTO · DESDE 2019  ·  ✦  CRISTHY · DIARIO ABIERTO · DESDE 2019
              </textPath>
            </text>
          </svg>
        </div>
      </div>
      <div className="container hero-grid">
        <div className="hero-text reveal-stagger">
          <span className="eyebrow">Diario personal · 2026</span>
          <h1 className="hero-title">
            Vivir<br/>
            <em>despacio</em>,<br/>
            <span className="stroke">contar</span><br/>
            bonito.
          </h1>
          <p className="lead">
            Escribo, cocino, fotografío y vivo despacio entre una furgoneta y una casa con huerto. Aquí dejo lo que aprendo por el camino.
          </p>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
            <a href="#blog" className="btn btn-primary btn-pill">
              Leer el último post
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a href="#sobre-mi" className="btn btn-ghost btn-pill">Conoce más</a>
          </div>
          <div className="hero-meta">
            <span>📍 N 42°12' · W 8°45'</span>
            <span className="dot"></span>
            <span>Galicia, España</span>
            <span className="dot"></span>
            <span>EST. 2019</span>
          </div>
        </div>
        <div className="hero-portrait reveal">
          <img className="portrait-img" src="cristhy-portrait.png" alt="Retrato de Cristhy" />
          <div className="portrait-tag">Self-portrait, primavera</div>
        </div>
      </div>
      <div className="scroll-hint">
        <span>scroll</span>
        <div className="line"></div>
      </div>
    </section>
  );
}

// ============================================
// MARQUEE
// ============================================
function Marquee() {
  const items = ['Vida lenta', '✦', 'Huerto & gallinas', '✦', 'Fotografía', '✦', 'Recetas caseras', '✦', 'Autocaravana', '✦', 'Vida en pareja', '✦'];
  const block = (
    <span>
      {items.map((it, i) => it === '✦' ? <span key={i} className="star">✦</span> : <span key={i}>{it}</span>)}
    </span>
  );
  return (
    <div className="marquee">
      <div className="marquee-track">
        {block}{block}
      </div>
    </div>
  );
}

// ============================================
// BLOG
// ============================================
function BlogSection({ layout, onOpen }) {
  const [filter, setFilter] = useState('Todo');
  const data = window.SITE_DATA;
  const posts = filter === 'Todo' ? data.blog : data.blog.filter(p => p.cat === filter);

  return (
    <section id="blog" className="section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="section-num">— 01 / Blog</span>
            <h2 style={{ marginTop: 12 }}>Lo último que <em>he escrito</em></h2>
          </div>
          <a href="#" className="btn-arrow">
            Ver archivo completo
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        <div className="filters reveal">
          {data.blogCategories.map(c => (
            <button
              key={c}
              className={`chip ${filter === c ? 'active' : ''}`}
              onClick={() => setFilter(c)}
            >{c}</button>
          ))}
        </div>

        <div className={`blog-grid reveal ${layout === 'list' ? 'blog-list' : ''}`}>
          {posts.map((p, i) => (
            <article key={p.id} onClick={() => onOpen && onOpen(p)} className={`blog-card ${p.featured && layout !== 'list' ? 'featured' : ''}`}>
              <div className="img-wrap">
                <img src={p.img} alt={p.title} loading="lazy" />
              </div>
              <div className="meta">
                <span className="cat">{p.cat}</span>
                <span>·</span>
                <span>{p.date}</span>
                <span>·</span>
                <span>{p.readTime}</span>
              </div>
              <h3>{p.title}</h3>
              <p>{p.excerpt}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// FOTOGRAFÍA
// ============================================
function PhotoSection() {
  const [filter, setFilter] = useState('Todo');
  const [lightbox, setLightbox] = useState(null);
  const data = window.SITE_DATA;
  const photos = filter === 'Todo' ? data.photos : data.photos.filter(p => p.cat === filter);

  const next = () => {
    if (lightbox === null) return;
    const idx = photos.findIndex(p => p.id === lightbox.id);
    setLightbox(photos[(idx + 1) % photos.length]);
  };
  const prev = () => {
    if (lightbox === null) return;
    const idx = photos.findIndex(p => p.id === lightbox.id);
    setLightbox(photos[(idx - 1 + photos.length) % photos.length]);
  };

  useEffect(() => {
    const onKey = (e) => {
      if (!lightbox) return;
      if (e.key === 'Escape') setLightbox(null);
      else if (e.key === 'ArrowRight') next();
      else if (e.key === 'ArrowLeft') prev();
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  });

  return (
    <section id="fotografia" className="section" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="section-num">— 02 / Fotografía</span>
            <h2 style={{ marginTop: 12 }}>Lo que <em>la luz</em> me deja</h2>
          </div>
          <a href="#" className="btn-arrow">
            Ver galería completa
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        <div className="filters reveal">
          {data.photoCategories.map(c => (
            <button key={c} className={`chip ${filter === c ? 'active' : ''}`} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>

        <div className="photo-mason reveal">
          {photos.map(p => (
            <div key={p.id} className="photo-item" onClick={() => setLightbox(p)}>
              <img src={p.src} alt={p.title} loading="lazy" style={{ aspectRatio: `1 / ${p.h}` }} />
              <div className="overlay"><span>{p.title}</span></div>
            </div>
          ))}
        </div>
      </div>

      <div className={`lightbox ${lightbox ? 'open' : ''}`} onClick={() => setLightbox(null)}>
        {lightbox && (
          <React.Fragment>
            <img src={lightbox.src} alt={lightbox.title} onClick={(e) => e.stopPropagation()} />
            <button className="lightbox-close" onClick={() => setLightbox(null)}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 6l12 12M6 18L18 6"/></svg>
            </button>
            <button className="lightbox-nav prev" onClick={(e) => { e.stopPropagation(); prev(); }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M15 6l-6 6 6 6"/></svg>
            </button>
            <button className="lightbox-nav next" onClick={(e) => { e.stopPropagation(); next(); }}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 6l6 6-6 6"/></svg>
            </button>
            <div className="lightbox-info">{lightbox.title} · {lightbox.cat}</div>
          </React.Fragment>
        )}
      </div>
    </section>
  );
}

// ============================================
// COCINA
// ============================================
function CookingSection({ onOpen }) {
  const [filter, setFilter] = useState('Todo');
  const data = window.SITE_DATA;
  const recipes = filter === 'Todo' ? data.recipes : data.recipes.filter(r => r.cat === filter);

  return (
    <section id="cocina" className="section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="section-num">— 03 / Cocina</span>
            <h2 style={{ marginTop: 12 }}>Recetas que <em>repito siempre</em></h2>
          </div>
          <a href="#" className="btn-arrow">
            Ver recetario
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        <div className="filters reveal">
          {data.recipeCategories.map(c => (
            <button key={c} className={`chip ${filter === c ? 'active' : ''}`} onClick={() => setFilter(c)}>{c}</button>
          ))}
        </div>

        <div className="recipe-grid reveal">
          {recipes.map(r => (
            <article key={r.id} onClick={() => onOpen && onOpen(r)} className="recipe-card">
              <img src={r.img} alt={r.title} loading="lazy" />
              <div className="info">
                <div className="top-meta">
                  <span className="badge">{r.cat}</span>
                  <span className="time">
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2" strokeLinecap="round"/></svg>
                    {r.time}
                  </span>
                </div>
                <div className="bottom">
                  <h3>{r.title}</h3>
                  <div className="ingredients">{r.ingredients}</div>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// MERCH
// ============================================
function ProductArt({ kind }) {
  const colors = { 1: 'var(--pink-deep)', 2: 'var(--purple-deep)' };
  if (kind === 'tote') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <path d="M28 32 L28 80 Q28 86 34 86 L66 86 Q72 86 72 80 L72 32 Z" fill="var(--ink)" opacity="0.85"/>
      <path d="M40 32 Q40 22 50 22 Q60 22 60 32" fill="none" stroke="var(--ink)" strokeWidth="3"/>
      <text x="50" y="62" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="14" fill="white">slow</text>
    </svg>
  );
  if (kind === 'mug') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <rect x="22" y="32" width="48" height="48" rx="4" fill="var(--ink)" opacity="0.85"/>
      <path d="M70 44 Q82 44 82 56 Q82 68 70 68" fill="none" stroke="var(--ink)" strokeWidth="3" opacity="0.85"/>
      <circle cx="46" cy="56" r="3" fill="var(--accent)"/>
    </svg>
  );
  if (kind === 'shirt') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <path d="M20 30 L36 22 Q42 28 50 28 Q58 28 64 22 L80 30 L74 42 L66 38 L66 84 L34 84 L34 38 L26 42 Z" fill="var(--ink)" opacity="0.85"/>
      <text x="50" y="62" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="10" fill="white">huerta crew</text>
    </svg>
  );
  if (kind === 'stickers') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <circle cx="32" cy="38" r="14" fill="var(--pink-deep)"/>
      <rect x="52" y="22" width="28" height="28" rx="4" fill="var(--purple-deep)" transform="rotate(8 66 36)"/>
      <path d="M30 60 L50 60 L40 78 Z" fill="var(--accent)"/>
      <circle cx="68" cy="68" r="12" fill="none" stroke="var(--ink)" strokeWidth="2"/>
      <text x="68" y="72" textAnchor="middle" fontSize="8" fill="var(--ink)" fontFamily="Fraunces, serif" fontStyle="italic">hi</text>
    </svg>
  );
  if (kind === 'hoodie') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <path d="M22 36 L36 22 L42 28 Q50 32 58 28 L64 22 L78 36 L72 50 L66 46 L66 86 L34 86 L34 46 L28 50 Z" fill="var(--ink)" opacity="0.85"/>
      <path d="M42 28 Q50 38 58 28 L58 42 Q50 48 42 42 Z" fill="var(--bg)"/>
      <circle cx="50" cy="64" r="3" fill="var(--accent)"/>
    </svg>
  );
  if (kind === 'presets') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <rect x="24" y="28" width="52" height="38" rx="3" fill="var(--ink)" opacity="0.85"/>
      <circle cx="38" cy="42" r="4" fill="var(--accent)"/>
      <path d="M28 60 L42 50 L56 56 L72 44 L72 62 L28 62 Z" fill="var(--purple-deep)"/>
      <rect x="34" y="72" width="32" height="6" rx="3" fill="var(--ink)" opacity="0.6"/>
    </svg>
  );
  if (kind === 'ebook') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <rect x="28" y="22" width="44" height="58" rx="2" fill="var(--ink)" opacity="0.85"/>
      <rect x="32" y="22" width="2" height="58" fill="var(--accent)"/>
      <text x="52" y="42" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="12" fill="white">cocina</text>
      <text x="52" y="58" textAnchor="middle" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="12" fill="white">lenta</text>
      <line x1="38" y1="68" x2="66" y2="68" stroke="white" strokeWidth="0.5" opacity="0.5"/>
    </svg>
  );
  if (kind === 'print') return (
    <svg viewBox="0 0 100 100" width="100%" height="100%">
      <rect x="22" y="20" width="56" height="64" fill="var(--bg)" stroke="var(--ink)" strokeWidth="2"/>
      <path d="M32 50 Q40 42 48 48 T68 52 L72 70 L28 72 Z" fill="var(--purple-deep)" opacity="0.6"/>
      <circle cx="60" cy="36" r="6" fill="var(--accent)"/>
      <path d="M30 78 L70 78" stroke="var(--ink)" strokeWidth="0.5" opacity="0.5"/>
    </svg>
  );
  return null;
}

function MerchSection({ onAdd }) {
  const data = window.SITE_DATA;
  const [added, setAdded] = useState(null);
  const handleAdd = (p, e) => {
    e && e.stopPropagation();
    if (onAdd) onAdd(p);
    setAdded(p.id);
    setTimeout(() => setAdded(null), 1200);
  };
  return (
    <section id="merch" className="section" style={{ background: 'var(--bg-soft)' }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="section-num">— 04 / Tienda</span>
            <h2 style={{ marginTop: 12 }}>Cositas <em>bonitas</em></h2>
          </div>
          <a href="#" className="btn-arrow">
            Ver tienda
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>

        <div className="merch-grid reveal">
          {data.merch.map(p => (
            <article key={p.id} className="product">
              <div className={`img-wrap ${p.bg}`}>
                <div className="product-art"><ProductArt kind={p.art} /></div>
                <button className="quick" onClick={(e) => handleAdd(p, e)}>
                  {added === p.id ? '✓ Añadido' : `Añadir al carrito · ${p.price}`}
                </button>
              </div>
              <h4>{p.name}</h4>
              <div className="row">
                <span className="price">{p.price}</span>
                <span className="tag">{p.tag}</span>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// ABOUT
// ============================================
function AboutSection() {
  const data = window.SITE_DATA;
  return (
    <section id="sobre-mi" className="section">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="section-num">— 05 / Sobre mí</span>
            <h2 style={{ marginTop: 12 }}>Un poquito <em>de mí</em></h2>
          </div>
        </div>
        <div className="about-grid">
          <div className="about-text reveal-stagger">
            {data.about.bio.map((p, i) => (
              <p key={i}>{i === 0 ? <em>{p.split('.')[0]}.</em> : null}{i === 0 ? p.substring(p.indexOf('.') + 1) : p}</p>
            ))}
            <div style={{ display: 'flex', gap: 12, marginTop: 16, flexWrap: 'wrap' }}>
              <a href="https://www.instagram.com/yosoyc" target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-pill">Instagram</a>
              <a href="https://www.youtube.com/@Lavidadecristhy" target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-pill">YouTube</a>
              <a href="https://www.facebook.com/profile.php?id=61588813965319" target="_blank" rel="noopener noreferrer" className="btn btn-ghost btn-pill">Facebook</a>
            </div>
          </div>
          <div className="about-image reveal">
            <img src="cristhy-portrait.png" alt="Cristhy en casa" />
            <div style={{ position: 'absolute', bottom: 16, left: 16 }}>
              <NowWidget />
            </div>
          </div>
        </div>
        <div className="stats reveal-stagger">
          {data.about.stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="num">{s.num}</div>
              <div className="lbl">{s.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================
// NEWSLETTER
// ============================================
function Newsletter() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const submit = (e) => { e.preventDefault(); if (email) setSent(true); };

  return (
    <section id="newsletter" className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="newsletter reveal">
          <div className="glow"></div>
          <span className="eyebrow" style={{ justifyContent: 'center', display: 'inline-flex' }}>Newsletter</span>
          <h2 style={{ marginTop: 16 }}>Carta del <em>domingo</em></h2>
          <p>Una vez al mes te cuento qué cocino, qué leo y dónde estoy. Sin spam, sin promesas raras. Solo el café del domingo.</p>
          {!sent ? (
            <form className="signup" onSubmit={submit}>
              <input type="email" placeholder="tu@email.com" value={email} onChange={(e) => setEmail(e.target.value)} required />
              <button type="submit">Suscribirme</button>
            </form>
          ) : (
            <div style={{ padding: 18, color: 'var(--accent)', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22 }}>
              ¡Gracias! Te escribiré pronto ✦
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================
// FOOTER
// ============================================
function Footer() {
  return (
    <footer>
      <div className="footer-grid">
        <div>
          <div className="footer-brand">Cristhy<span className="dot">.</span></div>
          <p style={{ marginTop: 16, color: 'var(--ink-soft)', maxWidth: 320 }}>
            Diario personal sobre vida lenta, recetas, fotografía y todo lo que pasa entre medias.
          </p>
        </div>
        <div className="footer-col">
          <h5>Explorar</h5>
          <ul>
            <li><a href="#blog">Blog</a></li>
            <li><a href="#fotografia">Fotografía</a></li>
            <li><a href="#cocina">Cocina</a></li>
            <li><a href="#merch">Merch</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Sígueme</h5>
          <ul>
            <li><a href="https://www.instagram.com/yosoyc" target="_blank" rel="noopener noreferrer">Instagram</a></li>
            <li><a href="https://www.youtube.com/@Lavidadecristhy" target="_blank" rel="noopener noreferrer">YouTube</a></li>
            <li><a href="https://www.facebook.com/profile.php?id=61588813965319" target="_blank" rel="noopener noreferrer">Facebook</a></li>
            
          </ul>
        </div>
        <div className="footer-col">
          <h5>Info</h5>
          <ul>
            <li><a href="#sobre-mi">Sobre mí</a></li>
            <li><a href="#">Contacto</a></li>
            <li><a href="#">Prensa</a></li>
            <li><a href="#">Privacidad</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bot">
        <span>© 2026 Cristhy. Hecho con calma en Galicia.</span>
        <span>cristhy.com</span>
      </div>
    </footer>
  );
}

// Export
Object.assign(window, {
  CustomCursor, Navbar, Hero, Marquee,
  BlogSection, PhotoSection, CookingSection, MerchSection,
  AboutSection, Newsletter, Footer
});
