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

const FAQ = [
  {
    q: "¿Necesito tener conocimientos de marketing para trabajar con vosotros?",
    a: "Cero. Nuestro equipo te guía desde el principio, te explica las estrategias, los pasos y cómo leer los datos. Tú céntrate en tu negocio. Nosotros, en hacer crecer su marca."
  },
  {
    q: "¿Qué tipo de servicios ofrecéis?",
    a: "Marketing digital 360: SEO, redes sociales, contenido, fotografía, vídeo, anuncios en Google y Meta, email marketing, diseño web, consultoría estratégica y branding. Todo bajo un mismo techo."
  },
  {
    q: "¿Cómo trabajáis una estrategia personalizada para mi negocio?",
    a: "Primero analizamos tu situación actual y a la competencia. Luego definimos objetivos concretos y un plan de acción a tu medida. Por último, trabajamos contigo, alineando estrategia con tu visión y valores de marca."
  },
  {
    q: "¿Trabajáis a largo plazo o hacéis proyectos puntuales?",
    a: "Las dos. Podemos arrancar con una campaña concreta o ser tu partner estratégico durante años. La mayoría de nuestros clientes empezaron como puntual y siguen con nosotros 5+ años después."
  },
  {
    q: "¿Cuánto cuesta trabajar con vosotros?",
    a: "No trabajamos con packs ni tarifas cerradas. Preparamos una propuesta personalizada según las necesidades y el presupuesto de tu negocio. A veces hace falta menos de lo que crees."
  },
  {
    q: "¿En cuánto tiempo se ven resultados?",
    a: "Depende del canal. SEO y orgánico, entre 3-6 meses. Ads bien planteados, entre 2-4 semanas. Branding y notoriedad, un proceso continuo. Lo que sí prometemos: visibilidad y reporting desde el día uno."
  },
  {
    q: "¿Trabajáis con clientes fuera de Barcelona o de España?",
    a: "Sí, y encantados. Las buenas ideas no entienden de fronteras: trabajamos con marcas de toda España y estamos preparados para hacerlo con marcas de cualquier parte del mundo. Los rodajes y reuniones presenciales los planificamos juntos; para todo lo demás, somos un equipo remoto y muy bien organizado."
  },
  {
    q: "Do you speak English?",
    a: "Of course we do. Good ideas don't need a passport: we're ready to work with brands wherever they are. Same team, same energy, same obsession with your brand — just in another language. Let's talk!"
  },
];

function FaqItem({ item, i }) {
  return (
    <details className="faq-item" key={i}>
      <summary>
        {item.q}
        <span className="icon">+</span>
      </summary>
      <p className="answer">{item.a}</p>
    </details>
  );
}

function ContactForm() {
  const [services, setServices] = useState([]);
  const [budget, setBudget] = useState("");
  const [sent, setSent] = useState(false);

  const toggleSvc = (s) => {
    setServices(services.includes(s) ? services.filter(x => x !== s) : [...services, s]);
  };

  if (sent) {
    return (
      <div className="contact-form">
        <span className="tape"></span>
        <h3>¡MENSAJE RECIBIDO!</h3>
        <p className="sub">Te respondemos en menos de 24h ♥</p>
        <p style={{ fontSize: 15, lineHeight: 1.6, color: "rgba(13,13,15,0.78)" }}>
          Hemos recibido tu mensaje. Le echamos un ojo y te escribimos personalmente, sin plantillas, sin guion comercial. Mientras tanto, échale un ojo a nuestros <a href="casos.html" style={{ borderBottom: "1px solid var(--wl-ink)" }}>casos de éxito</a>.
        </p>
        <p style={{ marginTop: 20, fontFamily: "var(--ff-script)", fontSize: 30, color: "var(--wl-accent)" }}>
          probablemente nos llevemos bien.
        </p>
      </div>
    );
  }

  return (
    <form className="contact-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
      <span className="tape"></span>
      <h3>Cuéntanos.</h3>
      <p className="sub">Sin guion. Sin compromiso.</p>

      <div className="field-row">
        <div className="field">
          <label>Nombre*</label>
          <input type="text" required placeholder="¿Cómo te llamamos?" />
        </div>
        <div className="field">
          <label>Marca / Empresa</label>
          <input type="text" placeholder="Tu marca" />
        </div>
      </div>

      <div className="field-row">
        <div className="field">
          <label>Email*</label>
          <input type="email" required placeholder="tu@email.com" />
        </div>
        <div className="field">
          <label>Teléfono</label>
          <input type="tel" placeholder="(opcional)" />
        </div>
      </div>

      <div className="field" style={{ marginTop: 8 }}>
        <label>¿En qué te podemos ayudar?</label>
        <div className="chips" style={{ marginTop: 8 }}>
          {["Redes sociales", "Contenido & Video", "Meta/TikTok Ads", "SEO", "Google Ads", "Web", "Branding", "Estrategia 360", "Aún no lo sé"].map(s => (
            <button key={s} type="button" className={`chip ${services.includes(s) ? "on" : ""}`} onClick={() => toggleSvc(s)}>{s}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label>¿En qué momento está tu negocio?</label>
        <div className="chips" style={{ marginTop: 8 }}>
          {["Empezando", "Creciendo", "Consolidado", "Proyecto puntual"].map(b => (
            <button key={b} type="button" className={`chip ${budget === b ? "on" : ""}`} onClick={() => setBudget(b)}>{b}</button>
          ))}
        </div>
      </div>

      <div className="field">
        <label>Cuéntanos en 2 líneas qué buscas*</label>
        <textarea required placeholder="Vendo X. Mi web no convierte. Mi competencia me come en redes. Necesito ayuda con..."></textarea>
      </div>

      <div className="submit-row">
        <small>Te respondemos en menos de 24h ♥</small>
        <button type="submit" className="btn btn-primary">
          Enviar
          <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>
        </button>
      </div>
    </form>
  );
}

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="contacto" />

      <section className="page-hero">
        <div className="wrap">
          <p className="eyebrow"><span className="dot"></span>CONTACTO · HABLEMOS COMO PERSONAS</p>
          <h1 className="page-hero__title">
            ¿Hablamos<br/>
            <span className="accent">de tu </span>
            marca?<br/>
            <span className="script">probablemente nos llevemos bien.</span>
          </h1>
          <p className="page-hero__lede">
            Sin comerciales que insisten, sin propuestas de 80 slides. Una llamada, una idea, una decisión. Cuéntanos qué necesitas y te respondemos en menos de 24h.
          </p>
        </div>
      </section>

      <section className="contact-wrap" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="contact-grid">
            <ContactForm />

            <aside className="contact-side">
              <div className="block pink">
                <div className="arr">
                  <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>
                </div>
                <h4>WhatsApp · rápido</h4>
                <div className="big">+34 698 38 65 56</div>
                <p>Si lo tuyo es escribir antes que rellenar formularios, escríbenos. Va directo al equipo.</p>
              </div>

              <div className="block">
                <div className="arr">
                  <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>
                </div>
                <h4>Email · formal</h4>
                <div className="big" style={{ fontSize: 22 }}>info@waterlemonstudio.com</div>
                <p>Para propuestas, briefings, ofertas comerciales o cualquier cosa que necesite contexto. Respondemos en 24h.</p>
              </div>

              <div className="block paper">
                <div className="arr">
                  <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>
                </div>
                <h4>Estudio · Barcelona</h4>
                <div className="big" style={{ fontSize: 22 }}>Barcelona, España</div>
                <p>Si estás cerca y quieres venir a un café (o vermut), avisa con tiempo y te abrimos puertas.</p>
              </div>

              <div style={{ background: "transparent", padding: "20px 4px", position: "relative" }}>
                <p style={{ fontFamily: "var(--ff-mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "rgba(13,13,15,0.55)", margin: "0 0 14px" }}>SÍGUENOS</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                  <a href="https://instagram.com/waterlemonstudio" className="chip" style={{ background: "transparent", border: "1.5px solid var(--wl-ink)", padding: "8px 14px", borderRadius: 999, fontFamily: "var(--ff-body)", fontWeight: 500, fontSize: 13 }}>Instagram ↗</a>
                  <a href="https://linkedin.com/company/waterlemonstudio" className="chip" style={{ background: "transparent", border: "1.5px solid var(--wl-ink)", padding: "8px 14px", borderRadius: 999, fontFamily: "var(--ff-body)", fontWeight: 500, fontSize: 13 }}>LinkedIn ↗</a>
                  <a href="https://facebook.com/waterlemonstudio" className="chip" style={{ background: "transparent", border: "1.5px solid var(--wl-ink)", padding: "8px 14px", borderRadius: 999, fontFamily: "var(--ff-body)", fontWeight: 500, fontSize: 13 }}>Facebook ↗</a>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <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>PREGUNTAS QUE NOS HACEN MUCHO</p>
            <h2 className="section-title" style={{ marginTop: 16 }}>
              Lo que <span className="accent">siempre</span><br/>
              nos preguntan.
            </h2>
          </div>
          <div className="faq-list">
            {FAQ.map((f, i) => <FaqItem key={i} item={f} i={i} />)}
          </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 />);