/* global React, Nav, Footer, ClientTicker, LemonMark, WaterlemonCursor, useInView, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakToggle */
const { useState, useEffect, useRef } = React;

const ALL_CASES = [
  {
    title: "Club Pilates",
    industry: "Wellness",
    location: "España · +25 estudios",
    summary: "Convertimos una franquicia franquiciada en una red de marcas locales con personalidad. Stories que sí venden, ads que traen leads, comunidad que retiene.",
    services: ["Redes Sociales", "Contenido", "Meta Ads", "Estrategia"],
    kpis: [{ v: "+25", l: "estudios" }, { v: "+340%", l: "leads/mes" }, { v: "+62%", l: "engagement" }, { v: "5 años", l: "juntos desde su apertura" }],
    stamp: "FLAGSHIP",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.55), rgba(13,13,15,0.92))",
    cat: "wellness",
  },
  {
    title: "O'Retorniño",
    industry: "Restauración",
    location: "Barcelona",
    summary: "\"El mejor pulpo de Barcelona\", hecho con amor y humor. Estrategia integral desde 2019: redes, foto, vídeo, ads. Reservas siempre llenas.",
    services: ["Estrategia", "Foto & Video", "Redes Sociales", "Contenido"],
    kpis: [{ v: "×25", l: "alcance" }, { v: "+250%", l: "crecimiento en redes" }, { v: "7 años", l: "juntos" }],
    stamp: "DESDE 2019",
    grad: "linear-gradient(135deg, rgba(255,184,217,0.5), rgba(13,13,15,0.9))",
    cat: "food",
  },
  {
    title: "Centros Artes Marciales",
    industry: "Wellness · Defensa Personal",
    location: "España",
    summary: "Web nueva, SEO local, Google Ads y CRO para una red de centros familiares. De la búsqueda al lead cualificado, sin desperdicio de budget.",
    services: ["Web", "SEO", "Google Ads", "CRO"],
    kpis: [{ v: "+210%", l: "tráfico SEO" }, { v: "−38%", l: "CPL" }, { v: "TOP 3", l: "Google" }],
    stamp: "GROWTH",
    grad: "linear-gradient(135deg, rgba(225,29,116,0.5), rgba(26,26,29,0.95))",
    cat: "wellness",
  },
  {
    title: "Orangetheory Valencia",
    industry: "Fitness · Franquicia",
    location: "Valencia",
    summary: "Creación de contenido y gestión de redes para una franquicia premium en Valencia. Un salto real en su presencia orgánica: más alcance, más comunidad, más marca.",
    services: ["Creación de contenido", "Redes sociales", "Comunidad"],
    kpis: [{ v: "Contenido", l: "creación mensual" }, { v: "Orgánico", l: "crecimiento en redes" }, { v: "5★", l: "valoración" }],
    stamp: "LOCAL ❤",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.45), rgba(13,13,15,0.95))",
    cat: "wellness",
  },
  {
    title: "Spandex España & Portugal",
    industry: "B2B · Suministros Gráficos",
    location: "Iberia",
    summary: "Acompañamiento de marketing en mercado B2B. Branding aplicado, comunicación con identidad, presencia en eventos y contenido pro.",
    services: ["Comunicación", "Eventos", "Contenido B2B"],
    kpis: [{ v: "2 países", l: "ámbito" }, { v: "+5 años", l: "partner" }, { v: "B2B", l: "vertical" }],
    stamp: "B2B PARTNER",
    grad: "linear-gradient(135deg, rgba(0,224,181,0.4), rgba(13,13,15,0.95))",
    cat: "b2b",
  },
  {
    title: "Anita Gelato",
    industry: "Restauración · Heladería",
    location: "Barcelona · Europa",
    summary: "Llevamos sus redes orgánicas y de paid en Barcelona, y su TikTok para Europa: Londres, Chipre y España. Estrategia de marketing, creación de contenido y shootings para una marca que se come con los ojos.",
    services: ["Estrategia", "Redes sociales", "Paid Media", "TikTok", "Shooting"],
    kpis: [{ v: "3 países", l: "TikTok Europa" }, { v: "Orgánico", l: "+ paid en BCN" }, { v: "360", l: "estrategia y contenido" }],
    stamp: "INTERNACIONAL",
    grad: "linear-gradient(135deg, rgba(255,184,217,0.55), rgba(13,13,15,0.92))",
    cat: "food",
  },
];

function CaseCardFull({ c }) {
  const [ref, inView] = useInView();
  return (
    <article ref={ref} className={`case-card fade-up ${inView ? "in" : ""}`}>
      <div className="img" style={{ aspectRatio: "5/3.2" }}>
        <span className="stamp">{c.stamp}</span>
        <image-slot id={`caso-${c.title.toLowerCase().normalize("NFD").replace(/[^a-z]/g,"")}`} shape="rect" placeholder={`Foto de ${c.title}`} style={{ position: "absolute", inset: 0 }}></image-slot>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginTop: 18, gap: 16 }}>
        <h3>{c.title}</h3>
        <span className="industry">{c.industry}<br/><span style={{ opacity: 0.6 }}>{c.location}</span></span>
      </div>
      <p className="summary">{c.summary}</p>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 6, marginTop: 14 }}>
        {c.services.map((s, i) => (
          <span key={i} style={{ fontFamily: "var(--ff-mono)", fontSize: 10.5, letterSpacing: "0.1em", textTransform: "uppercase", padding: "4px 10px", border: "1px solid rgba(13,13,15,0.25)", borderRadius: 999, color: "rgba(13,13,15,0.75)" }}>{s}</span>
        ))}
      </div>
      <div className="results">
        {c.kpis.map((k, i) => (
          <div key={i} className="kpi">{k.v}<small>{k.l}</small></div>
        ))}
      </div>
      <a href="contacto.html" className="link-arrow" aria-label={`Ver caso ${c.title}`}>
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
      </a>
    </article>
  );
}

function App() {
  const [t, setT] = useTweaks(/*EDITMODE-BEGIN*/{ "accent": "#FF2D87", "cursor": true }/*EDITMODE-END*/);
  const [filter, setFilter] = useState("all");

  useEffect(() => {
    const palettes = {
      "#FF2D87": { soft: "#FFB8D9", deep: "#E11D74" },
      "#FF5A3C": { soft: "#FFC8B8", deep: "#D63C20" },
      "#00E0B5": { soft: "#A8F4E4", deep: "#00A082" },
      "#FFD23F": { soft: "#FFEC95", deep: "#D9A800" },
    };
    const p = palettes[t.accent] || palettes["#FF2D87"];
    document.documentElement.style.setProperty("--wl-accent", t.accent);
    document.documentElement.style.setProperty("--wl-accent-soft", p.soft);
    document.documentElement.style.setProperty("--wl-accent-deep", p.deep);
  }, [t.accent]);

  const filtered = filter === "all" ? ALL_CASES : ALL_CASES.filter(c => c.cat === filter);

  return (
    <React.Fragment>
      <WaterlemonCursor enabled={t.cursor} />
      <Nav active="casos" />

      <section className="page-hero">
        <div className="wrap">
          <p className="eyebrow"><span className="dot"></span>PROYECTOS · NUESTRA MEJOR CARTA DE PRESENTACIÓN</p>
          <h1 className="page-hero__title">
            Marcas <br/>
            <span className="accent">que ya </span>
            <span className="script">vuelan</span><br/>
            con nosotros.
          </h1>
          <p className="page-hero__lede">
            No tenemos un portfolio gigante de logos comprados. Tenemos un puñado de proyectos cuidados al milímetro, y resultados que se miden. Esto es lo que hemos hecho.
          </p>
          <div className="cases-filters">
            {[
              ["all", "Todos"], ["wellness", "Wellness & Fitness"], ["food", "Restauración"], ["b2b", "B2B"]
            ].map(([k, l]) => (
              <button key={k} className={filter === k ? "active" : ""} onClick={() => setFilter(k)}>{l}</button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: "var(--wl-paper)", paddingTop: 0, paddingBottom: 120 }}>
        <div className="wrap">
          <div className="cases-grid-full">
            {filtered.map(c => <CaseCardFull key={c.title} c={c} />)}
          </div>
        </div>
      </section>

      <ClientTicker />

      <section className="cta-final">
        <div className="wrap">
          <div className="inner">
            <div>
              <p className="eyebrow" style={{ color: "rgba(13,13,15,0.7)" }}><span className="dot" style={{ background: "var(--wl-ink)" }}></span>TU PROYECTO, EL PRÓXIMO</p>
              <h2 style={{ marginTop: 16 }}>
                <span className="ink">¿Te vemos</span><br/>
                <span className="ink">en esta</span><br/>
                lista <span className="ink">pronto?</span>
              </h2>
            </div>
            <div className="col-r">
              <span className="tape"></span>
              <h3>HABLEMOS DE TU<br/>PROYECTO.</h3>
              <p>Te respondemos en 24h con una primera idea. Sin compromiso, sin propuestas comerciales de 80 páginas.</p>
              <div className="actions">
                <a href="https://wa.me/34698386556"><span>WhatsApp</span><span className="right">+34 698 38 65 56 →</span></a>
                <a href="mailto:info@waterlemonstudio.com"><span>Email</span><span className="right">info@waterlemonstudio.com →</span></a>
                <a href="contacto.html"><span>Formulario</span><span className="right">Cuéntame tu proyecto →</span></a>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Acento de marca">
          <TweakColor label="Color principal" value={t.accent} options={["#FF2D87", "#FF5A3C", "#00E0B5", "#FFD23F"]} onChange={(v) => setT("accent", v)} />
        </TweakSection>
        <TweakSection title="Detalles">
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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