/* WorkDataPlace · Desarrollo Web — Netflix-style portfolio */
const { useState, useEffect, useRef } = React;

const WA_NUMBER = "51993260417";
const waLink = (msg) => `https://wa.me/${WA_NUMBER}?text=${encodeURIComponent(msg)}`;

// ============ PROJECT DATA ============
const PROJECTS = [
  {
    id: "indomable",
    name: "Indomable Karaoke",
    tagline: "La voz y la actitud la pones tú",
    category: "hospitalidad",
    categoryLabel: "Karaoke · Bar",
    year: "2024",
    location: "Huacho · Perú",
    url: "https://indomablehuacho.vercel.app",
    image: "assets/indomable.png",
    embed: false, // age gate
    match: "98",
    tags: ["Hospitalidad", "Karaoke", "Animaciones"],
    stack: ["Next.js", "Framer Motion", "Tailwind", "Vercel"],
    description: "Web inmersiva para el karaoke más caliente de Huacho. Animaciones cinemáticas, paleta neón sobre noche profunda y una experiencia que invita a reservar mesa antes de terminar el scroll. Incluye carta interactiva, galería y módulo de reservas.",
    deliverables: ["Diseño 100% a medida", "Animaciones avanzadas", "Reserva de mesa", "SEO local"],
    fallback: "indomable",
  },
  {
    id: "donpolo-vinos",
    name: "Don Polo · Vinos & Piscos",
    tagline: "Tradición en cada copa",
    category: "hospitalidad",
    categoryLabel: "Bodega · E-commerce",
    year: "2025",
    location: "Valle de Huaura · Perú",
    url: "https://don-polo-vinos.vercel.app",
    image: "assets/donpolo-vinos.png",
    embed: false,
    match: "96",
    tags: ["Bodega", "E-commerce", "Editorial"],
    stack: ["Next.js", "GSAP", "Stripe", "Vercel"],
    description: "Identidad editorial para una bodega artesanal con casi medio siglo de historia. Tipografía serif italiana, paleta vino y dorado, y un catálogo de vinos y piscos pensado para la compra impulsiva.",
    deliverables: ["Catálogo e-commerce", "Pasarela de pago", "Historia de la marca", "Verificación de edad"],
    fallback: "donpolo",
  },
  {
    id: "donpolo-terrazas",
    name: "Don Polo Terrazas",
    tagline: "Bodega, terraza y cocina de autor",
    category: "hospitalidad",
    categoryLabel: "Restaurante · Bodega",
    year: "2026",
    location: "Valle de Huaura · Perú",
    url: "https://don-polo-terrazas.vercel.app",
    image: "assets/donpolo-terrazas.png",
    embed: false,
    match: "97",
    tags: ["Restaurante", "Reservas", "Editorial"],
    stack: ["Next.js", "Tailwind", "Framer Motion", "Sanity"],
    description: "Una mesa larga sobre el viñedo. Diseñamos la experiencia digital del nuevo proyecto de Don Polo: bodega, terraza y cocina de autor. Photo-storytelling, reservas online y carta digital que actualiza el chef desde su celular.",
    deliverables: ["Reservas online", "Carta CMS", "Galería editorial", "Mapa interactivo"],
    fallback: "donpolo",
  },
  {
    id: "copium",
    name: "Copium Cult",
    tagline: "The cult that copes",
    category: "web3",
    categoryLabel: "Web3 · Meme Culture",
    year: "2024",
    location: "Solana",
    url: "https://copiumcult.com/",
    image: "assets/copium.png",
    embed: false,
    match: "92",
    tags: ["Web3", "Meme coin", "Comunidad"],
    stack: ["Next.js", "Solana SDK", "Framer Motion", "Three.js"],
    description: "Web oficial del token Copium Cult en Solana. Aesthetics de culto digital, contador de holders en vivo, integración con DEX y tokenomics interactivos. Lanzamiento con +12k visitas el primer día.",
    deliverables: ["Diseño cultista", "Live token data", "Roadmap interactivo", "Integración wallet"],
    fallback: "copium",
  },
  {
    id: "ponke",
    name: "Ponke",
    tagline: "The mischievous monkey of Solana",
    category: "web3",
    categoryLabel: "Web3 · Meme Culture",
    year: "2024",
    location: "Solana",
    url: "https://www.ponke.xyz/",
    image: "assets/ponke.png",
    embed: false,
    match: "95",
    tags: ["Web3", "Meme coin", "Branding"],
    stack: ["Next.js", "GSAP", "Solana SDK", "Vercel"],
    description: "Sitio para una de las meme coins más reconocidas del ecosistema Solana. Mascot 3D animado, secciones con scroll cinemático, integración con CoinGecko en vivo y un universo visual que se volvió referencia en el cripto-meme space.",
    deliverables: ["Branding 3D", "Animaciones cinemáticas", "Live price feed", "Comunidad y socials"],
    fallback: "ponke",
  },
];

// ============ FAKE THUMBNAILS for non-screenshot projects ============
function FakeThumb({ kind, name }) {
  if (kind === "dpr") {
    return (
      <div className="ph-card ph-bg-dpr">
        <div className="label">CONSTRUCCIÓN · LIMA</div>
        <div className="name">DPR<span className="accent">.</span>WORK</div>
        <div className="tag">Refacción · Acabados · 2025</div>
      </div>
    );
  }
  if (kind === "copium") {
    return (
      <div className="ph-card ph-bg-copium">
        <div className="label">SOLANA · 2024</div>
        <div className="name">COPIUM<span className="accent"> CULT</span></div>
        <div className="tag">The cult that copes ✦</div>
      </div>
    );
  }
  if (kind === "ponke") {
    return (
      <div className="ph-card ph-bg-ponke">
        <div className="label">SOLANA · MEME COIN</div>
        <div className="name">PONKE</div>
        <div className="tag">🐒 Mischievous monkey</div>
      </div>
    );
  }
  return (
    <div className="ph-card" style={{ background: "#222" }}>
      <div className="name">{name}</div>
    </div>
  );
}

// ============ NAV ============
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="nav-left">
        <a href="#top" className="logo">
          <img src="assets/wdp-favicon-white.png" alt="WorkDataPlace" />
          <div className="word">
            <span className="w1">WORKDATAPLACE</span>
            <span className="w2">DESARROLLO WEB</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#proyectos">Proyectos</a>
          <a href="#categorias">Categorías</a>
          <a href="#planes">Planes</a>
          <a href="#contacto">Contacto</a>
        </div>
      </div>
      <div className="nav-right">
        <a
          className="nav-wa"
          href={waLink("Hola WorkDataPlace, vi su portafolio y me interesa una web. ¿Podemos conversar?")}
          target="_blank"
          rel="noopener"
        >
          <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
            <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-1 1.1c-.2.2-.4.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2s0-.3.1-.4l.4-.5c.1-.2.2-.3.3-.5s0-.4 0-.5c0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5 1.8.8 2.5.9 3.4.7.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z"/>
            <path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12 .1-3.2-1.2-6.3-3.4-8.3zM12 22c-1.8 0-3.5-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4C2.7 15.8 2.1 13.9 2.1 12 2.1 6.5 6.5 2.1 12 2.1c2.6 0 5.1 1 7 2.9s2.9 4.4 2.9 7C21.9 17.5 17.5 22 12 22z"/>
          </svg>
          WhatsApp
        </a>
      </div>
    </nav>
  );
}

// ============ HERO ============
const HERO_IDS = ["indomable", "donpolo-terrazas", "ponke"];

function Hero({ onOpen }) {
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % HERO_IDS.length), 7000);
    return () => clearInterval(t);
  }, []);
  const featured = HERO_IDS.map((id) => PROJECTS.find((p) => p.id === id));
  return (
    <header className="hero" id="top">
      {featured.map((p, i) => (
        <div key={p.id} className={`hero-slide ${i === idx ? "active" : ""}`}>
          {p.image ? (
            <div className="hero-bg" style={{ backgroundImage: `url(${p.image})` }} />
          ) : (
            <div className="hero-bg fake">
              <FakeThumb kind={p.fallback} name={p.name} />
            </div>
          )}
          <div className="hero-overlay" />
          <div className="hero-content">
            <div className="hero-badge">
              <span className="w">W·</span>
              <span className="t">WORKDATAPLACE ORIGINAL</span>
              <span className="dot">·</span>
              <span className="t">{p.categoryLabel}</span>
            </div>
            <h1 className="hero-title">{p.name}</h1>
            <div className="hero-meta">
              <span className="match" style={{ color: "var(--accent)", fontWeight: 700 }}>
                {p.match}% Match
              </span>
              <span className="pill">{p.year}</span>
              <span className="pill">HD</span>
              <span>{p.location}</span>
            </div>
            <p className="hero-desc">{p.description}</p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={() => onOpen(p)}>
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
                Ver proyecto
              </button>
              <button className="btn btn-secondary" onClick={() => onOpen(p)}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <circle cx="12" cy="12" r="9" />
                  <path d="M12 8v.01M12 12v4" strokeLinecap="round" />
                </svg>
                Más info
              </button>
            </div>
          </div>
        </div>
      ))}
      <div className="hero-dots">
        {featured.map((_, i) => (
          <span
            key={i}
            className={`hero-dot ${i === idx ? "active" : ""}`}
            onClick={() => setIdx(i)}
          />
        ))}
      </div>
    </header>
  );
}

// ============ CARD ============
function Card({ project, rank, onOpen }) {
  return (
    <div className="card" onClick={() => onOpen(project)}>
      <div className="card-thumb">
        {project.image ? (
          <img src={project.image} alt={project.name} loading="lazy" />
        ) : (
          <FakeThumb kind={project.fallback} name={project.name} />
        )}
      </div>
      {rank != null && <div className="card-rank">{rank}</div>}
      <div className="card-overlay">
        <div className="card-name">{project.name}</div>
        <div className="card-tags">
          {project.tags.slice(0, 3).map((t) => (
            <span key={t} className="card-tag">{t}</span>
          ))}
        </div>
      </div>
      <div className="card-play">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
      </div>
    </div>
  );
}

// ============ ROW ============
function Row({ title, subtitle, items, onOpen, ranked = false }) {
  return (
    <section className="row">
      <div className="row-head">
        <h2 className="row-title">{title}</h2>
        {subtitle && <span className="row-sub">{subtitle}</span>}
      </div>
      <div className="row-track">
        {items.map((p, i) => (
          <Card
            key={p.id + "-" + i}
            project={p}
            rank={ranked ? i + 1 : null}
            onOpen={onOpen}
          />
        ))}
      </div>
    </section>
  );
}

// ============ MODAL ============
function Modal({ project, onClose }) {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, []);
  if (!project) return null;
  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Cerrar">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
        <div className="modal-preview">
          {project.embed ? (
            <div className="modal-iframe-wrap">
              {loading && (
                <div className="modal-loading">
                  <div className="spinner" />
                  <div style={{ fontSize: 13 }}>Cargando preview en vivo…</div>
                </div>
              )}
              <iframe
                src={project.url}
                title={project.name}
                onLoad={() => setLoading(false)}
                sandbox="allow-same-origin allow-scripts allow-popups"
                referrerPolicy="no-referrer"
              />
            </div>
          ) : (
            <div className="modal-img-wrap">
              <img src={project.image} alt={project.name} />
            </div>
          )}
          <div className="modal-preview-gradient" />
        </div>
        <div className="modal-body">
          <h2 className="modal-title">{project.name}</h2>
          <div className="modal-meta">
            <span className="match">{project.match}% Match</span>
            <span className="sep">·</span>
            <span>{project.year}</span>
            <span className="sep">·</span>
            <span>{project.location}</span>
            <span className="sep">·</span>
            <span>{project.categoryLabel}</span>
          </div>
          <div className="modal-grid">
            <div>
              <p className="modal-desc">{project.description}</p>
              <div className="modal-actions">
                <a className="btn btn-primary" href={project.url} target="_blank" rel="noopener">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                    <path d="M14 3h7v7M21 3l-9 9M10 5H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-5" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  Visitar sitio
                </a>
                <a
                  className="btn btn-secondary"
                  href={waLink(`Hola, vi el proyecto ${project.name} en su portafolio y me interesa algo parecido. ¿Podemos cotizar?`)}
                  target="_blank"
                  rel="noopener"
                >
                  <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-1 1.1-.4.2-.6.1c-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2s0-.3.1-.4l.4-.5c.1-.2.2-.3.3-.5s0-.4 0-.5c0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5 1.8.8 2.5.9 3.4.7.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z"/><path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12 .1-3.2-1.2-6.3-3.4-8.3zM12 22c-1.8 0-3.5-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4C2.7 15.8 2.1 13.9 2.1 12 2.1 6.5 6.5 2.1 12 2.1c2.6 0 5.1 1 7 2.9s2.9 4.4 2.9 7C21.9 17.5 17.5 22 12 22z"/></svg>
                  Quiero algo así
                </a>
              </div>
            </div>
            <div className="modal-side">
              <div className="row"><span className="lab">Tagline:</span><span className="val">{project.tagline}</span></div>
              <div className="row"><span className="lab">Stack:</span><span className="val accent">{project.stack.join(" · ")}</span></div>
              <div className="row"><span className="lab">Incluye:</span></div>
              <ul style={{ listStyle: "none", marginTop: 6 }}>
                {project.deliverables.map((d) => (
                  <li key={d} style={{ fontSize: 13, color: "#d4d4d4", padding: "4px 0", display: "flex", gap: 8 }}>
                    <span style={{ color: "var(--accent)" }}>✓</span> {d}
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ============ PRICING ============
const PLANS = [
  {
    tier: "ENTRY",
    name: "Landing Esencial",
    blurb: "Una landing rápida, hermosa y lista para vender. Ideal para emprendimientos.",
    amount: 400,
    note: "Pago único · Entrega en 4 a 5 días",
    features: [
      { t: "Landing page de 1 sección larga", a: true },
      { t: "Hosting + SSL incluidos", a: true },
      { t: "Optimización para Google", a: true },
      { t: "Diseño adaptable a celular", a: true },
      { t: "Formulario de contacto a WhatsApp", a: true },
      { t: "1 ronda de revisiones", a: true },
      { t: "Animaciones y micro-interacciones", a: false },
      { t: "Carrito de pedidos", a: false },
      { t: "CMS para editar tú mismo", a: false },
    ],
    cta: "Empezar con Entry",
    featured: false,
  },
  {
    tier: "PRO",
    name: "Web Profesional",
    blurb: "El plan más elegido. Web multi-sección con diseño a medida y soporte real.",
    amount: 570,
    note: "Pago único · Entrega en 7 a 10 días",
    features: [
      { t: "Animaciones y micro-interacciones", a: true },
      { t: "Web con hasta 5 secciones", a: true },
      { t: "Diseño 100% a medida", a: true },
      { t: "SEO optimizado", a: true },
      { t: "Diseño adaptable a celular", a: true },
      { t: "Formulario de contacto", a: true },
      { t: "Integración de WhatsApp e IG", a: true },
      { t: "Carrito de pedidos", a: true },
      { t: "Hosting + SSL incluidos", a: true },
      { t: "Mantenimiento de 3 meses", a: true },
      { t: "3 rondas de revisiones", a: true },
    ],
    cta: "Quiero el Pro",
    featured: true,
  },
  {
    tier: "ENTERPRISE",
    name: "Plataforma a Medida",
    blurb: "Para negocios que necesitan más: e-commerce, reservas, pasarela de pagos y CMS.",
    amount: 1200,
    note: "Pago único · Revisiones ilimitadas en 30 días",
    features: [
      { t: "Animaciones y micro-interacciones", a: true },
      { t: "Web con hasta 5 secciones", a: true },
      { t: "Diseño 100% a medida", a: true },
      { t: "SEO optimizado", a: true },
      { t: "Diseño adaptable a celular", a: true },
      { t: "Formulario de contacto", a: true },
      { t: "Integración de WhatsApp e IG", a: true },
      { t: "Carrito de pedidos", a: true },
      { t: "Hosting + SSL incluidos", a: true },
      { t: "Mantenimiento de 6 meses", a: true },
      { t: "E-commerce / reservas", a: true },
      { t: "Pasarela de pagos integrada", a: true },
      { t: "CMS para editar contenido tú mismo", a: true },
      { t: "Revisiones ilimitadas en 30 días", a: true },
    ],
    cta: "Hablemos del Enterprise",
    featured: false,
  },
];

function Pricing() {
  return (
    <section className="pricing-section" id="planes">
      <div className="section-head" style={{ padding: "0 0 30px", textAlign: "center" }}>
        <div className="section-eyebrow">PLANES · DESARROLLO WEB</div>
        <h2 className="section-title">Elige tu paquete<br/><span style={{ color: "var(--accent)" }}>de despegue</span></h2>
        <p className="section-subtitle" style={{ margin: "0 auto" }}>
          Precios en Soles peruanos (PEN). Sin contratos largos, sin sorpresas, sin letra chica.
          Si no estás contento, no pagas la siguiente fase.
        </p>
      </div>
      <div className="pricing-grid">
        {PLANS.map((p) => (
          <div key={p.tier} className={`price-card ${p.featured ? "featured" : ""}`}>
            {p.featured && <div className="ribbon">MÁS ELEGIDO</div>}
            <div className="price-tier">{p.tier}</div>
            <div className="price-name">{p.name}</div>
            <p className="price-blurb">{p.blurb}</p>
            <div className="price-amount">
              <span className="currency">S/</span>
              <span className="value">{p.amount}</span>
              <span className="unit">PEN</span>
            </div>
            <div className="price-note">{p.note}</div>
            <ul className="price-features">
              {p.features.map((f) => (
                <li key={f.t} className={f.a ? "" : "muted"}>
                  {f.a ? (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M20 6L9 17l-5-5"/>
                    </svg>
                  ) : (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
                      <path d="M18 6L6 18M6 6l12 12"/>
                    </svg>
                  )}
                  <span>{f.t}</span>
                </li>
              ))}
            </ul>
            <a
              className="price-cta"
              href={waLink(`Hola WorkDataPlace, me interesa el plan ${p.name} (${p.tier} · S/${p.amount}). ¿Podemos coordinar?`)}
              target="_blank"
              rel="noopener"
            >
              {p.cta}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
                <path d="M5 12h14M13 5l7 7-7 7"/>
              </svg>
            </a>
          </div>
        ))}
      </div>
    </section>
  );
}

// ============ CTA + FOOTER ============
function Cta() {
  return (
    <section className="cta-section" id="contacto">
      <div className="cta-eyebrow">¿LISTO PARA LANZAR?</div>
      <h2 className="cta-title">Tu próxima web,<br/>en una conversación.</h2>
      <p className="cta-subtitle">
        Escríbenos por WhatsApp. Te respondemos en minutos, no en días. Sin compromiso, sin formularios eternos.
      </p>
      <a
        className="cta-wa"
        href={waLink("Hola WorkDataPlace, vi su portafolio y quiero conversar sobre mi proyecto web.")}
        target="_blank"
        rel="noopener"
      >
        <svg viewBox="0 0 24 24" fill="currentColor">
          <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9s-.5-.1-.7.1-.8.9-1 1.1-.4.2-.6.1c-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2s0-.3.1-.4l.4-.5c.1-.2.2-.3.3-.5s0-.4 0-.5c0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.5s1.1 2.9 1.2 3.1c.1.2 2.1 3.2 5 4.5 1.8.8 2.5.9 3.4.7.5-.1 1.7-.7 2-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.5-.3z"/>
          <path d="M20.5 3.5C18.3 1.2 15.2 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.6 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.7 1.4 6.6 0 12-5.4 12-12 .1-3.2-1.2-6.3-3.4-8.3zM12 22c-1.8 0-3.5-.5-5.1-1.4l-.4-.2-3.7 1 1-3.6-.2-.4C2.7 15.8 2.1 13.9 2.1 12 2.1 6.5 6.5 2.1 12 2.1c2.6 0 5.1 1 7 2.9s2.9 4.4 2.9 7C21.9 17.5 17.5 22 12 22z"/>
        </svg>
        Hablar por WhatsApp ahora
      </a>
      <div className="cta-meta">
        <strong>+51 993 260 417</strong> · Lima, Perú · Respuesta promedio: <strong>8 min</strong>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="logo">
            <img src="assets/wdp-favicon-white.png" alt="WorkDataPlace" style={{ width: 32, height: 32, filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.4))" }} />
            <div className="word">
              <span className="w1" style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 18, letterSpacing: "0.08em" }}>WORKDATAPLACE</span>
              <span className="w2" style={{ fontFamily: "'Bebas Neue', sans-serif", fontSize: 11, letterSpacing: "0.18em", color: "var(--accent)" }}>SOLUTIONS</span>
            </div>
          </div>
          <p>Soluciones tecnológicas para empresas que quieren crecer con inteligencia artificial, automatización y diseño de clase mundial.</p>
        </div>
        <div className="footer-col">
          <h4>Servicios</h4>
          <ul>
            <li><a href="https://workdataplace.com/#soluciones" target="_blank" rel="noopener">Chatbot WhatsApp IA</a></li>
            <li><a href="https://workdataplace.com/#soluciones" target="_blank" rel="noopener">POS Inteligente</a></li>
            <li><a href="#proyectos">Desarrollo Web</a></li>
            <li><a href="#planes">Planes & Precios</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Empresa</h4>
          <ul>
            <li><a href="https://workdataplace.com" target="_blank" rel="noopener">WorkDataPlace</a></li>
            <li><a href="#contacto">Contacto</a></li>
            <li><a href="https://workdataplace.com/privacy.html" target="_blank" rel="noopener">Privacidad</a></li>
            <li><a href="https://workdataplace.com/terms.html" target="_blank" rel="noopener">Términos</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h4>Contacto</h4>
          <ul>
            <li><a href={waLink("Hola WorkDataPlace")} target="_blank" rel="noopener">WhatsApp: +51 993 260 417</a></li>
            <li><a href="https://workdataplace.com" target="_blank" rel="noopener">workdataplace.com</a></li>
            <li>Lima, Perú</li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 WorkDataPlace Solutions. Todos los derechos reservados.</div>
        <div>Hecho con 🐈‍⬛ en Lima · 🚀</div>
      </div>
    </footer>
  );
}

// ============ PROFILE SELECT ============
function ProfileSelect({ onPick }) {
  const [exiting, setExiting] = useState(false);
  const handlePick = (id) => {
    setExiting(true);
    setTimeout(() => onPick(id), 550);
  };
  return (
    <div className={`profile-screen ${exiting ? "exiting" : ""}`}>
      <div className="profile-bg" />
      <div className="profile-inner">
        <div className="profile-logo">
          <img src="assets/wdp-favicon-white.png" alt="WDP" />
          <span className="t">WORKDATAPLACE · <span>DESARROLLO WEB</span></span>
        </div>
        <h1 className="profile-title">¿Quién está navegando?</h1>
        <p className="profile-sub">Elige tu perfil para ver el portafolio.</p>
        <div className="profile-grid">
          <div className="profile-card recommended" onClick={() => handlePick("cliente")}>
            <span className="profile-badge">EMPIEZA AQUÍ</span>
            <div className="profile-avatar cliente">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="8" r="4" fill="currentColor" />
                <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" fill="currentColor" />
              </svg>
            </div>
            <span className="profile-name">Cliente</span>
          </div>
          <div className="profile-card" onClick={() => handlePick("dev")}>
            <div className="profile-avatar dev">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <polyline points="8 6 2 12 8 18" />
                <polyline points="16 6 22 12 16 18" />
                <line x1="14" y1="4" x2="10" y2="20" />
              </svg>
            </div>
            <span className="profile-name">Dev</span>
          </div>
          <div className="profile-card" onClick={() => handlePick("bot")}>
            <div className="profile-avatar bot">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                <rect x="4" y="7" width="16" height="12" rx="2.5" />
                <path d="M12 7V4" /><circle cx="12" cy="3" r="1" fill="currentColor" />
                <circle cx="9" cy="13" r="1.3" fill="currentColor" />
                <circle cx="15" cy="13" r="1.3" fill="currentColor" />
                <path d="M9 16.5h6" />
                <path d="M2 12v2M22 12v2" />
              </svg>
            </div>
            <span className="profile-name">Bot</span>
          </div>
        </div>
        <div className="profile-hint">
          <span className="arrow">←</span> Recomendado si vienes a contratar una web
        </div>
      </div>
    </div>
  );
}

// ============ APP ============
function App() {
  const [profile, setProfile] = useState(null);
  const [open, setOpen] = useState(null);
  const [filter, setFilter] = useState("all");

  if (!profile) return <ProfileSelect onPick={setProfile} />;

  const filtered = filter === "all" ? PROJECTS : PROJECTS.filter((p) => p.category === filter);

  return (
    <>
      <Nav />
      <Hero onOpen={setOpen} />

      <main className="rows-section" id="proyectos">
        <Row
          title={<>Top en Perú <span className="accent">· Esta semana</span></>}
          subtitle="5 lanzamientos recientes"
          items={PROJECTS}
          onOpen={setOpen}
          ranked={true}
        />
      </main>

      <section id="categorias" className="section-head">
        <div className="section-eyebrow">EXPLORAR POR CATEGORÍA</div>
        <h2 className="section-title">No hacemos plantillas.<br/><span style={{ color: "var(--accent)" }}>Hacemos identidad.</span></h2>
        <p className="section-subtitle">
          Cada proyecto se diseña desde cero para sentirse único. Mira cómo cambia el tono según el rubro.
        </p>
      </section>

      <div className="filters">
        <button className={`filter ${filter === "all" ? "active" : ""}`} onClick={() => setFilter("all")}>Todos</button>
        <button className={`filter ${filter === "hospitalidad" ? "active" : ""}`} onClick={() => setFilter("hospitalidad")}>Hospitalidad</button>
        <button className={`filter ${filter === "web3" ? "active" : ""}`} onClick={() => setFilter("web3")}>Web3 / Crypto</button>
      </div>

      <div className="rows-section" style={{ marginTop: 0 }}>
        <Row
          title={
            filter === "hospitalidad" ? "Hospitalidad · Bares & Restaurantes"
            : filter === "web3" ? "Web3 · Meme Culture"
            : "Todos los proyectos"
          }
          subtitle={`${filtered.length} ${filtered.length === 1 ? "proyecto" : "proyectos"}`}
          items={filtered}
          onOpen={setOpen}
        />
      </div>

      <Pricing />
      <Cta />
      <Footer />

      {open && <Modal project={open} onClose={() => setOpen(null)} />}
    </>
  );
}

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