/* SISMO one-page — Nosotras, Servicios, Trabajos */
const { useState: useStateMid } = React;

function Nosotras() {
  return (
    <section className="nosotras" id="nosotras">
      <div className="nosotras__inner">
        <div>
          <span className="eyebrow">Quiénes somos</span>
          <h2 className="black-title rv">Somos SISMO.<br/>NOS INVOLUCRAMOS<br/>EN CADA PROYECTO<br/>como si fuera<br/>propio</h2>
          <p className="rv rv-d1">Somos una agencia creativa de Tierra del Fuego. Trabajamos cerca de cada marca para entender qué necesita comunicar, qué la hace diferente y hacia dónde quiere crecer.</p>
          <p className="rv rv-d2">Combinamos estrategia, identidad, diseño y contenido para que toda la comunicación tenga una misma dirección. No hacemos contenido por cumplir: creamos ideas con intención, procesos claros y producción propia.</p>
          <div className="nosotras__quote rv rv-d3">
            Vos conocés tu negocio.<br/><span>Nosotras sabemos cómo mostrarlo.</span>
          </div>
        </div>
        <div className="nosotras__media rv rv-d2">
          <div className="slot-a"><img src="assets/equipo-sofa.png" alt="El equipo de SISMO" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/></div>
          <div className="slot-b"><img src="assets/equipo-locacion.png" alt="Jornada de contenido en locación, Tierra del Fuego" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/></div>
          <div className="slot-c"><img src="assets/equipo-rodaje.jpeg" alt="Detrás de escena de un rodaje" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/></div>
          <span className="nosotras__badge">Producción propia</span>
        </div>
      </div>
    </section>
  );
}

const SERVICIOS = [
  {
    n: "01", title: "Estrategia y gestión de redes",
    desc: "Ordenamos, planificamos y gestionamos la comunicación mensual de tu marca para que tenga constancia, coherencia y un objetivo detrás.",
    phrase: "No se trata de publicar más. Se trata de publicar con sentido.",
    items: ["Estrategia mensual", "Pilares, enfoques y objetivos", "Calendario de contenido", "Diseño de publicaciones e historias", "Producción de contenido propio", "Edición de reels", "Redacción de textos", "Programación y publicación", "Gestión de comunidad", "Informes de rendimiento"]
  },
  {
    n: "02", title: "Branding e identidad visual",
    desc: "Creamos marcas desde cero y renovamos identidades existentes para que cada punto de contacto comunique la misma personalidad.",
    phrase: "Una marca no es solamente un logo. Es todo lo que hace que te reconozcan.",
    items: ["Investigación y concepto", "Moodboards", "Diseño de logotipo", "Isotipo y versiones de marca", "Paleta de colores", "Sistema tipográfico", "Manual de identidad", "Aplicaciones de marca", "Kit visual para redes", "Rediseño de identidades"]
  },
  {
    n: "03", title: "Producción audiovisual",
    desc: "Planificamos y producimos contenido original para que tu marca deje de depender de imágenes genéricas.",
    phrase: "Tu marca merece contenido propio.",
    items: ["Concepto y planificación", "Guiones", "Dirección de producción", "Filmación", "Fotografía de producto", "Fotografía institucional", "Jornadas de contenido", "Reels y videos para campañas", "Cobertura de eventos", "Edición y entrega digital"]
  },
  {
    n: "04", title: "Edición de video y motion graphics",
    desc: "Transformamos material propio en contenido profesional, dinámico y alineado con la identidad de la marca.",
    phrase: "No es solamente cortar clips. Es construir ritmo, mensaje e identidad.",
    items: ["Asesoramiento previo", "Guion base", "Edición de video", "Motion graphics", "Animaciones y textos dinámicos", "Diseño de subtítulos", "Diseño sonoro y musicalización", "Formatos verticales y horizontales", "Spots publicitarios", "Placas animadas"]
  },
  {
    n: "05", title: "Diseño web",
    desc: "Diseñamos experiencias digitales que se ven bien, funcionan bien y representan de verdad a la marca.",
    phrase: "Tu web no debería parecer una plantilla. Debería parecer tu marca.",
    items: ["Landing pages", "Sitios institucionales", "Webs one page", "Diseño UX/UI", "Desarrollo en WordPress", "Diseño responsive", "Rediseño de sitios existentes", "Organización de contenidos", "Formularios y WhatsApp", "Mantenimiento"]
  },
  {
    n: "06", title: "Campañas y acompañamiento estratégico",
    desc: "Diseñamos acciones para que una comunicación bien construida también llegue a las personas correctas.",
    phrase: "Crear es una parte. Hacer que llegue también importa.",
    items: ["Meta Ads", "Google Ads", "Definición de objetivos", "Segmentación de audiencias", "Diseño de anuncios", "Seguimiento y optimización", "Auditorías de comunicación", "Auditorías de redes", "Consultorías de marca", "Asesoramiento a equipos"]
  },
];

function Servicios() {
  const [open, setOpen] = useStateMid(0);
  return (
    <section className="servicios" id="servicios">
      <div className="servicios__head">
        <span className="eyebrow eyebrow--pink">Lo que hacemos</span>
        <h2 className="black-title rv">Una marca no se construye con piezas sueltas.</h2>
        <p className="rv rv-d1">Podemos acompañarte de forma integral o intervenir en una necesidad puntual. Estrategia, identidad, contenido y herramientas digitales trabajando como un mismo sistema.</p>
      </div>
      <div className="acc rv rv-d1">
        {SERVICIOS.map((s, i) => (
          <div className={"acc__item" + (open === i ? " open" : "")} key={s.n}>
            <button className="acc__btn" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
              <span className="acc__num">{s.n}</span>
              <span className="acc__title">{s.title}</span>
              <span className="acc__icon">+</span>
            </button>
            <div className="acc__body">
              <div className="acc__content">
                <div>
                  <p className="acc__desc">{s.desc}</p>
                  <span className="acc__phrase">{s.phrase}</span>
                </div>
                <ul className="acc__list">
                  {s.items.map(it => <li key={it}>{it}</li>)}
                </ul>
              </div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const WORKS_DATA = [
  {
    name: "VX", meta: "Producción de contenido · Fotografía · Redes",
    desc: "Jornadas de producción propia en el gimnasio: fotos reales, de su gente, para su feed.",
    imgs: ["vx-01.jpg", "vx-02.jpg", "vx-03.jpg", "vx-04.jpg", "vx-05.jpg"]
  },
  {
    name: "Le Brûlée", meta: "Branding · Identidad visual · Fotografía",
    desc: "Marca creada desde cero — logo, sistema visual, sesión de fotos y creación de contenido para redes.",
    imgs: ["lebrulee-00-cover.png", "lebrulee-brand-01.png", "lebrulee-brand-02.png", "lebrulee-02.jpg", "lebrulee-03.jpg", "lebrulee-04.jpg"]
  },
  {
    name: "NutriCook", meta: "Fotografía de producto · Contenido para redes",
    desc: "Producción de producto en contexto real: el gimnasio, la calle, el uso de verdad.",
    imgs: ["nutricook-01.jpg", "nutricook-02.jpg", "nutricook-03.jpg", "nutricook-04.jpg"]
  },
  {
    name: "Marcela Hernández · SanCorSalud", meta: "Estrategia · Diseño de contenido · Carruseles",
    desc: "Sistema de placas con identidad propia para una asesora comercial.",
    imgs: ["marcela-01.png", "marcela-02.png", "marcela-03.png"]
  },
];

function WorkCarousel({ imgs, name }) {
  const ref = React.useRef(null);
  const [idx, setIdx] = React.useState(0);
  const go = dir => {
    const el = ref.current;
    const w = el.clientWidth;
    const next = Math.max(0, Math.min(imgs.length - 1, idx + dir));
    el.scrollTo({ left: next * w, behavior: "smooth" });
  };
  const onScroll = () => {
    const el = ref.current;
    setIdx(Math.round(el.scrollLeft / el.clientWidth));
  };
  return (
    <div className="wk__media">
      <div className="wk__strip" ref={ref} onScroll={onScroll}>
        {imgs.map(f => <img key={f} src={"assets/works/" + f} alt={"Trabajo para " + name} loading="lazy"/>)}
      </div>
      {imgs.length > 1 && (
        <>
          <button className="wk__nav wk__nav--l" aria-label="Anterior" onClick={() => go(-1)} disabled={idx === 0}>←</button>
          <button className="wk__nav wk__nav--r" aria-label="Siguiente" onClick={() => go(1)} disabled={idx === imgs.length - 1}>→</button>
          <div className="wk__dots">{imgs.map((_, i) => <i key={i} className={i === idx ? "on" : ""}></i>)}</div>
        </>
      )}
    </div>
  );
}

const REELS = [
  {
    client: "VX · Fitness", views: "1.18M", label: "reproducciones",
    chips: [["+2.548", "seguidores nuevos"], ["24 mil", "veces compartido"], ["28.4 mil", "me gusta"]],
    url: "https://www.instagram.com/reels/DNq0YkwuwE3/", big: true
  },
  {
    client: "Quilmes La Estación · Multirubro", views: "790K", label: "reproducciones",
    chips: [["567 mil", "cuentas alcanzadas"], ["11.4 mil", "compartidos"]],
    url: "https://www.instagram.com/reel/DZpqprCgGhs/"
  },
  {
    client: "Quilmes La Estación · Multirubro", views: "207K", label: "reproducciones",
    chips: [["+548", "seguidores nuevos"]],
    url: "https://www.instagram.com/reel/DW32OSylZNm/"
  },
  {
    client: "Vale · Odontopediatra", views: "140K", label: "reproducciones",
    chips: [["116 mil", "cuentas alcanzadas"], ["+309", "seguidores nuevos"]],
    url: "https://www.instagram.com/reel/DX-aR9YtS_l/"
  },
  {
    client: "Gabriela Pahud · Profe de matemática", views: "+3 días", label: "de reproducción acumulada",
    chips: [["323", "veces guardado"], ["+280", "seguidores nuevos"]],
    url: "https://www.instagram.com/reel/DYF1jMFjSS6/"
  },
  {
    client: "Le Brûlée", views: "15.5K", label: "visualizaciones multiplataforma",
    chips: [["13 mil", "en Instagram"], ["2.4 mil", "en Facebook"], ["137", "compartidos"]],
    url: "https://www.instagram.com/p/DTNZo_hjlZ-/"
  },
];

function Resultados() {
  return (
    <div className="resultados">
      <div className="resultados__head rv">
        <h3>Contenido que <span className="hl-pink">llegó lejos</span></h3>
        <p>Métricas reales de reels que producimos, editamos y publicamos para nuestros clientes.</p>
      </div>
      <div className="resultados__grid">
        {REELS.map((r, i) => (
          <a className={"rcard rv rv-d" + Math.min(i + 1, 4) + (r.big ? " rcard--big" : "")} key={r.url + r.views} href={r.url} target="_blank" rel="noopener">
            <span className="rcard__client">{r.client}</span>
            <span className="rcard__views">{r.views}</span>
            <span className="rcard__label">{r.label}</span>
            <span className="rcard__chips">
              {r.chips.map(([v, l]) => <span className="rchip" key={l}><b>{v}</b> {l}</span>)}
            </span>
            <span className="rcard__go">Ver reel en Instagram
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg>
            </span>
          </a>
        ))}
      </div>
    </div>
  );
}

function Trabajos() {
  return (
    <section className="trabajos" id="trabajos">
      <div className="trabajos__head">
        <span className="eyebrow">Nuestro trabajo</span>
        <h2 className="black-title rv">Lo que hacemos <span className="hl">se ve.</span></h2>
        <p className="rv rv-d1">Producción propia, diseño con identidad y contenido hecho a medida — esto es lo que entregamos, con marcas reales.</p>
      </div>
      <div className="wk-grid">
        {WORKS_DATA.map((w, i) => (
          <article className={"wk rv rv-d" + Math.min(i + 1, 3)} key={w.name}>
            <WorkCarousel imgs={w.imgs} name={w.name}/>
            <div className="wk__info">
              <span className="wk__name">{w.name}</span>
              <span className="wk__meta">{w.meta}</span>
              <p className="wk__desc">{w.desc}</p>
            </div>
          </article>
        ))}
      </div>
      <Resultados/>
      <div className="tr-cta rv rv-d3">
        <p>En nuestras redes podés ver mucho más: proyectos, producciones, reels, historias y el trabajo que hacemos todos los días.</p>
        <a className="btn btn-grad" href="https://www.instagram.com/agenciasismo/" target="_blank" rel="noopener">
          Conocé más de nuestro trabajo
          <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg>
        </a>
      </div>
    </section>
  );
}

Object.assign(window, { Nosotras, Servicios, Trabajos });