/* global React, Nav, Footer, ClientTicker, WaterlemonCursor, useTweaks, TweaksPanel, TweakSection, TweakColor */
const { useEffect } = React;

const FR_STEPS = [
  { n: "01", t: "Escuchamos a la central", d: "Entendemos la marca, sus guías, sus objetivos de red y lo que no se puede tocar." },
  { n: "02", t: "Conocemos cada local", d: "Cada franquiciado tiene su barrio, su público y sus retos. Los escuchamos uno a uno." },
  { n: "03", t: "Creamos el sistema", d: "Plantillas, calendario común y espacio para lo local. Coherencia sin perder personalidad." },
  { n: "04", t: "Coordinamos a todos", d: "Central, franquiciados y proveedores en el mismo canal. Un solo interlocutor: nosotros." },
  { n: "05", t: "Medimos por local y por red", d: "Reportes individuales para cada franquiciado y visión global para la central." },
  { n: "06", t: "Escalamos lo que funciona", d: "Lo que triunfa en un local se replica en la red. Así crece toda la marca." },
];

const FR_FAQ = [
  { q: "¿Trabajáis con la central o con cada franquiciado?", a: "Con los dos. Podemos llevar la marca desde la central, dar servicio a cada franquiciado o combinar ambos modelos. Lo adaptamos a cómo esté organizada tu red." },
  { q: "¿Cómo mantenéis la coherencia entre locales?", a: "Creamos un sistema común: guías, plantillas, calendario y tono de marca. Sobre esa base, cada local tiene contenido propio con su barrio, su equipo y sus clientes." },
  { q: "¿Qué pasa si cada franquiciado quiere cosas distintas?", a: "Es lo normal, y sabemos gestionarlo. Escuchamos a cada uno, lo alineamos con las directrices de la central y buscamos el punto donde todos ganan." },
  { q: "¿Os coordináis con otros proveedores de la marca?", a: "Sí. Trabajamos codo con codo con agencias de la central, fotógrafos, imprentas o equipos internos. Nadie se queda fuera de la conversación." },
];

function App() {
  const [t, setT] = useTweaks(/*EDITMODE-BEGIN*/{ "accent": "#FF2D87" }/*EDITMODE-END*/);
  useEffect(() => { document.documentElement.style.setProperty("--wl-accent", t.accent); }, [t.accent]);

  return (
    <React.Fragment>
      <Nav active="servicios" onPink />

      <section className="page-hero fr-hero">
        <div className="wrap">
          <p className="eyebrow" style={{ color: "rgba(255,252,245,0.85)" }}><span className="dot" style={{ background: "var(--wl-ink)" }}></span>FRANQUICIAS Y FRANQUICIADOS</p>
          <h1 className="page-hero__title">
            Una marca.<br/>
            <span className="ink">Muchos locales.</span><br/>
            <span className="script">un solo equipo detrás.</span>
          </h1>
          <p className="page-hero__lede" style={{ color: "rgba(255,252,245,0.92)" }}>
            Llevamos más de 5 años trabajando con redes de franquicias y sus franquiciados. Sabemos lo que necesita la central, lo que necesita cada local y cómo poner de acuerdo a todos los equipos y proveedores implicados.
          </p>
          <div style={{ marginTop: 28, display: "flex", gap: 14, flexWrap: "wrap" }}>
            <a href="contacto.html" className="btn btn-primary">Hablemos de tu red</a>
            <a href="#como" className="btn" style={{ border: "2px solid var(--wl-bone)", color: "var(--wl-bone)" }}>Cómo trabajamos ↓</a>
          </div>
        </div>
      </section>

      <section className="fr-stats">
        <div className="wrap">
          <div className="fr-stats__grid">
            <div><strong>+5 años</strong><span>trabajando con franquicias</span></div>
            <div><strong>+25</strong><span>locales gestionados en una sola red</span></div>
            <div><strong>1</strong><span>interlocutor para central, locales y proveedores</span></div>
          </div>
        </div>
      </section>

      <section className="fr-split">
        <div className="wrap">
          <p className="eyebrow"><span className="dot"></span>LO QUE GANA CADA PARTE</p>
          <h2 className="section-title" style={{ marginTop: 12 }}>Todos <span className="accent">ganan.</span></h2>
          <div className="fr-split__grid">
            <div className="fr-card ink">
              <span className="fr-tag">PARA LA CENTRAL</span>
              <h3>Control de marca, sin microgestión.</h3>
              <ul>
                <li>Imagen coherente en toda la red</li>
                <li>Guías y plantillas que se respetan</li>
                <li>Visión global de resultados</li>
                <li>Un partner que habla con todos por ti</li>
              </ul>
            </div>
            <div className="fr-card">
              <span className="fr-tag">PARA CADA FRANQUICIADO</span>
              <h3>Su local, con voz propia.</h3>
              <ul>
                <li>Contenido de su barrio, su equipo y sus clientes</li>
                <li>Campañas locales que traen leads</li>
                <li>Reportes claros de su propio local</li>
                <li>Alguien que entiende su día a día</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section className="fr-support">
        <div className="wrap">
          <p className="eyebrow" style={{ color: "rgba(255,252,245,0.75)" }}><span className="dot"></span><span style={{ color: "rgba(255,252,245,0.85)" }}>SOPORTE COMPLETO PARA CADA FRANQUICIADO</span></p>
          <h2 className="section-title" style={{ marginTop: 12, color: "var(--wl-bone)" }}>Todo lo que necesita<br/><span className="accent">tu franquicia.</span></h2>
          <div className="fr-support__grid">
            <div className="fr-sup"><span className="n">01</span><h3>Redes sociales orgánicas</h3><p>Gestión diaria de las cuentas de cada local, con su comunidad y su día a día.</p></div>
            <div className="fr-sup"><span className="n">02</span><h3>Creación de contenido</h3><p>Fotos, reels y piezas propias de cada local, dentro de la línea de marca.</p></div>
            <div className="fr-sup"><span className="n">03</span><h3>Paid Media (Meta)</h3><p>Campañas locales que traen leads a cada franquiciado, con su presupuesto.</p></div>
            <div className="fr-sup"><span className="n">04</span><h3>SEM · Google Ads</h3><p>Que te encuentren cuando buscan tu servicio cerca de casa.</p></div>
            <div className="fr-sup"><span className="n">05</span><h3>SEO local</h3><p>Ficha de Google, reseñas y posicionamiento de cada local en su zona.</p></div>
            <div className="fr-sup"><span className="n">06</span><h3>Estrategia de marketing</h3><p>Aplicamos la estrategia de la central y la aterrizamos en cada local.</p></div>
            <div className="fr-sup"><span className="n">07</span><h3>Gestión del franquiciado</h3><p>Un interlocutor cercano que entiende sus objetivos y le acompaña.</p></div>
            <div className="fr-sup"><span className="n">08</span><h3>Contenido personalizado</h3><p>Cada local con voz propia: su barrio, su equipo, sus clientes.</p></div>
          </div>
        </div>
      </section>

      <section className="process fr-process" id="como">
        <div className="wrap">
          <div className="head">
            <p className="eyebrow" style={{ color: "rgba(255,252,245,0.75)" }}><span className="dot"></span><span style={{ color: "rgba(255,252,245,0.85)" }}>PASO A PASO</span></p>
            <h2 className="section-title" style={{ marginTop: 12 }}>Así trabajamos <span className="accent">con tu red.</span></h2>
          </div>
          <div className="steps">
            {FR_STEPS.map(s => (
              <div key={s.n} className="step">
                <div className="num">{s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="faq">
        <div className="wrap">
          <div style={{ textAlign: "center", maxWidth: 900, margin: "0 auto" }}>
            <p className="eyebrow" style={{ justifyContent: "center" }}><span className="dot"></span>DUDAS DE FRANQUICIAS</p>
            <h2 className="section-title" style={{ marginTop: 14 }}>Lo que <span className="accent">siempre</span> nos preguntan.</h2>
          </div>
          <div className="faq-list">
            {FR_FAQ.map((f, i) => (
              <details className="faq-item" key={i}>
                <summary>{f.q}<span className="icon">+</span></summary>
                <p className="answer">{f.a}</p>
              </details>
            ))}
          </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>¿TIENES UNA RED?</p>
              <h2 style={{ marginTop: 16 }}>
                <span className="ink">Hagamos crecer</span><br/>
                <span className="ink">toda tu </span>red.
              </h2>
            </div>
            <div className="col-r">
              <span className="tape"></span>
              <h3>HABLEMOS DE TU FRANQUICIA.</h3>
              <p>Cuéntanos cuántos locales tienes y cómo os organizáis. Te proponemos un modelo a medida en menos de 24h.</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>
      </TweaksPanel>
    </React.Fragment>
  );
}

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