const { useState, useEffect, useRef } = React;

/* ───────────────────────── PALETTES ───────────────────────── */
const PALETTES = {
  electric: { bg: "#0a0a0f", ink: "#f4f4f5", muted: "#9b9ba8", line: "#1f1f2a", accent: "#d4ff3a", accentInk: "#0a0a0f", surface: "#14141d", chip: "#d4ff3a" },
  magenta:  { bg: "#1a0a1f", ink: "#fef6ff", muted: "#b491b8", line: "#2e1832", accent: "#ff3da8", accentInk: "#1a0a1f", surface: "#260f2d", chip: "#ff3da8" },
  cream:    { bg: "#f1ece1", ink: "#161412", muted: "#7a736a", line: "#d8cfbe", accent: "#e85a2c", accentInk: "#fff", surface: "#e8e1d2", chip: "#1a1816" },
  noir:     { bg: "#0f0e0d", ink: "#f3eee3", muted: "#8a847a", line: "#2a2724", accent: "#ff6a3d", accentInk: "#0f0e0d", surface: "#1a1816", chip: "#f3eee3" },
};

const FONT_PAIRS = {
  editorial: { display: '"Instrument Serif", serif',         body: '"Hanken Grotesk", system-ui, sans-serif', tag: "Editorial" },
  modern:    { display: '"Bricolage Grotesque", sans-serif', body: '"DM Sans", system-ui, sans-serif',        tag: "Moderna" },
  classic:   { display: '"Cormorant Garamond", serif',       body: '"Manrope", system-ui, sans-serif',        tag: "Clásica" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "noir",
  "fonts": "modern",
  "showGrid": false
}/*EDITMODE-END*/;

/* ───────────────────────── DATA ───────────────────────── */
const CLIENTS = [
  "GBS Global Business Solutions",
  "Castellanos y Asociados",
  "Tecnomóvil",
  "Soprém",
  "Cangurove",
  "Delta2 Estudios",
];

const SERVICES = [
  { n: "01", t: "Diseño para redes", d: "Sistemas visuales para Instagram y TikTok que mantienen tu marca consistente, reconocible y vendiendo. Feed, carruseles, reels y campañas mensuales.", tags: ["Feed", "Carruseles", "Stories"] },
  { n: "02", t: "Contenido UGC", d: "Produzco contenido auténtico en cámara para tu producto: guion, grabación y edición incluidas. Formatos nativos que convierten en TikTok e Instagram.", tags: ["Video", "Reels", "TikTok"] },
  { n: "03", t: "Arte publicitario", d: "Piezas para campañas de alto impacto: vallas, mockups, afiches y anuncios diseñados para parar el scroll y comunicar el mensaje en segundos.", tags: ["Vallas", "Mockups", "Print"] },
  { n: "04", t: "Identidad de marca", d: "Logos, paletas, tipografías y sistemas de aplicación. Marcas que se sostienen en el tiempo, en cualquier plataforma y a cualquier escala.", tags: ["Logo", "Sistema", "Aplicaciones"] },
];

const WORK = [
  { id: "gbs",         client: "GBS Global Business Solutions", kind: "Redes + arte publicitario", year: "2024–26", tags: ["Social", "Arte publicitario"], img: "assets/gbs-luna.png",          color: "#0f0e0d", accent: "#e02020" },
  { id: "castellanos", client: "Castellanos y Asociados",        kind: "Diseño editorial + redes",  year: "2024–26", tags: ["Editorial", "Social"],          img: "assets/gbs-aereos.png",        color: "#eeeae3", accent: "#1a1816" },
  { id: "tecnomovil",  client: "Tecnomóvil / Soprém",            kind: "Sistema de redes + UGC",    year: "2023–26", tags: ["Social", "UGC"],                img: "assets/tm-kitrines.png",       color: "#111111", accent: "#ffd60a" },
  { id: "cangurove",   client: "Cangurove",                       kind: "Campañas de temporada",     year: "2023–24", tags: ["Campaña", "Social"],            img: "assets/canguro-instagram.jpg", color: "#1a1a1a", accent: "#ffd60a" },
  { id: "delta2",      client: "Delta2 Estudios",                 kind: "Identidad + redes",         year: "2025–26", tags: ["Branding", "Social"],           img: "assets/delta2-servicios.png",  color: "#0e2a55", accent: "#ee7a1a" },
];

const TESTIMONIALS = [
  { q: "Dubimar entendió la marca desde la primera llamada. Las piezas comunican rápido y la audiencia engancha.", who: "Equipo GBS",     role: "Global Business Solutions" },
  { q: "Trabaja rápido, propone y cuida cada detalle. Los reels que graba para Tecnomóvil tienen otro nivel.",       who: "Tecnomóvil",    role: "Caracas / San Cristóbal" },
  { q: "Más que diseñadora: estratega. Llevó la identidad de Delta2 a un sistema que aplicamos en todo.",            who: "Delta2 Estudios", role: "Sagunto, Valencia · España" },
];

const PROCESS = [
  { n: "01", t: "Descubrimiento",  d: "Llamada estratégica de 30–45 min para entender tu negocio, audiencia y objetivos. Sin compromiso." },
  { n: "02", t: "Propuesta",       d: "Brief con alcance, entregables y cronograma claros. Una sola propuesta, sin sorpresas ni letra chica." },
  { n: "03", t: "Producción",      d: "Diseño + grabación + edición con 2 rondas de revisión. Tú decides; yo defiendo cada idea con criterio." },
  { n: "04", t: "Entrega",         d: "Archivos editables, plantillas y soporte de 30 días para que tu equipo siga implementando de forma autónoma." },
];

/* ───────────────────────── COMPONENT ───────────────────────── */
function Portfolio() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [tweaksOpen, setTweaksOpen] = useState(false);
  const [hover, setHover] = useState(null);
  const [tIdx, setTIdx] = useState(0);
  const [navHidden, setNavHidden] = useState(false);
  const lastY = useRef(0);

  const p = PALETTES[t.palette] || PALETTES.noir;
  const f = FONT_PAIRS[t.fonts]  || FONT_PAIRS.modern;

  useEffect(() => {
    const onScroll = () => {
      const y = window.scrollY;
      setNavHidden(y > 80 && y > lastY.current);
      lastY.current = y;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffect(() => {
    const id = setInterval(() => setTIdx(i => (i + 1) % TESTIMONIALS.length), 6000);
    return () => clearInterval(id);
  }, []);

  useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode')   setTweaksOpen(true);
      if (e.data?.type === '__deactivate_edit_mode') setTweaksOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const cssVars = {
    "--bg": p.bg, "--ink": p.ink, "--muted": p.muted, "--line": p.line,
    "--accent": p.accent, "--accent-ink": p.accentInk, "--surface": p.surface, "--chip": p.chip,
    "--ff-display": f.display, "--ff-body": f.body,
  };

  return (
    <div className="root" style={cssVars} data-screen-label="Portfolio Dubimar">
      {t.showGrid && <Grid />}

      {/* ── NAV ── */}
      <nav className={"nav" + (navHidden ? " nav-hidden" : "")}>
        <a href="#top" className="nav-mark">
          <span className="nav-mark-d">D</span>
          <div className="nav-mark-text">
            <span className="nav-mark-name">Dubimar Mujica</span>
            <span className="nav-mark-role">Estudio Creativo</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#trabajo">Trabajo</a>
          <a href="#servicios">Servicios</a>
          <a href="#sobre-mi">Sobre mí</a>
          <a href="#proceso">Proceso</a>
        </div>
        <a href="#contacto" className="nav-cta">
          Iniciar proyecto
          <span className="nav-cta-dot" />
        </a>
      </nav>

      {/* ── HERO ── */}
      <header id="top" className="hero">
        <div className="hero-bg" aria-hidden="true" />

        <div className="hero-wrap">
          {/* Left: copy */}
          <div className="hero-left">
            <div className="hero-label">
              <span className="status-dot" />
              <span>Estudio disponible · 2026</span>
              <span className="hero-label-sep">·</span>
              <span>CCS · MAD · Remoto</span>
            </div>

            <h1 className="hero-h1">
              <span>Diseño que</span>
              <span className="hero-h1-em">convierte.</span>
              <span>Contenido que</span>
              <span className="hero-h1-em">vende.</span>
            </h1>

            <p className="hero-p">
              Sistemas visuales para marcas que quieren dominar sus redes.
              Diseño estratégico, contenido UGC y branding con resultados medibles.
            </p>

            <div className="hero-actions">
              <a href="#contacto" className="hero-cta-main">
                Iniciar proyecto
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M8 3l5 5-5 5" stroke="currentColor" strokeWidth="1.6"/>
                </svg>
              </a>
              <a href="#trabajo" className="hero-cta-ghost">
                Ver trabajo <span className="hero-cta-count">{WORK.length} casos</span>
              </a>
            </div>

            <div className="hero-metrics">
              <div className="hero-metric">
                <strong>6+</strong>
                <span>años de experiencia</span>
              </div>
              <div className="hero-metric-sep" />
              <div className="hero-metric">
                <strong>5+</strong>
                <span>marcas activas</span>
              </div>
              <div className="hero-metric-sep" />
              <div className="hero-metric">
                <strong>3×</strong>
                <span>alcance promedio</span>
              </div>
              <div className="hero-metric-sep" />
              <div className="hero-metric">
                <strong>80+</strong>
                <span>piezas entregadas</span>
              </div>
            </div>
          </div>

          {/* Right: mosaic of work */}
          <div className="hero-right">
            <div className="hero-mosaic">
              <div className="hero-mosaic-main">
                <img src="assets/gbs-luna.png" alt="GBS — Arte publicitario" />
                <span className="hero-mosaic-label">GBS · Arte publicitario</span>
              </div>
              <div className="hero-mosaic-col">
                <div className="hero-mosaic-item" style={{ background: "#0e2a55" }}>
                  <img src="assets/delta2-servicios.png" alt="Delta2 Estudios — Branding" />
                  <span className="hero-mosaic-label">Delta2 · Branding</span>
                </div>
                <div className="hero-mosaic-item" style={{ background: "#111" }}>
                  <img src="assets/tm-kitrines.png" alt="Tecnomóvil — UGC" />
                  <span className="hero-mosaic-label">Tecnomóvil · UGC</span>
                </div>
              </div>
            </div>

            <div className="hero-float">
              <span className="hero-float-n">3×</span>
              <div className="hero-float-text">
                <span className="hero-float-l">Alcance orgánico</span>
                <span className="hero-float-sub">promedio · 12 meses</span>
              </div>
            </div>
          </div>
        </div>
      </header>

      {/* ── MARQUEE ── */}
      <section className="marquee" aria-label="Clientes">
        <div className="marquee-eyebrow">Marcas que han confiado en el estudio</div>
        <div className="marquee-track">
          {[...CLIENTS, ...CLIENTS, ...CLIENTS].map((c, i) => (
            <span key={i} className="marquee-item">
              <span className="marquee-star">✦</span>
              <span dangerouslySetInnerHTML={{ __html: c }} />
            </span>
          ))}
        </div>
      </section>

      {/* ── SELECTED WORK ── */}
      <section id="trabajo" className="section">
        <SectionHead k="01 · Trabajo" t="Proyectos seleccionados" s="Una muestra de los últimos años — redes, contenido UGC y arte publicitario." />

        <div className="work-list" onMouseLeave={() => setHover(null)}>
          {WORK.map((w, i) => (
            <a
              key={w.id}
              href={"#" + w.id}
              className="work-row"
              onMouseEnter={() => setHover(w.id)}
            >
              <span className="work-num">{String(i + 1).padStart(2, "0")}</span>
              <span className="work-client">{w.client}</span>
              <span className="work-kind">{w.kind}</span>
              <span className="work-tags">
                {w.tags.map(tag => <span key={tag} className="tag">{tag}</span>)}
              </span>
              <span className="work-year">{w.year}</span>
              <span className="work-arrow">↗</span>
            </a>
          ))}

          {hover && (() => {
            const w = WORK.find(x => x.id === hover);
            return (
              <div className="work-preview" key={w.id}>
                <div className="work-preview-card" style={{ background: w.color }}>
                  <img src={w.img} alt={w.client} className="work-preview-img" />
                </div>
              </div>
            );
          })()}
        </div>
      </section>

      {/* ── CASE STUDY — GBS ── */}
      <section id="gbs" className="case">
        <div className="case-tag">Caso destacado</div>
        <div className="case-grid">
          <div className="case-left">
            <div className="case-gallery">
              <div className="case-gallery-main">
                <img src="assets/gbs-luna.png" alt="GBS — Ni la luna es límite" />
              </div>
              <div className="case-gallery-side">
                <img src="assets/gbs-china.png" alt="GBS — Importar desde China" />
                <img src="assets/gbs-importatucarro.png" alt="GBS — Importa tu carro" />
              </div>
            </div>
          </div>
          <div className="case-right">
            <h3 className="case-title">GBS Global Business Solutions</h3>
            <p className="case-kicker">Sistema de redes y arte publicitario para una operadora logística que importa carros y mercancía desde China a Venezuela y Colombia.</p>
            <div className="case-rows">
              <CaseRow l="Rol" v="Dirección creativa, diseño y arte publicitario" />
              <CaseRow l="Año" v="2024 – 2026" />
              <CaseRow l="Entregables" v="Feed mensual, carruseles, vallas, mockups, reels" />
            </div>
            <div className="case-results">
              <Result n="+3×" l="alcance orgánico" />
              <Result n="24 mo" l="cuenta gestionada" />
              <Result n="80+" l="piezas entregadas" />
            </div>
            <a href="#contacto" className="case-link">
              Quiero resultados así <span>→</span>
            </a>
          </div>
        </div>
      </section>

      {/* ── SECONDARY CASES ── */}
      <section className="cases-row">
        <div className="cases-row-item">
          <div className="cases-row-img" style={{ background: "#111" }}>
            <img src="assets/tm-kitrines.png" alt="Tecnomóvil — Kit rines" />
          </div>
          <div className="cases-row-meta">
            <span className="kicker">Tecnomóvil · Soprém</span>
            <h4>Catálogo + UGC para una tienda de tecnología en Caracas y San Cristóbal.</h4>
            <p>Diseño de catálogos de producto, plantillas de promo y reels en cámara presentando lanzamientos.</p>
          </div>
        </div>
        <div className="cases-row-item cases-row-item-flip">
          <div className="cases-row-img" style={{ background: "#0e2a55" }}>
            <img src="assets/delta2-servicios.png" alt="Delta2 Estudios — Servicios" />
          </div>
          <div className="cases-row-meta">
            <span className="kicker">Delta2 Estudios</span>
            <h4>Identidad y redes para una constructora en Sagunto, Valencia.</h4>
            <p>Sistema visual con doble paleta (azul + naranja), aplicaciones en feed, mockups y plantillas para anuncios de empleo.</p>
          </div>
        </div>
      </section>

      {/* ── UGC SHOWCASE ── */}
      <section className="ugc">
        <SectionHead k="02 · UGC" t="También salgo en cámara." s="Contenido UGC en español para marcas de tecnología, accesorios y logística." />
        <div className="ugc-grid">
          <img src="assets/tm-ugc-cajas.jpg" alt="UGC Tecnomóvil — Cajas" />
          <img src="assets/tm-ugc-gamers.jpg" alt="UGC Tecnomóvil — Gamers" />
          <img src="assets/tm-ugc-billetes.jpg" alt="UGC Tecnomóvil — Billetes" />
          <img src="assets/tm-ugc-atencion.jpg" alt="UGC Tecnomóvil — Atención" />
          <img src="assets/tm-popsockets.jpg" alt="UGC Tecnomóvil — Popsockets" />
          <img src="assets/tm-tienda.jpg" alt="UGC Tecnomóvil — Tienda" />
        </div>
        <p className="ugc-foot">↳ Reels para <strong>@tecnomovil</strong> y <strong>@globalbusiness_gbs</strong> · presentación de producto, unboxings, tutoriales.</p>
      </section>

      {/* ── SERVICES ── */}
      <section id="servicios" className="section">
        <SectionHead k="03 · Servicios" t="Qué hacemos" s="Cuatro caminos para que tu marca se vea, se recuerde y se venda mejor." />
        <div className="services">
          {SERVICES.map(s => (
            <article key={s.n} className="service">
              <div className="service-top">
                <span className="service-n">{s.n}</span>
                <div className="service-tags">
                  {s.tags.map(tag => <span key={tag} className="chip">{tag}</span>)}
                </div>
              </div>
              <h3 className="service-t">{s.t}</h3>
              <p className="service-d">{s.d}</p>
              <span className="service-arrow">→</span>
            </article>
          ))}
        </div>
      </section>

      {/* ── ABOUT ── */}
      <section id="sobre-mi" className="about">
        <div className="about-grid">
          <div className="about-photo">
            <div className="about-photo-frame">
              <img src="assets/dubimar-photo.jpg" alt="Dubimar Mujica" />
            </div>
            <div className="about-photo-cap">
              <span>↳ Dubimar, Madrid</span>
              <span>2025</span>
            </div>
          </div>
          <div className="about-text">
            <span className="kicker">04 · Sobre el estudio</span>
            <h2 className="about-title">
              Diseño con criterio.<br />
              Resultados medibles.<br />
              <em>Entrega garantizada.</em>
            </h2>
            <p>
              Soy <strong>Dubimar Mujica</strong>, directora creativa con seis años construyendo marcas en redes sociales para clientes en Venezuela y España — logística, tecnología, construcción. Mi forma de trabajar combina estrategia (entender el negocio, la audiencia, lo que convierte) con un criterio visual sólido y ejecutable.
            </p>
            <p>
              Además de diseñadora soy creadora de contenido UGC: grabo en cámara, sé exactamente cómo se ven los sistemas que diseño cuando llegan a Instagram o TikTok. No entrego piezas sueltas — entrego sistemas que funcionan.
            </p>
            <ul className="about-skills">
              <li><span>Diseño para redes (feed, carruseles, stories)</span></li>
              <li><span>Contenido UGC (reels, TikToks, presentación en cámara)</span></li>
              <li><span>Arte publicitario y mockups</span></li>
              <li><span>Identidad visual y branding</span></li>
              <li><span>Dirección creativa de campañas</span></li>
            </ul>
          </div>
        </div>
      </section>

      {/* ── TESTIMONIALS ── */}
      <section className="quotes">
        <span className="quotes-glyph">"</span>
        <div className="quotes-stage">
          {TESTIMONIALS.map((q, i) => (
            <blockquote key={i} className={"quote" + (i === tIdx ? " quote-on" : "")}>
              <p>{q.q}</p>
              <footer>
                <strong>{q.who}</strong>
                <span>{q.role}</span>
              </footer>
            </blockquote>
          ))}
        </div>
        <div className="quotes-dots">
          {TESTIMONIALS.map((_, i) => (
            <button key={i} className={"dot" + (i === tIdx ? " dot-on" : "")} onClick={() => setTIdx(i)} aria-label={"Testimonio " + (i + 1)} />
          ))}
        </div>
      </section>

      {/* ── PROCESS ── */}
      <section id="proceso" className="section">
        <SectionHead k="05 · Proceso" t="Cómo trabajamos juntos" s="Cuatro pasos claros, sin sorpresas ni letra chica." />
        <div className="process">
          {PROCESS.map((s, i) => (
            <div key={s.n} className="process-step">
              <span className="process-n">{s.n}</span>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              {i < PROCESS.length - 1 && <span className="process-line" />}
            </div>
          ))}
        </div>
      </section>

      {/* ── CTA ── */}
      <section id="contacto" className="cta">
        <div className="cta-inner">
          <span className="kicker kicker-light">06 · Contacto</span>
          <h2 className="cta-title">
            ¿Tu marca lista para el <em>siguiente nivel</em>?
          </h2>
          <p className="cta-sub">
            Agenda una consulta estratégica de 15 min. Sin compromiso.
            Respondemos con un plan concreto en menos de 24 horas.
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="mailto:hola@dubimar.com">
              Iniciar proyecto
              <span>→</span>
            </a>
            <a className="btn btn-ghost" href="#">
              Agendar consulta · 15 min
            </a>
          </div>
          <div className="cta-socials">
            <a href="#">Instagram <span>↗</span></a>
            <a href="#">TikTok <span>↗</span></a>
            <a href="#">Behance <span>↗</span></a>
            <a href="#">LinkedIn <span>↗</span></a>
          </div>
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="foot">
        <div className="foot-left">
          <div className="foot-big">Dubimar<br/>Mujica<span className="foot-dot">.</span></div>
          <span className="foot-studio">Estudio Creativo</span>
        </div>
        <div className="foot-cols">
          <div>
            <span className="foot-h">Estudio</span>
            <p>Venezuela / España</p>
            <p>Remoto · LATAM, US, EU</p>
          </div>
          <div>
            <span className="foot-h">Sígueme</span>
            <p>@dubimar_m</p>
            <p>behance.net/dubimar</p>
          </div>
          <div>
            <span className="foot-h">Legal</span>
            <p>© 2026 Dubimar Mujica</p>
            <p>Todos los derechos reservados</p>
          </div>
        </div>
      </footer>

      {/* ── TWEAKS ── */}
      {tweaksOpen && (
        <TweaksPanel title="Tweaks" onClose={() => setTweaksOpen(false)}>
          <TweakSection label="Paleta">
            <TweakColor
              value={t.palette}
              onChange={(v) => setTweak("palette", v)}
              options={[
                ["#0a0a0f", "#d4ff3a", "#f4f4f5"],
                ["#1a0a1f", "#ff3da8", "#fef6ff"],
                ["#f1ece1", "#161412", "#e85a2c"],
                ["#0f0e0d", "#f3eee3", "#ff6a3d"],
              ]}
              labels={["Electric", "Magenta", "Cream", "Noir"]}
              keys={["electric", "magenta", "cream", "noir"]}
            />
          </TweakSection>
          <TweakSection label="Tipografía">
            <TweakRadio
              value={t.fonts}
              onChange={(v) => setTweak("fonts", v)}
              options={[
                { value: "editorial", label: "Editorial" },
                { value: "modern",    label: "Moderna" },
                { value: "classic",   label: "Clásica" },
              ]}
            />
          </TweakSection>
          <TweakSection label="Layout">
            <TweakToggle label="Mostrar grid base" value={t.showGrid} onChange={(v) => setTweak("showGrid", v)} />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

/* ───────────────────────── SUB-COMPONENTS ───────────────────────── */
function SectionHead({ k, t, s }) {
  return (
    <header className="sec-head">
      <span className="kicker">{k}</span>
      <h2 className="sec-t">{t}</h2>
      <p className="sec-s">{s}</p>
    </header>
  );
}

function CaseRow({ l, v }) {
  return (
    <div className="case-row">
      <span>{l}</span>
      <span>{v}</span>
    </div>
  );
}

function Result({ n, l }) {
  return (
    <div className="result">
      <span className="result-n">{n}</span>
      <span className="result-l">{l}</span>
    </div>
  );
}

function Grid() {
  return (
    <div className="grid-overlay" aria-hidden>
      {Array.from({ length: 12 }).map((_, i) => <span key={i} />)}
    </div>
  );
}

/* Custom TweakColor with palette swatches + labels */
function TweakColor({ value, onChange, options, labels, keys }) {
  return (
    <div className="tw-palette">
      {options.map((pal, i) => (
        <button
          key={keys[i]}
          className={"tw-pal" + (value === keys[i] ? " tw-pal-on" : "")}
          onClick={() => onChange(keys[i])}
        >
          <span className="tw-pal-swatches">
            {pal.map((c, j) => <span key={j} style={{ background: c }} />)}
          </span>
          <span className="tw-pal-label">{labels[i]}</span>
        </button>
      ))}
    </div>
  );
}

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