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

const FULL_SERVICES = [
  {
    n: "01", slug: "redes-sociales",
    title: "Gestión de Redes Sociales",
    sub: "Tu marca, viva 365 días al año",
    body: "Estrategia, calendario, contenido, atención al cliente, look & feel, insights, trendy content. Llevamos tus redes como si las llevara tu mejor amiga marketinera (que para eso somos).",
    bullets: ["Estrategia mensual", "Contenido orgánico", "Community management", "Reporting con cabeza"],
    deliverables: "8–20 posts/mes · 12–30 stories/sem · 4 reels/mes",
  },
  {
    n: "02", slug: "contenido",
    title: "Creación de Contenido",
    sub: "Lo visual y lo escrito, hecho con cabeza",
    body: "Fotografía, video, motion, copy y diseño que parece tuyo —porque lo es. Producimos el contenido que tu marca debería tener si tuviese departamento creativo propio.",
    bullets: ["Sesiones de foto", "Reels & motion", "Branded content", "Carruseles y formatos"],
    deliverables: "Mensual o por campaña · BCN y desplazamientos",
  },
  {
    n: "03", slug: "ads-meta",
    title: "Paid Media (Meta)",
    sub: "Ads pensados. Leads de verdad.",
    body: "Estrategia, creatividades, segmentaciones, AB testing, optimización y métricas que importan. Cero gasto improvisado. Cada euro tiene una hipótesis detrás.",
    bullets: ["Estrategia full funnel", "Creatividades a medida", "Optimización continua", "Reporting semanal"],
    deliverables: "Full funnel · Meta Ads",
  },
  {
    n: "04", slug: "seo",
    title: "SEO — Posicionamiento Orgánico",
    sub: "Que te encuentren cuando buscan",
    body: "Auditorías, keyword research, contenido optimizado, link building con sentido común y arquitectura técnica. SEO blanco, sin trucos, pensado a largo.",
    bullets: ["Auditoría técnica", "Keyword research", "Contenido + on-page", "Link building"],
    deliverables: "Plan trimestral · Reporting mensual",
  },
  {
    n: "05", slug: "google-ads",
    title: "Publicidad en Google Ads",
    sub: "Estar arriba, pagando menos",
    body: "Search, Performance Max, YouTube, Display y Remarketing. Estructuras de cuenta limpias, pujas inteligentes, creatividades que no aburren.",
    bullets: ["Search & Pmax", "YouTube Ads", "Remarketing", "Optimización de CPL"],
    deliverables: "Setup + optimización mensual",
  },
  {
    n: "06", slug: "web",
    title: "Diseño y Desarrollo Web",
    sub: "Webs hechas para convertir",
    body: "Analizamos marca, sector y competencia. UX que vende, copy que convence, código limpio, performance al 100/100. Lo bonito y lo útil, juntos.",
    bullets: ["UX/UI estratégico", "Desarrollo a medida", "Optimización SEO", "CRO y analítica"],
    deliverables: "Proyecto cerrado · 4–10 semanas",
  },
  {
    n: "07", slug: "estrategia",
    title: "Estrategia de Marketing Digital",
    sub: "Un plan integral, no 4 islas",
    body: "Cuando necesitas dirección, no solo manos. Diagnóstico, estrategia 360, plan de medios, KPIs y acompañamiento ejecutivo. Pensamos contigo.",
    bullets: ["Diagnóstico", "Plan 360", "Roadmap", "Acompañamiento"],
    deliverables: "Diagnóstico inicial + mensualización",
  },
  {
    n: "08", slug: "video",
    title: "Producción Audiovisual",
    sub: "Vídeos que cuentan algo",
    body: "Conceptualizamos, planificamos, rodamos, editamos. Reels, corporativos, brand films, videos para campañas. Calidad cine, alma de tu marca.",
    bullets: ["Pre-producción", "Rodaje", "Postpro & color", "Motion & música"],
    deliverables: "Producciones desde 1 jornada",
  },
  {
    n: "09", slug: "consultoria",
    title: "Consultoría 1:1",
    sub: "Hablamos desde la experiencia",
    body: "¿No sabes por dónde empezar o quieres afilar tu equipo interno? Sesiones de asesoría estratégica para que tomes las mejores decisiones.",
    bullets: ["Sesiones semanales", "Roadmap personalizado", "Mentoring a equipo", "Auditorías"],
    deliverables: "Bono de horas o suscripción mensual",
  },
];

function ServiceCard({ s, i }) {
  const [ref, inView] = useInView();
  return (
    <article ref={ref} className={`fade-up ${inView ? "in" : ""} svc-card`} data-cursor="hover">
      <div className="svc-card__head">
        <span className="num">{s.n}</span>
        <span className="meta">{s.deliverables}</span>
      </div>
      <h3 className="title"><a href={`servicio.html?s=${s.slug}`} className="title-link">{s.title}</a></h3>
      <p className="sub">{s.sub}</p>
      <p className="body">{s.body}</p>
      <ul className="bullets">
        {s.bullets.map((b, j) => (
          <li key={j}>
            <span className="check">✓</span> {b}
          </li>
        ))}
      </ul>
      <div className="foot">
        <a href={`servicio.html?s=${s.slug}`} className="cta-line">
          Ver detalle <svg 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>
    </article>
  );
}

function ProcessTimeline() {
  const steps = [
    { n: "01", t: "Te escuchamos", d: "Sin guion, sin script de comercial. Nos cuentas qué pasa y qué quieres." },
    { n: "02", t: "Auditamos", d: "Marca, competencia, mercado, datos. Diagnóstico real antes de proponer nada." },
    { n: "03", t: "Proponemos", d: "Un plan con sentido, no un PowerPoint de 80 slides. Acciones y KPIs claros." },
    { n: "04", t: "Ejecutamos", d: "Aquí no hay 'lo pasamos al otro equipo'. Quien planifica, ejecuta. Y al revés." },
    { n: "05", t: "Medimos", d: "Reportes mensuales humanos. Lo que funciona se escala, lo que no, se cambia." },
    { n: "06", t: "Crecemos", d: "Acompañamiento a largo. Tu negocio cambia, tu estrategia con él. Siempre cerca." },
  ];
  return (
    <section className="process">
      <div className="wrap">
        <div className="head">
          <p className="eyebrow"><span className="dot"></span>CÓMO TRABAJAMOS</p>
          <h2 className="section-title" style={{ marginTop: 12 }}>
            Un proceso<br/>
            <span className="accent">sin humo.</span>
            <span className="script" style={{ marginLeft: 14 }}>6 pasos.</span>
          </h2>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div key={s.n} className="step">
              <div className="num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              {i < steps.length - 1 && <span className="arrow-link">↳</span>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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

  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]);

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

      <section className="page-hero">
        <div className="wrap">
          <p className="eyebrow"><span className="dot"></span>SERVICIOS · MARKETING DIGITAL 360</p>
          <h1 className="page-hero__title">
            Hacemos<br/>
            <span className="accent">marketing,</span><br/>
            pero del que <span className="script">funciona.</span>
          </h1>
          <p className="page-hero__lede">
            Estrategia con propósito · Contenido que conecta · Diseño que destaca · Comunidad que enamora · Resultados que se notan. Un equipo, nueve servicios, infinitas combinaciones.
          </p>
          <div style={{ marginTop: 24, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="contacto.html" className="btn btn-primary">Cuéntame tu proyecto</a>
            <a href="#servicios-list" className="btn btn-outline">Ver servicios ↓</a>
          </div>
        </div>
      </section>

      <ClientTicker />

      <section className="svc-grid-section" id="servicios-list">
        <div className="wrap">
          <div className="svc-head">
            <p className="eyebrow"><span className="dot"></span>NUESTROS 9 SERVICIOS</p>
            <h2 className="section-title" style={{ marginTop: 16, maxWidth: 920 }}>
              Todo lo que tu marca <br/>
              <span className="accent">necesita —</span> sin sub-contratar.
            </h2>
          </div>
          <div className="svc-grid">
            {FULL_SERVICES.map((s, i) => <ServiceCard key={s.n} s={s} i={i} />)}
          </div>
        </div>
      </section>

      <ProcessTimeline />

      <section className="franchise-band">
        <div className="wrap">
          <div className="fb-grid">
            <div>
              <p className="eyebrow"><span className="dot"></span>FRANQUICIAS Y FRANQUICIADOS</p>
              <h2 className="section-title" style={{ marginTop: 12 }}>Hablamos el idioma <span className="accent">de las franquicias.</span></h2>
            </div>
            <div className="fb-copy">
              <p>Llevamos años trabajando con redes de franquicias y con cada uno de sus franquiciados. Sabemos gestionar lo que necesita la central y lo que necesita cada local, y nos coordinamos con todos los equipos y proveedores implicados.</p>
              <ul>
                <li>Una marca coherente en todos los locales</li>
                <li>Comunicación local con personalidad propia</li>
                <li>Un solo interlocutor para central, franquiciados y proveedores</li>
              </ul>
              <a href="franquicias.html" className="btn btn-primary" style={{ marginTop: 24 }}>Cómo trabajamos con franquicias <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>
        </div>
      </section>

      <section className="bundles">
        <div className="wrap">
          <div className="head">
            <p className="eyebrow"><span className="dot"></span>CÓMO PRESUPUESTAMOS</p>
            <h2 style={{ marginTop: 16 }}>
              No vendemos <br/>
              <span className="pink">packs.</span>
            </h2>
            <p className="bundles__lede">Cada negocio es distinto, y meterlo en un pack cerrado es hacerle un traje que no es de su talla. Preparamos propuestas personalizadas según las necesidades, el momento y el presupuesto de tu negocio.</p>
          </div>
          <div className="bundle-grid">
            <div className="bundle">
              <div className="bundle__pill">paso 01</div>
              <h3>Te escuchamos</h3>
              <ul>
                <li>Dónde está tu negocio hoy</li>
                <li>A dónde quieres llegar</li>
                <li>Con qué recursos cuentas</li>
              </ul>
              <p className="bundle__for">Una conversación honesta, sin guion comercial.</p>
            </div>
            <div className="bundle bundle--featured">
              <div className="bundle__pill">paso 02</div>
              <h3>Diseñamos tu propuesta</h3>
              <ul>
                <li>Solo los servicios que necesitas</li>
                <li>Objetivos y KPIs claros</li>
                <li>Ajustada a tu presupuesto real</li>
              </ul>
              <p className="bundle__for">Ni más de lo que necesitas, ni menos de lo que mereces.</p>
            </div>
            <div className="bundle">
              <div className="bundle__pill">paso 03</div>
              <h3>Crecemos contigo</h3>
              <ul>
                <li>Revisamos resultados cada mes</li>
                <li>Escalamos lo que funciona</li>
                <li>Ajustamos cuando tu negocio cambia</li>
              </ul>
              <p className="bundle__for">Tu propuesta evoluciona al ritmo de tu marca.</p>
            </div>
          </div>
          <div style={{ marginTop: 48, textAlign: "center", position: "relative", zIndex: 1 }}>
            <a href="contacto.html" className="btn btn-primary">
              Quiero mi propuesta a medida
              <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>

      <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">¿Cuál de</span><br/>
                <span className="ink">estos </span><span>servicios</span><br/>
                <span className="ink">necesita tu </span><span>marca?</span>
              </h2>
            </div>
            <div className="col-r">
              <span className="tape"></span>
              <h3>VAMOS AL GRANO.</h3>
              <p>Cuéntanos en 2 frases qué buscas. Te respondemos en menos de 24h con una primera idea.</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 />);