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

const TEAM = [
  {
    name: "Raquel Hubschman",
    role: "Co-founder & Marketing Director",
    blurb: "Creativa, autodidacta, resolutiva y comprometida. La mente marketiniana del equipo. Cualquier idea, ella le encuentra el cómo.",
    label: "RAQUEL · BCN",
    li: "linkedin.com/in/raquelhu",
    stamp: "CEO ♥",
  },
  {
    name: "Rafael Álvarez",
    role: "Co-founder & Project Director",
    blurb: "Creativo, enérgico, metódico y estratégico. Lleva las cuentas del equipo y los proyectos como un reloj suizo.",
    label: "RAFA · BCN",
    li: "linkedin.com/in/jrafaelalvarez",
    stamp: "DIR ★",
  },
  {
    name: "Enric Tabilo",
    role: "Senior Consulting · SEO",
    blurb: "Analítico y estratega. Hace que tus visitantes web se conviertan en clientes potenciales. Habla con Google y le hace caso.",
    label: "ENRIC · BCN",
    li: "linkedin.com/in/enrictabilo",
    stamp: "SEO",
  },
  {
    name: "Mikel",
    role: "Filmmaker Specialist",
    blurb: "Convierte un simple video en una obra de arte. Enfoque especial para contenido único, ojo de cineasta, mano de editor.",
    label: "MIKEL · BCN",
    li: "linkedin.com/in/mikel",
    stamp: "FILM",
  },
  {
    name: "Macarena Ifraín",
    role: "Content Specialist & Account Manager",
    blurb: "Ingeniosa, detallista y en constante movimiento. Siempre busca el toque perfecto en cada post, cada caption, cada idea.",
    label: "MACA · BCN",
    li: "linkedin.com/in/macarena",
    stamp: "PM",
  },
  {
    name: "Marylin Rodríguez",
    role: "Senior Designer",
    blurb: "Creativa, estética y obsesionada con los detalles. Convierte ideas en diseños que comunican. Lo que toca, brilla.",
    label: "MARYLIN · BCN",
    li: "linkedin.com/in/marylin",
    stamp: "DSGN",
  },
  {
    name: "Mariana Godoy",
    role: "Project Manager & Content Strategy",
    blurb: "Nuestra coordinadora y la directora de orquesta del equipo. Convierte el caos creativo en calendario, las ideas en entregas y los plazos en promesas cumplidas. Con ella, todo llega a tiempo y con alma.",
    label: "MARIANA · BCN",
    li: "linkedin.com/in/marianagodoy",
    stamp: "PM",
  },
  {
    name: "Mafer Padilla",
    role: "Account Manager & Content Specialist",
    blurb: "El puente entre tu marca y el equipo. Aplica estrategias de paid media y crea vídeos que convierten, asegurándose de que cada pieza suene a ti.",
    label: "MAFER · BCN",
    li: "linkedin.com/in/maferpadilla",
    stamp: "ACCT",
  },
  {
    name: "Melisa Kamegawa",
    role: "Account Manager & Content Creator",
    blurb: "Nuestra experta en IA. Cuida de cada cuenta como si fuera la suya y crea contenido que conecta, con la inteligencia artificial como aliada. Cercana, creativa y siempre con la cámara lista.",
    label: "MELISA · BCN",
    li: "linkedin.com/in/melisakamegawa",
    stamp: "CREATOR",
  },
];

function MemberCard({ m }) {
  const [ref, inView] = useInView();
  return (
    <article ref={ref} className={`member-card fade-up ${inView ? "in" : ""} ${m.ghost ? "ghost" : ""}`}>
      <div className="photo">
        <span className="stamp">{m.stamp}</span>
        <image-slot id={`team-${m.name.toLowerCase().normalize("NFD").replace(/[^a-z]/g,"")}`} shape="rect" placeholder={`Foto de ${m.name.split(" ")[0]}`} style={{ position: "absolute", inset: 0 }}></image-slot>
      </div>
      <div className="info">
        <div>
          <h3>{m.name}</h3>
          <p className="role">{m.role}</p>
        </div>
      </div>
      <p className="blurb">{m.blurb}</p>
      {!m.ghost && <a href={`https://${m.li}`} className="li">LinkedIn ↗</a>}
      {m.ghost && <a href="mailto:careers@waterlemonstudio.com" className="li">Escríbenos ↗</a>}
    </article>
  );
}

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

      <section className="page-hero">
        <div className="wrap">
          <p className="eyebrow"><span className="dot"></span>EL EQUIPO · MENTES CREATIVAS, ESPECIALIDADES DISTINTAS</p>
          <h1 className="page-hero__title">
            El éxito<br/>
            <span className="accent">empieza con</span><br/>
            personas. <span className="script">aquí estamos.</span>
          </h1>
          <p className="page-hero__lede">
            No queremos ser una agencia más. Queremos ser un equipo donde la creatividad, la estrategia y la cercanía se fusionen para crear marca. Esto somos nosotros.
          </p>
        </div>

        <div className="team-hero-photo">
          <div className="wrap">
            <div className="team-hero-photo__frame">
              <span className="stamp">[ FOTO DE EQUIPO COMPLETO ]</span>
              <image-slot id="team-group" shape="rect" placeholder="Foto del equipo completo" style={{ position: "absolute", inset: 0 }}></image-slot>
            </div>
          </div>
        </div>
      </section>

      {/* VALUES */}
      <section className="values">
        <div className="wrap">
          <div style={{ marginBottom: 56, maxWidth: 720 }}>
            <p className="eyebrow"><span className="dot"></span>LO QUE NOS MUEVE</p>
            <h2 className="section-title" style={{ marginTop: 12 }}>
              Tres valores,<br/>
              <span className="accent">cero postureo.</span>
            </h2>
          </div>
          <div className="grid">
            <div className="value-card">
              <svg className="icon" viewBox="0 0 64 64" fill="none">
                <path d="M32 56 C 8 42, 4 22, 14 12 C 22 6, 28 12, 32 20 C 36 12, 42 6, 50 12 C 60 22, 56 42, 32 56 Z" stroke="currentColor" strokeWidth="3" strokeLinejoin="round"/>
              </svg>
              <h3>Cercanía</h3>
              <p>Nos hablamos de "tú" desde el comienzo, porque tu proyecto se convierte en el nuestro. Si a ti te va bien, a nosotros también.</p>
            </div>
            <div className="value-card">
              <svg className="icon" viewBox="0 0 64 64" fill="none">
                <path d="M32 4 L36 24 L56 26 L40 38 L46 58 L32 46 L18 58 L24 38 L8 26 L28 24 Z" stroke="currentColor" strokeWidth="3" strokeLinejoin="round"/>
              </svg>
              <h3>Creatividad</h3>
              <p>La creatividad es la fuerza más potente en los negocios. Nos inspiramos, nos apasionamos y nos divertimos creando. No es trabajo, es pasión.</p>
            </div>
            <div className="value-card">
              <svg className="icon" viewBox="0 0 64 64" fill="none">
                <circle cx="32" cy="32" r="26" stroke="currentColor" strokeWidth="3"/>
                <path d="M22 28 L30 38 L46 22" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <h3>Aprendizaje</h3>
              <p>No creemos en "expertos": si puedes aprender algo nuevo cada día, ¿cuándo te conviertes en uno? Aprender es el eje que nos mueve.</p>
            </div>
          </div>
        </div>
      </section>

      {/* TEAM GRID */}
      <section style={{ background: "var(--wl-paper)", padding: "120px 0" }}>
        <div className="wrap">
          <div style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "end", marginBottom: 20 }}>
            <div>
              <p className="eyebrow"><span className="dot"></span>SOMOS EQUIPO</p>
              <h2 className="section-title" style={{ marginTop: 12 }}>
                Mentes <span className="accent">creativas.</span><br/>
                Especialidades <span className="script">distintas.</span>
              </h2>
            </div>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: "rgba(13,13,15,0.78)", marginLeft: "auto", maxWidth: 380 }}>
              Pasión, marketing, fotografía, arte, visuales, estrategia y comunicación. Y ganas. Sobre todo, ganas.
            </p>
          </div>

          <div className="team-grid">
            {TEAM.map((m, i) => <MemberCard key={i} m={m} />)}
          </div>
        </div>
      </section>

      {/* MANIFESTO BAND */}
      <section className="manifesto">
        <div className="wrap">
          <p className="eyebrow" style={{ color: "rgba(255,252,245,0.7)" }}><span className="dot"></span><span style={{ color: "rgba(255,252,245,0.8)" }}>MANIFIESTO BREVE</span></p>
          <div className="mf-grid">
            <div className="mf-step">
              <span className="mf-num">01</span>
              <h2 className="mf-big">No queremos ser una agencia <span className="pink">creativa más.</span></h2>
            </div>
            <div className="mf-step">
              <span className="mf-num">02</span>
              <p className="mf-lead">Queremos una fusión donde se encuentren</p>
              <div className="mf-pills">
                {["Creatividad", "Contenido", "Estrategia", "Cercanía", "Comunicación"].map(w => <span key={w}>{w}</span>)}
              </div>
              <p className="mf-lead">para crear <strong>MARCA.</strong></p>
            </div>
            <div className="mf-step">
              <span className="mf-num">03</span>
              <p className="mf-close">Y de paso, darle al mundo <span className="pink">un poco más de humanidad.</span></p>
              <p className="mf-sign">— Eso somos. Eso queremos. ♥</p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA FINAL */}
      <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>HABLEMOS</p>
              <h2 style={{ marginTop: 16 }}>
                <span className="ink">¿Te vienes</span><br/>
                <span className="ink">a trabajar</span><br/>
                <span className="ink">con </span>nosotros?
              </h2>
            </div>
            <div className="col-r">
              <span className="tape"></span>
              <h3>HABLEMOS COMO PERSONAS.</h3>
              <p>Si tienes una marca y un proyecto, te leemos. Si tienes talento y quieres unirte al equipo, también.</p>
              <div className="actions">
                <a href="contacto.html"><span>Mi marca</span><span className="right">Cuéntame tu proyecto →</span></a>
                <a href="mailto:careers@waterlemonstudio.com"><span>Quiero unirme</span><span className="right">careers@waterlemonstudio.com →</span></a>
                <a href="https://wa.me/34698386556"><span>WhatsApp</span><span className="right">+34 698 38 65 56 →</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 />);