/* global React, Nav, Footer, ClientTicker, MarqueeBand, Counter, CircleScribble, DrawArrow, Sparkle, HeartScribble, StarDoodle, SmileyDoodle, LemonMark, LemonWordmark, FloatingLemon, WaterlemonCursor, useInView, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle, TweakColor, TweakSelect */
const { useState, useEffect, useRef } = React;

/* ---------- HEADLINE VARIANTS ---------- */
const HEADLINES = {
  punk: {
    eyebrow: "EQUIPO DETRÁS DE +30 MARCAS · BARCELONA",
    h1: (
      <React.Fragment>
        <span className="l1">No hacemos</span>
        <span className="l2">marketing.<span className="script-tag">aburrido,</span></span>
        <span className="l3">
          Hacemos que <span className="strike">posteen</span>{" "}
          <em style={{ fontFamily: "var(--ff-script)", fontStyle: "normal", color: "var(--wl-accent)" }}>hablen </em>
          de ti.
        </span>
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        Somos <strong>Waterlemon Studio</strong>, el water de tu lemon. Una agencia 360 con la que no contratas servicios —
        <strong> sumas un equipo</strong>. Pensamos, creamos, ejecutamos y nos jugamos el pellejo como si tu marca fuera la nuestra.
      </React.Fragment>
    ),
    cta: "Quiero esto para mi marca"
  },
  direct: {
    eyebrow: "MARKETING DIGITAL 360 · ESTRATEGIA + EJECUCIÓN · BARCELONA",
    h1: (
      <React.Fragment>
        <span className="l1">Tu departamento</span>
        <span className="l2">de <span style={{ color: "var(--wl-accent)" }}>marketing,</span></span>
        <span className="l3">
          sin tener que <span className="script-tag" style={{ color: "var(--wl-accent)" }}>contratarlo</span>.
        </span>
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        Estrategia, redes, contenido, ads, SEO y web. <strong>Todo bajo un mismo techo,</strong> ejecutado por personas que conocen tu marca como si la llevaran in-house.
        Más leads, mejor marca, sin pasar pelotas entre 4 freelancers que no se conocen.
      </React.Fragment>
    ),
    cta: "Empezar mi diagnóstico"
  },
  leads: {
    eyebrow: "+340% LEADS · +250% EN REDES · CASOS REALES, NO HUMO",
    h1: (
      <React.Fragment>
        <span className="l1">Más leads.</span>
        <span className="l2"><span style={{ color: "var(--wl-accent)" }}>Mejor marca.</span></span>
        <span className="l3">
          Cero <span className="strike">humo</span> <em style={{ fontFamily: "var(--ff-script)", fontStyle: "normal", color: "var(--wl-accent)" }}>postureo.</em>
        </span>
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        Llevamos <strong>+30 marcas</strong> activas y <strong>+25 estudios Club Pilates</strong>. Sabemos lo que funciona, lo que no, y lo que cuesta cada lead.
        Te lo enseñamos en una llamada de 15 minutos, gratis.
      </React.Fragment>
    ),
    cta: "Auditoría gratuita →"
  },
  partner: {
    eyebrow: "TU PARTNER DE CRECIMIENTO · DESDE 2020 · BARCELONA",
    h1: (
      <React.Fragment>
        <span className="l1">No somos</span>
        <span className="l2"><span className="strike">tu agencia.</span></span>
        <span className="l3">
          Somos tu <em style={{ fontFamily: "var(--ff-script)", fontStyle: "normal", color: "var(--wl-accent)" }}>equipo. </em>
          ♥
        </span>
      </React.Fragment>
    ),
    lede: (
      <React.Fragment>
        Imagina un departamento de marketing dentro de tu empresa, sin la nómina, sin la silla, sin el café. <strong>Eso es Waterlemon.</strong>
        Nos metemos en tu negocio, lo tratamos como propio, y crecemos contigo.
      </React.Fragment>
    ),
    cta: "Hablemos de tu marca"
  },
};

/* ---------- HERO ---------- */
function Hero({ variant = "punk" }) {
  const h = HEADLINES[variant] || HEADLINES.punk;
  return (
    <section className="hero">
      {/* Decorative floating lemons */}

      <div className="wrap">
        <div className="grid">
          <div className="left">
            <div className="eyebrow-row">
              <span className="pill"><span className="live"></span>{h.eyebrow}</span>
            </div>

            <h1>{h.h1}</h1>

            <p className="lede">{h.lede}</p>

            <div className="cta-row">
              <a className="btn btn-primary" href="contacto.html">
                {h.cta}
                <svg className="arrow" width="14" height="14" 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>
              <a className="btn btn-outline" href="casos.html">
                Ver proyectos
              </a>
            </div>

            <div className="meta-row">
              <span><b>+30</b> · marcas activas</span>
              <span><b>+25</b> · estudios Club Pilates</span>
              <span><b>6 años</b> · construyendo marcas</span>
            </div>
          </div>

          <div className="hero-collage">
            <CircleScribble style={{ top: 20, left: -20, width: 180, height: 100, zIndex: 1 }} />

            {/* Polaroid 1 - equipo */}
            <div className="polaroid pol-1" data-cursor="hover">
              <span className="tape" style={{ top: -12, left: 80, transform: "rotate(-6deg)", background: "var(--wl-paper-2)" }}></span>
              <div className="img-frame">
                <image-slot id="hero-pol-equipo" shape="rect" placeholder="Foto del equipo" style={{ position: "absolute", inset: 0 }}></image-slot>
              </div>
              <span className="cap">Somos el water<br/>de tu lemon ♥</span>
            </div>

            {/* Polaroid 2 - laptop */}
            <div className="polaroid pol-2" data-cursor="hover">
              <span className="tape" style={{ top: -12, left: 60, transform: "rotate(8deg)", background: "var(--wl-accent)" }}></span>
              <div className="img-frame">
                <image-slot id="hero-pol-trabajo" shape="rect" placeholder="Foto trabajando / edición" style={{ position: "absolute", inset: 0 }}></image-slot>
              </div>
              <span className="cap">edición real ✿</span>
            </div>

            {/* Sticky note pink */}
            <div className="sticky pink sticky-1" style={{ position: "absolute", padding: "18px 16px" }}>
              ideas reales<br/>para marcas que<br/>quieren crecer.
            </div>

            {/* Polaroid 3 - neon DO PILATES */}
            <div className="polaroid pol-3" data-cursor="hover">
              <span className="tape" style={{ top: -10, right: 30, transform: "rotate(4deg)", background: "var(--wl-ink)" }}></span>
              <div className="img-frame">
                <image-slot id="hero-pol-cliente" shape="rect" placeholder="Foto de proyecto / cliente" style={{ position: "absolute", inset: 0 }}></image-slot>
              </div>
              <span className="cap">probablemente<br/>nos llevemos bien</span>
            </div>

            {/* Sticky note ink */}
            <div className="sticky ink sticky-2" style={{ position: "absolute", padding: "14px 18px", fontFamily: "var(--ff-script)", fontSize: 22 }}>
              partner ≠ proveedor.<br/>
              <span style={{ color: "var(--wl-accent)" }}>nota importante.</span>
            </div>

            {/* sparkles & doodles */}
            <Sparkle style={{ position: "absolute", top: 130, right: -10, color: "var(--wl-accent)" }} size={28}/>
            <Sparkle style={{ position: "absolute", bottom: 200, left: -30, color: "var(--wl-accent)" }} size={18}/>
            <StarDoodle style={{ position: "absolute", top: 0, left: 200, transform: "rotate(15deg)" }} />
          </div>
        </div>

        {/* Hero bottom marquee */}
        <div style={{ margin: "0 calc(-1 * var(--gutter)) 0", borderTop: "1.5px solid rgba(13,13,15,0.18)" }}>
          <div className="marquee marquee--paper marquee__band" style={{ padding: "20px 0" }}>
            <div className="marquee__track" style={{ animationDuration: "120s" }}>
              {[
                "Estrategia con propósito",
                "Contenido que conecta",
                "Diseño que destaca",
                "Comunidad que enamora",
                "Resultados que se notan",
                "Estrategia con propósito",
                "Contenido que conecta",
                "Diseño que destaca",
                "Comunidad que enamora",
                "Resultados que se notan",
              ].map((t, i) => (
                <span key={i} className="marquee__item">{t}<span className="dot" /></span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- SERVICES ---------- */
const SERVICES = [
  {
    id: "01", slug: "redes-sociales", name: "Redes Sociales",
    tag: "Estrategia, contenido y comunidad. La marca que no quieres que se acabe.",
    cap: "Estrategia + Community",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.5), rgba(13,13,15,0.9))"
  },
  {
    id: "02", slug: "contenido", name: "Contenido & Video",
    tag: "Fotografía, reels, motion y branded content que parece tuyo —porque lo es.",
    cap: "Filmmaker on set",
    grad: "linear-gradient(135deg, rgba(255,184,217,0.6), rgba(13,13,15,0.95))"
  },
  {
    id: "03", slug: "ads-meta", name: "Paid Media (Meta)",
    tag: "Anuncios pensados que traen leads. Improvisar sale caro.",
    cap: "Campañas que pagan",
    grad: "linear-gradient(135deg, rgba(225,29,116,0.5), rgba(26,26,29,0.95))"
  },
  {
    id: "04", slug: "seo", name: "SEO Orgánico",
    tag: "Que te encuentren cuando buscan lo que vendes. Sin trucos.",
    cap: "Posición 1 ▲",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.45), rgba(13,13,15,0.95))"
  },
  {
    id: "05", slug: "google-ads", name: "Google Ads",
    tag: "Estar arriba, pagando menos. Search, PMax, YouTube, Remarketing.",
    cap: "CPL bajo control",
    grad: "linear-gradient(135deg, rgba(255,210,63,0.5), rgba(13,13,15,0.95))"
  },
  {
    id: "06", slug: "web", name: "Diseño Web",
    tag: "Webs hechas para convertir, no para ganar premios polvorientos.",
    cap: "UX que vende",
    grad: "linear-gradient(135deg, rgba(255,184,217,0.5), rgba(13,13,15,0.9))"
  },
  {
    id: "07", slug: "estrategia", name: "Estrategia 360",
    tag: "Un plan integral, no 4 islas. Diagnóstico, roadmap y acompañamiento.",
    cap: "Roadmap claro",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.6), rgba(13,13,15,0.95))"
  },
  {
    id: "08", slug: "video", name: "Producción Audiovisual",
    tag: "Vídeos que cuentan algo. Brand films, reels, ads, eventos.",
    cap: "Calidad cine",
    grad: "linear-gradient(135deg, rgba(225,29,116,0.5), rgba(13,13,15,0.9))"
  },
  {
    id: "09", slug: "consultoria", name: "Consultoría 1:1",
    tag: "Si tienes equipo, te lo afilamos. Si no, te lo prestamos.",
    cap: "Strategy sessions",
    grad: "linear-gradient(135deg, rgba(0,224,181,0.45), rgba(13,13,15,0.9))"
  },
];

function ServiceRow({ s, onMove }) {
  const rowRef = useRef(null);
  const [active, setActive] = useState(false);
  const [pos, setPos] = useState({ x: 50, y: 50 });

  const handleMove = (e) => {
    const r = rowRef.current?.getBoundingClientRect();
    if (!r) return;
    setPos({ x: e.clientX - r.left, y: e.clientY - r.top });
  };

  return (
    <a
      href={`servicio.html?s=${s.slug}`}
      ref={rowRef}
      className={`service-row ${active ? "active" : ""}`}
      onMouseEnter={() => setActive(true)}
      onMouseLeave={() => setActive(false)}
      onMouseMove={handleMove}
    >
      <span className="num">{s.id}</span>
      <h3 className="name">{s.name}</h3>
      <p className="tagline">{s.tag}</p>
      <span className="plus">
        <svg viewBox="0 0 24 24" fill="none"><path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/></svg>
      </span>
      <div className="reveal" style={{ left: pos.x, top: pos.y }}>
        <div className="img" style={{ backgroundImage: s.grad + ", repeating-linear-gradient(45deg, rgba(255,252,245,0.05) 0 6px, transparent 6px 12px)" }}>
          <div style={{ fontFamily: "var(--ff-marker)", color: "var(--wl-bone)", fontSize: 22, textShadow: "0 0 14px rgba(0,0,0,0.5)", letterSpacing: "0.04em", textAlign: "center", padding: "0 18px" }}>
            {s.cap}
          </div>
          <div className="img-cap">{s.name.toLowerCase()}.jpg</div>
        </div>
      </div>
    </a>
  );
}

function Services() {
  return (
    <section className="services" id="servicios">
      <div className="wrap">
        <div className="head">
          <div>
            <p className="eyebrow"><span className="dot"></span>SERVICIOS 360</p>
            <h2 className="section-title" style={{ marginTop: 12 }}>
              Todo lo que <br/>
              tu marca <span className="accent">necesita,</span><br/>
              <span className="script">en un solo equipo.</span>
            </h2>
          </div>
          <div className="right">
            <span className="badge">PACK COMPLETO ★</span>
            <p>Hacemos marketing como se hacía antes: pensando primero, ejecutando después. Y todo bajo el mismo techo. Sin pasar pelotas entre 4 freelancers que no se conocen.</p>
            <DrawArrow style={{ marginTop: 8 }} />
          </div>
        </div>

        <div className="services-list">
          {SERVICES.map((s, i) => <ServiceRow key={s.id} s={s} />)}
        </div>

        <div style={{ marginTop: 48, display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 20 }}>
          <p style={{ fontFamily: "var(--ff-script)", fontSize: 30, margin: 0, color: "var(--wl-ink)" }}>
            ¿Te falta algo? <span style={{ color: "var(--wl-accent)" }}>Lo hacemos también.</span>
          </p>
          <a href="servicios.html" className="btn btn-pink">
            Ver todo en detalle
            <svg className="arrow" width="14" height="14" 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>
        </div>
      </div>
    </section>
  );
}

/* ---------- PARTNER (manifesto) ---------- */
function Partner() {
  return (
    <section className="partner" id="partner">
      <div className="wrap">
        <div className="grid">
          <div>
            <p className="eyebrow" style={{ color: "rgba(255,252,245,0.7)" }}>
              <span className="dot" style={{ background: "var(--wl-accent)" }}></span>
              <span style={{ color: "rgba(255,252,245,0.8)" }}>LO QUE NOS HACE DIFERENTES</span>
            </p>

            <h2 style={{ marginTop: 18 }}>
              <span>No somos tu</span><br/>
              <span style={{ position: "relative", display: "inline-block" }}>
                <span style={{ position: "relative", zIndex: 1 }}>agencia.</span>
                <span style={{ position: "absolute", left: -4, right: -4, top: "52%", height: 12, background: "var(--wl-accent)", transform: "rotate(-2deg)", zIndex: 0 }}></span>
              </span><br/>
              <span className="pink">Somos tu</span><br/>
              <span>equipo.</span>
              <span className="script" style={{ display: "inline-block", marginLeft: 14 }}>—externo. ♥</span>
            </h2>

            <p className="lede">
              Imagínate un departamento de marketing dentro de tu empresa.
              Que conoce tu marca, tu sector, tus clientes y tus márgenes.
              Que <strong>se mete contigo en el barro</strong> cuando hay que sacar campaña a las 23:47.
              <br/><br/>
              Ahora quítate la nómina, la silla, la mesa y el café.
              <br/>
              <strong>Eso es Waterlemon.</strong>
            </p>

            <ul className="bullets">
              <li><span className="checkbox"></span> <span><strong>Tratamos tu negocio como el nuestro.</strong> Si te va bien, nos va bien.</span></li>
              <li><span className="checkbox"></span> <span><strong>Sin intermediarios ni "te paso con el otro depto."</strong> Hablas con quien hace.</span></li>
              <li><span className="checkbox"></span> <span><strong>360º real:</strong> estrategia, contenido, ads, web, SEO, video. Todo bajo un mismo techo.</span></li>
              <li><span className="checkbox"></span> <span><strong>Traemos leads, no PowerPoints.</strong> Aquí se mide lo que se hace.</span></li>
              <li><span className="checkbox"></span> <span><strong>Cercanía sin postureo.</strong> Nos hablamos de tú desde el minuto uno.</span></li>
            </ul>

            <div style={{ marginTop: 36, display: "flex", gap: 14, flexWrap: "wrap" }}>
              <a href="equipo.html" className="btn btn-pink">Conoce al equipo</a>
              <a href="contacto.html" className="btn" style={{ background: "transparent", color: "var(--wl-bone)", border: "2px solid rgba(255,252,245,0.3)" }}>Hablemos por WhatsApp</a>
            </div>
          </div>

          <div className="right-card">
            <span className="tape"></span>
            <div className="quote-mark">"</div>
            <h3>Como si fueran parte de mi propio equipo.</h3>
            <p>"Trabajamos juntos desde 2019. Lo mejor es su forma de integrarse: parecen parte de mi equipo. Implicados, comprometidos y siempre con ideas frescas."</p>
            <div className="author">
              Héctor Pérez
              <small>CEO · GRUPO O'RETORNIÑO</small>
            </div>
          </div>
        </div>
      </div>

      {/* big background type */}
      <div style={{ position: "absolute", bottom: -30, left: 0, right: 0, overflow: "hidden", pointerEvents: "none", opacity: 0.06 }}>
        <div style={{ fontFamily: "var(--ff-display)", fontSize: "clamp(180px, 22vw, 360px)", lineHeight: 0.85, color: "var(--wl-bone)", letterSpacing: "-0.02em", textTransform: "uppercase", whiteSpace: "nowrap" }}>
          PARTNERS · NOT VENDORS
        </div>
      </div>
    </section>
  );
}

/* ---------- STATS ---------- */
function Stats() {
  const stats = [
    { label: "Marcas activas", big: 30, suf: "+", desc: "Trabajando codo con codo todos los días.", doodle: <HeartScribble /> },
    { label: "Estudios Club Pilates", big: 25, suf: "+", desc: "Partner oficial. En toda España.", doodle: <StarDoodle /> },
    { label: "Años creando marca", big: 6, suf: "", desc: "Desde 2020. Y los que nos quedan.", doodle: <SmileyDoodle /> },
    { label: "% recomendación", big: 100, suf: "%", desc: "Nuestros clientes nos recomiendan. Punto.", doodle: <Sparkle color="var(--wl-accent)" /> },
  ];
  return (
    <section className="stats" id="stats">
      <div className="wrap">
        <div className="heading-row">
          <div>
            <p className="eyebrow"><span className="dot"></span>LOS NÚMEROS QUE NOS RESPALDAN</p>
            <h2 style={{ marginTop: 16 }}>
              Resultados<br/>
              <span className="accent">que se notan.</span>
            </h2>
          </div>
          <p className="note">Las métricas guapas son las que se traducen en clientes para ti. El resto es vanidad. Aquí, lo que cuenta.</p>
        </div>
        <div className="grid">
          {stats.map((s, i) => (
            <div key={i} className="stat-card">
              <div className="doodle">{s.doodle}</div>
              <div className="label">{s.label}</div>
              <div className="big">
                <Counter to={s.big} suffix={s.suf} />
              </div>
              <div className="desc">{s.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CASES ---------- */
const CASES = [
  {
    title: "Club Pilates",
    industry: "Wellness · +25 estudios · España",
    summary: "Convertimos +25 estudios franquiciados en una comunidad local con personalidad propia. Stories que sí venden, ads que traen leads, contenido que enamora.",
    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))"
  },
  {
    title: "O'Retorniño",
    industry: "Restauración · Barcelona",
    summary: "\"El mejor pulpo de Barcelona, hecho con amor y un toque de humor\". Estrategia integral: redes, contenido, fotografía y video desde 2019.",
    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))"
  },
  {
    title: "Artes Marciales",
    industry: "Wellness · Centros familiares",
    summary: "Web, SEO, Google Ads, UX y CRO para una red de centros especializados en defensa personal. De la búsqueda local al lead cualificado.",
    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))"
  },
  {
    title: "Orangetheory Valencia",
    industry: "Fitness · Franquicia",
    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.",
    kpis: [
      { v: "Contenido", l: "creación mensual" },
      { v: "Orgánico", l: "crecimiento en redes" },
      { v: "★★★★★", l: "valoración" },
    ],
    stamp: "LOCAL ❤",
    grad: "linear-gradient(135deg, rgba(255,45,135,0.45), rgba(13,13,15,0.95))"
  },
];

function CaseCard({ c }) {
  return (
    <article className="case-card">
      <div className="img">
        <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}</span>
      </div>
      <p className="summary">{c.summary}</p>
      <div className="results">
        {c.kpis.map((k, i) => (
          <div key={i} className="kpi">
            {k.v}
            <small>{k.l}</small>
          </div>
        ))}
      </div>
      <a href="casos.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 Cases() {
  return (
    <section className="cases" id="casos">
      <div className="wrap">
        <div className="head">
          <p className="eyebrow"><span className="dot"></span>NUESTROS PROYECTOS · LA MEJOR CARTA DE PRESENTACIÓN</p>
          <h2 className="section-title" style={{ marginTop: 16, maxWidth: 1100 }}>
            Trabajos que <span className="accent">hablan</span><br/>
            por sí solos. <span className="script">(y por nosotros)</span>
          </h2>
        </div>

        <div className="case-grid">
          {CASES.map(c => <CaseCard key={c.title} c={c} />)}
        </div>

        <div style={{ marginTop: 44, textAlign: "center" }}>
          <a className="btn btn-primary" href="casos.html">
            Ver todos los casos
            <svg className="arrow" width="14" height="14" 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>
        </div>
      </div>
    </section>
  );
}

/* ---------- TESTIMONIALS ---------- */
const TESTIMONIALS = [
  {
    text: <React.Fragment>"Trabajar con Waterlemon es siempre una experiencia increíble. Rafa y Raquel captan todas nuestras ideas y las convierten en realidad con <span className="hl">creatividad excepcional</span>. Un equipo 100% recomendable."</React.Fragment>,
    name: "Nina Areste",
    role: "Club Pilates Poblenou & Badalona",
    initials: "NA",
    stars: "★★★★★",
  },
  {
    text: <React.Fragment>"Trabajamos juntos desde 2019. Lo mejor es su forma de integrarse: <span className="hl">parecen parte de mi propio equipo</span>. Implicados, comprometidos y siempre con ideas frescas."</React.Fragment>,
    name: "Héctor Pérez",
    role: "CEO · Grupo O'Retorniño",
    initials: "HP",
    stars: "★★★★★",
  },
  {
    text: <React.Fragment>"Adaptación total, soluciones creativas y estratégicas. Trabajamos con <span className="hl">coordinación excepcional</span>, como si fueran una parte más de nuestro equipo."</React.Fragment>,
    name: "Mònica Esteve",
    role: "Marketing Manager · Spandex España y Portugal",
    initials: "ME",
    stars: "★★★★★",
  },
  {
    text: <React.Fragment>"Waterlemon ha sido una pieza clave en el crecimiento de mi negocio. <span className="hl">Profesional, estratégico y cercano</span>. Sin duda, una agencia que recomiendo al 100%."</React.Fragment>,
    name: "Ana María Luna",
    role: "Club Pilates Gran Vía · Orangetheory Fitness Valencia",
    initials: "AL",
    stars: "★★★★★",
  },
  {
    text: <React.Fragment>"Honestidad en la comunicación, profesionalidad y creatividad en cada contenido. <span className="hl">Ni te esfuerces en llamarlos</span> si lo que quieres es vender humo."</React.Fragment>,
    name: "Bernardo Riviere",
    role: "Club Pilates Sant Cugat",
    initials: "BR",
    stars: "★★★★★",
  },
];

function Testimonials() {
  return (
    <section className="testimonials" id="testimonios">
      <div className="wrap">
        <div className="head">
          <div>
            <p className="eyebrow" style={{ color: "rgba(255,252,245,0.7)" }}>
              <span className="dot"></span>
              <span style={{ color: "rgba(255,252,245,0.8)" }}>SUS PALABRAS, NUESTRA MEJOR CARTA</span>
            </p>
            <h2 style={{ marginTop: 16 }}>
              Lo cuentan<br/>
              <span className="pink">mejor que </span>
              <span className="script">nosotros.</span>
            </h2>
          </div>
          <p style={{ color: "rgba(255,252,245,0.7)", fontSize: 16, lineHeight: 1.55, maxWidth: 380, marginLeft: "auto" }}>
            Mejor que mostrar awards de los años 2010 colgados en una pared, hablamos con las personas que confían en nosotros cada día. Esto es lo que dicen.
          </p>
        </div>

        <div className="testi-grid">
          {TESTIMONIALS.map((t, i) => (
            <div key={i} className="testi-card">
              <span className="tape"></span>
              <span className="stars">{t.stars}</span>
              <div className="quote-icon">"</div>
              <blockquote>{t.text}</blockquote>
              <div className="who">
                <div className="avatar">{t.initials}</div>
                <div className="meta">
                  <div className="name">{t.name}</div>
                  <div className="role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- CTA FINAL ---------- */
function CTAFinal() {
  return (
    <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 TURNO</p>
            <h2 style={{ marginTop: 16 }}>
              <span className="ink">¿Y si tu marca</span><br/>
              <span className="ink">es la próxima</span><br/>
              <span>de la que <span className="ink">hablen?</span></span><br/>
              <span className="script">probablemente nos llevemos bien.</span>
            </h2>
          </div>
          <div className="col-r">
            <span className="tape"></span>
            <h3>HABLEMOS<br/>SIN COMPROMISO.</h3>
            <p>Te leemos en 24h. Sin comerciales que insisten. Sin propuestas de 80 slides. Una llamada, una idea, una decisión.</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>

      {/* huge marquee at the bottom */}
      <div className="scroll-marquee">
        <div className="marquee" style={{ padding: "16px 0" }}>
          <div className="marquee__track" style={{ animationDuration: "90s" }}>
            {[
              "HABLEMOS",
              "TU MARCA, NUESTRA OBSESIÓN",
              "PROBABLEMENTE NOS LLEVEMOS BIEN",
              "NO VENDEMOS HUMO",
              "HABLEMOS",
              "TU MARCA, NUESTRA OBSESIÓN",
              "PROBABLEMENTE NOS LLEVEMOS BIEN",
              "NO VENDEMOS HUMO",
            ].map((t, i) => (
              <span key={i} className="marquee__item">{t}<span className="dot" /></span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- LEAD MAGNET (captación) ---------- */
function LeadMagnet() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (email.includes("@")) setSent(true);
  };

  return (
    <section className="lead-magnet" id="auditoria">
      {/* huge background headline */}
      <div className="lead-magnet__bg">
        <div className="bg-line">AUDITORÍA · GRATIS · 15 MIN · AUDITORÍA · GRATIS · 15 MIN ·</div>
      </div>

      <div className="wrap">
        <div className="grid">
          <div className="lm-left">
            <span className="lm-badge">
              <span className="dot"></span> PLAZAS LIMITADAS CADA MES · RESERVA LA TUYA
            </span>

            <h2 className="lm-title">
              Te decimos qué <br/>
              está <span className="hl">funcionando</span><br/>
              en tu marketing.<br/>
              <span className="lm-script">Y qué no.</span>
            </h2>

            <p className="lm-lede">
              Una sesión de <strong>15 minutos por video-call</strong> con nuestro equipo. Auditoría rápida de tus redes, web, ads y posicionamiento.
              Te damos <strong>3 acciones concretas</strong> que puedes implementar esta semana. <strong>Sin venderte nada.</strong>
            </p>

            <ul className="lm-list">
              <li><span className="num">01</span> Análisis express de tu presencia digital actual</li>
              <li><span className="num">02</span> 3 acciones concretas que mueven la aguja</li>
              <li><span className="num">03</span> Benchmarks reales del sector (sin contar humo)</li>
              <li><span className="num">04</span> Honesto: si no encajamos, te lo decimos.</li>
            </ul>
          </div>

          <div className="lm-right">
            <div className="lm-card">
              <span className="tape"></span>
              {!sent ? (
                <React.Fragment>
                  <div className="lm-stamp">FREE</div>
                  <h3>Reserva tu plaza</h3>
                  <p className="lm-sub">Quedan plazas para este mes. Sin compromiso, sin tarjeta de crédito.</p>
                  <form onSubmit={submit}>
                    <label>Tu email</label>
                    <input
                      type="email"
                      required
                      placeholder="tu@email.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                    />
                    <button type="submit" className="lm-submit">
                      Apúntame a la auditoría
                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                    </button>
                  </form>
                  <p className="lm-mini">
                    O directo por <a href="https://wa.me/34698386556">WhatsApp ↗</a>
                  </p>
                  <div className="lm-trust">
                    <div>
                      <strong>4.9/5</strong>
                      <small>★★★★★ valoración media</small>
                    </div>
                    <div>
                      <strong>15 min</strong>
                      <small>tu tiempo, garantizado</small>
                    </div>
                  </div>
                </React.Fragment>
              ) : (
                <React.Fragment>
                  <div className="lm-stamp">¡VA!</div>
                  <h3>¡Genial!</h3>
                  <p className="lm-sub">Te escribimos en menos de 24h para reservar tu hueco. ♥</p>
                  <p style={{ fontFamily: "var(--ff-script)", fontSize: 28, color: "var(--wl-accent)", marginTop: 24 }}>
                    probablemente nos llevemos bien.
                  </p>
                </React.Fragment>
              )}
            </div>

            {/* decorative lemons floating around the card */}
          </div>
        </div>
      </div>
    </section>
  );
}
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF2D87",
  "headline": "punk",
  "footerPhrase": "hablemos",
  "cursor": true,
  "lemons": true
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  "#FF2D87": { soft: "#FFB8D9", deep: "#E11D74", glow: "rgba(255,45,135,0.55)" },
  "#FF5A3C": { soft: "#FFC8B8", deep: "#D63C20", glow: "rgba(255,90,60,0.55)" },
  "#00E0B5": { soft: "#A8F4E4", deep: "#00A082", glow: "rgba(0,224,181,0.5)" },
  "#FFD23F": { soft: "#FFEC95", deep: "#D9A800", glow: "rgba(255,210,63,0.6)" },
};

/* ---------- ROOT ---------- */
function App() {
  const [t, setT] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    const p = ACCENT_PALETTES[t.accent] || 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);
    document.documentElement.style.setProperty("--wl-accent-glow", p.glow);
  }, [t.accent]);

  useEffect(() => {
    document.body.classList.toggle("no-lemons", !t.lemons);
  }, [t.lemons]);

  return (
    <React.Fragment>
      <WaterlemonCursor enabled={t.cursor} />
      <Nav active="home" />
      <Hero variant={t.headline} />
      <ClientTicker />
      <Services />
      <Partner />
      <Stats />
      <LeadMagnet />
      <Cases />
      <Testimonials />
      <CTAFinal />
      <Footer phrase={t.footerPhrase} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Headline del hero">
          <TweakSelect
            label="Variante de copy"
            value={t.headline}
            options={[
              { label: "Punk · 'No hacemos marketing aburrido'", value: "punk" },
              { label: "Directo · 'Tu departamento de marketing'", value: "direct" },
              { label: "Resultados · 'Más leads. Mejor marca.'", value: "leads" },
              { label: "Partner · 'No somos tu agencia'", value: "partner" },
            ]}
            onChange={(v) => setT("headline", v)}
          />
          <p style={{ fontSize: 12, color: "#666", margin: "8px 0 0", lineHeight: 1.4 }}>
            4 enfoques de copy del header. Mismo mensaje, distintos ángulos.
          </p>
        </TweakSection>

        <TweakSection title="Frase final del footer">
          <TweakSelect
            label="Frase grande del footer"
            value={t.footerPhrase}
            options={[
              { label: "Hablemos sin prisa, pero con ganas.", value: "hablemos" },
              { label: "Somos el water de tu lemon.", value: "water" },
              { label: "Tu marca, nuestra obsesión.", value: "obsesion" },
              { label: "Más leads. Mejor marca. Empecemos.", value: "leads" },
              { label: "Ideas reales, para marcas que crecen.", value: "ideas" },
              { label: "Probablemente nos llevemos bien.", value: "llevemos" },
              { label: "¿Hablamos? Te leemos en 24h.", value: "24h" },
            ]}
            onChange={(v) => setT("footerPhrase", v)}
          />
          <p style={{ fontSize: 12, color: "#666", margin: "8px 0 0", lineHeight: 1.4 }}>
            Cambia la frase gigante al final de la web. 7 opciones, mismo punch.
          </p>
        </TweakSection>

        <TweakSection title="Acento de marca">
          <TweakColor
            label="Color principal"
            value={t.accent}
            options={["#FF2D87", "#FF5A3C", "#00E0B5", "#FFD23F"]}
            onChange={(v) => setT("accent", v)}
          />
          <p style={{ fontSize: 12, color: "#666", margin: "8px 0 0" }}>
            Rosa Waterlemon, Coral, Cyber mint, Limón.
          </p>
        </TweakSection>

        <TweakSection title="Detalles">
          <TweakToggle label="Limones decorativos" value={t.lemons} onChange={(v) => setT("lemons", v)} />
        </TweakSection>
      </TweaksPanel>
    </React.Fragment>
  );
}

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