/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// EinLab — Editorial Light · paleta papel/tinta/spark/ember
// ============================================================
const INK = "#0E0E0C";
const INK2 = "#2A2A26";
const INK3 = "#5A5A52";
const PAPER = "#F5F2EB";
const PAPER2 = "#ECE7DC";
const BONE = "#FAF8F3";
const SPARK = "#4D7CFF";
const EMBER = "#E8654A";

const CONTACT_MAILTO = "mailto:jose.m.robles7@gmail.com?subject=Quiero%20mi%20web";

const Icon = ({ name, size = 20, strokeWidth = 1.6, style }) => {
  const ref = useRef(null);
  useEffect(() => {
    if (window.lucide && ref.current) {
      ref.current.innerHTML = `<i data-lucide="${name}"></i>`;
      window.lucide.createIcons({ attrs: { width: size, height: size, "stroke-width": strokeWidth } });
    }
  }, [name, size, strokeWidth]);
  return <span ref={ref} style={{ display: "inline-flex", ...style }} />;
};

const useIsMobile = (breakpoint = 768) => {
  const [isMobile, setIsMobile] = useState(typeof window !== "undefined" ? window.innerWidth <= breakpoint : false);
  useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth <= breakpoint);
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, [breakpoint]);
  return isMobile;
};

// Reveal: solo fade + subida corta. Nunca se solapa.
const Reveal = ({ children, delay = 0, style: extra = {} }) => {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    if (el.getBoundingClientRect().top < window.innerHeight + 40) { setOn(true); return; }
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setOn(true); obs.disconnect(); }
    }, { rootMargin: "0px 0px -30px 0px" });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return (
    <div ref={ref} style={{
      opacity: on ? 1 : 0,
      transform: on ? "none" : "translateY(28px)",
      transition: `opacity 700ms cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 700ms cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
      ...extra,
    }}>{children}</div>
  );
};

const Tag = ({ children, color = INK3 }) => (
  <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.14em", color }}>{children}</span>
);

const LogoMark = ({ size = 24, color = INK }) => (
  <svg viewBox="0 0 268 56" fill="none" style={{ height: size, width: "auto" }}>
    <g transform="translate(0,8)">
      <rect x="0" y="0" width="40" height="6" rx="1.5" fill={color}/>
      <rect x="0" y="14" width="28" height="6" rx="1.5" fill={color}/>
      <rect x="0" y="28" width="40" height="6" rx="1.5" fill={color}/>
      <circle cx="46" cy="17" r="3" fill={EMBER}/>
    </g>
    <text x="60" y="38" fontFamily="Geist, system-ui, sans-serif" fontSize="32" fontWeight="600" letterSpacing="-1.4" fill={color}>EinLab</text>
    <text x="170" y="38" fontFamily="'Instrument Serif', serif" fontStyle="italic" fontSize="32" fill={EMBER}>AI</text>
  </svg>
);

// ============================================================
// Header
// ============================================================
const Header = ({ lang, onToggleLang }) => {
  const isMobile = useIsMobile();
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 16);
    window.addEventListener("scroll", h, { passive: true });
    return () => window.removeEventListener("scroll", h);
  }, []);
  const links = [
    { href: "#servicios", label: lang === "es" ? "servicios" : "services" },
    { href: "#proceso",   label: lang === "es" ? "proceso" : "process" },
    { href: "#proyectos", label: lang === "es" ? "proyectos" : "projects" },
    { href: "#oferta",    label: lang === "es" ? "oferta" : "offer" },
  ];
  return (
    <header style={{ position: "fixed", top: 0, left: 0, right: 0, zIndex: 90, background: scrolled || open ? "rgba(245,242,235,0.94)" : "transparent", backdropFilter: scrolled || open ? "blur(14px)" : "none", WebkitBackdropFilter: scrolled || open ? "blur(14px)" : "none", borderBottom: scrolled || open ? `1px solid ${INK}14` : "1px solid transparent", transition: "all 260ms ease" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 20px", height: 62, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <a href="#top" style={{ display: "inline-flex" }}><LogoMark size={22} /></a>
        {isMobile ? (
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <a href={CONTACT_MAILTO} className="cta-ember" style={{ fontSize: 13, padding: "8px 14px" }}>{lang === "es" ? "hablemos" : "let's talk"}</a>
            <button onClick={() => setOpen(o => !o)} aria-label="menu" style={{ background: "none", border: `1px solid ${INK}22`, borderRadius: 8, padding: "7px 10px", color: INK, cursor: "pointer" }}>
              <Icon name={open ? "x" : "menu"} size={18} />
            </button>
          </div>
        ) : (
          <>
            <nav style={{ display: "flex", gap: 30 }}>
              {links.map(l => <a key={l.href} href={l.href} className="nav-link">{l.label}</a>)}
            </nav>
            <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
              <button onClick={onToggleLang} className="lang-pill">{lang === "es" ? "es / en" : "en / es"}</button>
              <a href={CONTACT_MAILTO} className="cta-ember">{lang === "es" ? "hablemos" : "let's talk"} <Icon name="arrow-right" size={14} /></a>
            </div>
          </>
        )}
      </div>
      {isMobile && open && (
        <div style={{ padding: "10px 20px 22px", display: "flex", flexDirection: "column" }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{ fontFamily: "var(--font-serif)", fontSize: 30, fontStyle: "italic", color: INK, padding: "10px 0", borderBottom: `1px solid ${INK}10` }}>{l.label}</a>
          ))}
          <button onClick={() => { onToggleLang(); setOpen(false); }} className="lang-pill" style={{ marginTop: 16, alignSelf: "flex-start" }}>{lang === "es" ? "es / en" : "en / es"}</button>
        </div>
      )}
    </header>
  );
};

// ============================================================
// Hero — editorial, serif gigante, subrayado a mano
// ============================================================
const Hero = ({ lang }) => {
  const isMobile = useIsMobile();
  const [go, setGo] = useState(false);
  useEffect(() => { const t = setTimeout(() => setGo(true), 80); return () => clearTimeout(t); }, []);

  const line = (visible, d) => ({
    display: "block",
    opacity: visible ? 1 : 0,
    transform: visible ? "none" : "translateY(34px)",
    transition: `opacity 800ms cubic-bezier(0.16,1,0.3,1) ${d}ms, transform 800ms cubic-bezier(0.16,1,0.3,1) ${d}ms`,
  });

  return (
    <section id="top" style={{ position: "relative", padding: isMobile ? "128px 20px 40px" : "170px 24px 60px", overflow: "hidden" }}>
      {/* mancha de color de fondo, estática */}
      <div style={{ position: "absolute", top: isMobile ? -80 : -140, right: isMobile ? -120 : -60, width: isMobile ? 320 : 520, height: isMobile ? 320 : 520, borderRadius: "50%", background: `radial-gradient(circle, ${SPARK}26, transparent 65%)`, filter: "blur(10px)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", bottom: -100, left: isMobile ? -140 : -80, width: 380, height: 380, borderRadius: "50%", background: `radial-gradient(circle, ${EMBER}1E, transparent 65%)`, pointerEvents: "none" }} />

      <div style={{ maxWidth: 1240, margin: "0 auto", position: "relative" }}>
        <div style={line(go, 0)}>
          <Tag color={EMBER}>EinLab · {lang === "es" ? "agencia de tecnología para negocios locales" : "technology agency for local businesses"}</Tag>
        </div>

        <h1 style={{ margin: isMobile ? "18px 0 26px" : "26px 0 34px", fontWeight: 400, color: INK, fontSize: isMobile ? "clamp(46px, 13.5vw, 78px)" : "clamp(64px, 8.6vw, 128px)", lineHeight: 1.02, letterSpacing: "-0.03em" }}>
          <span style={line(go, 120)}>{lang === "es" ? "tu negocio," : "your business,"}</span>
          <span style={line(go, 260)}>
            <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic" }}>online</span>{" "}
            {lang === "es" ? "y en" : "and on"}
          </span>
          <span style={{ ...line(go, 400), position: "relative", width: "fit-content" }}>
            <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: EMBER }}>
              {lang === "es" ? "piloto automático." : "autopilot."}
            </span>
            <svg viewBox="0 0 300 14" preserveAspectRatio="none" style={{ position: "absolute", left: 0, bottom: isMobile ? -6 : -12, width: "100%", height: isMobile ? 8 : 14, overflow: "visible" }}>
              <path d="M4 10 C 60 2, 150 12, 296 5" stroke={EMBER} strokeWidth="3" fill="none" strokeLinecap="round"
                strokeDasharray="320" strokeDashoffset={go ? 0 : 320}
                style={{ transition: "stroke-dashoffset 900ms ease 900ms" }} />
            </svg>
          </span>
        </h1>

        <div style={{ ...line(go, 560), display: "flex", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 26 : 60, alignItems: isMobile ? "flex-start" : "flex-end", justifyContent: "space-between" }}>
          <p style={{ fontSize: isMobile ? 17 : 20, lineHeight: 1.55, color: INK2, maxWidth: 520, margin: 0 }}>
            {lang === "es"
              ? "Diseñamos tu sitio web y ponemos la IA a trabajar en lo repetitivo: mensajes, llamadas, agenda y redes sociales."
              : "We design your website and put AI to work on the repetitive stuff: messages, calls, scheduling and social media."}
          </p>
          <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", gap: 12, width: isMobile ? "100%" : "auto", flexShrink: 0 }}>
            <a href={CONTACT_MAILTO} className="cta-ink">{lang === "es" ? "quiero mi web" : "get my website"} <Icon name="arrow-right" size={16} /></a>
            <a href="#proyectos" className="cta-ghost">{lang === "es" ? "ver proyectos" : "see projects"}</a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Marquee — cinta continua, no bloquea nada
// ============================================================
const Marquee = ({ lang }) => {
  const items = lang === "es"
    ? ["sitios web", "chatbots ia", "agentes de voz", "apps a medida", "automatización", "redes sociales"]
    : ["websites", "ai chatbots", "voice agents", "custom apps", "automation", "social media"];
  const row = items.map((t, i) => (
    <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 26, marginRight: 26 }}>
      <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 24 }}>{t}</span>
      <span style={{ width: 7, height: 7, borderRadius: "50%", background: EMBER, display: "inline-block" }} />
    </span>
  ));
  return (
    <div style={{ borderTop: `1px solid ${INK}18`, borderBottom: `1px solid ${INK}18`, padding: "18px 0", overflow: "hidden", whiteSpace: "nowrap", color: INK }}>
      <div className="marquee-track" style={{ display: "inline-block" }}>
        <span>{row}</span><span>{row}</span><span>{row}</span>
      </div>
    </div>
  );
};

// ============================================================
// Servicios — filas editoriales numeradas (cero cajas)
// ============================================================
const Services = ({ lang }) => {
  const isMobile = useIsMobile();
  const [openIdx, setOpenIdx] = useState(0);
  const services = lang === "es" ? [
    { title: "sitio web profesional",  desc: "Diseño a medida con SEO básico, pensado para que te encuentren en Google y te escriban. El primero va por cuenta nuestra.", icon: "globe", accent: SPARK },
    { title: "chatbots con IA",        desc: "Un asistente que responde en tu web y WhatsApp las 24 horas: precios, horarios, reservas.", icon: "message-circle", accent: EMBER },
    { title: "agentes de voz IA",      desc: "Contesta y hace llamadas por ti, en español o inglés, y agenda directo en tu calendario.", icon: "phone-call", accent: SPARK },
    { title: "aplicaciones a medida",  desc: "Software propio para tu operación: agenda, cotizaciones, inventario, lo que tu negocio necesite.", icon: "app-window", accent: EMBER },
    { title: "automatización de procesos", desc: "Lo repetitivo — copiar datos, enviar recordatorios, armar reportes — corriendo solo.", icon: "workflow", accent: SPARK },
    { title: "automatización de redes", desc: "Publicaciones, historias y respuestas en tus redes sociales, en piloto automático.", icon: "share-2", accent: EMBER },
  ] : [
    { title: "professional website",   desc: "Custom design with basic SEO, built so customers find you on Google and reach out. The first one is on us.", icon: "globe", accent: SPARK },
    { title: "AI chatbots",            desc: "An assistant answering on your site and WhatsApp 24/7: pricing, hours, bookings.", icon: "message-circle", accent: EMBER },
    { title: "AI voice agents",        desc: "Answers and makes calls for you, in English or Spanish, booking straight into your calendar.", icon: "phone-call", accent: SPARK },
    { title: "custom applications",    desc: "Your own software: scheduling, quotes, inventory — whatever your operation needs.", icon: "app-window", accent: EMBER },
    { title: "process automation",     desc: "The repetitive work — copying data, sending reminders, building reports — running on its own.", icon: "workflow", accent: SPARK },
    { title: "social media automation", desc: "Posts, stories and replies on your social accounts, on autopilot.", icon: "share-2", accent: EMBER },
  ];
  return (
    <section id="servicios" style={{ padding: isMobile ? "76px 20px" : "130px 24px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 10, marginBottom: isMobile ? 30 : 50 }}>
            <h2 style={{ fontSize: isMobile ? "clamp(34px, 10vw, 52px)" : "clamp(44px, 5.4vw, 72px)", fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1, margin: 0, color: INK }}>
              {lang === "es" ? (<>qué <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: SPARK }}>hacemos</span></>) : (<>what we <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: SPARK }}>do</span></>)}
            </h2>
            <Tag>{lang === "es" ? "seis servicios · un solo equipo" : "six services · one team"}</Tag>
          </div>
        </Reveal>
        <div style={{ borderTop: `1px solid ${INK}1C` }}>
          {services.map((s, i) => {
            const open = openIdx === i;
            return (
              <Reveal key={s.title} delay={i * 60}>
                <div
                  onClick={() => setOpenIdx(open ? -1 : i)}
                  onMouseEnter={() => !isMobile && setOpenIdx(i)}
                  style={{ borderBottom: `1px solid ${INK}1C`, cursor: "pointer", padding: isMobile ? "20px 4px" : "26px 12px", display: "grid", gridTemplateColumns: isMobile ? "auto 1fr auto" : "80px 1fr 90px", alignItems: "start", columnGap: isMobile ? 14 : 24, background: open ? BONE : "transparent", transition: "background 300ms" }}>
                  <span style={{ fontFamily: "var(--font-mono)", fontSize: isMobile ? 12 : 14, color: open ? s.accent : INK3, paddingTop: 6, transition: "color 300ms" }}>0{i + 1}</span>
                  <div>
                    <h3 style={{ margin: 0, fontWeight: 400, color: INK, fontSize: isMobile ? "clamp(22px, 6.4vw, 30px)" : "clamp(28px, 3vw, 44px)", letterSpacing: "-0.025em", lineHeight: 1.1, fontFamily: open ? "var(--font-serif)" : "var(--font-sans)", fontStyle: open ? "italic" : "normal", transition: "color 300ms" }}>
                      {s.title}
                    </h3>
                    <div style={{ maxHeight: open ? 130 : 0, overflow: "hidden", transition: "max-height 420ms cubic-bezier(0.22,1,0.36,1)" }}>
                      <p style={{ margin: "10px 0 2px", fontSize: isMobile ? 14.5 : 16, lineHeight: 1.55, color: INK2, maxWidth: 640 }}>{s.desc}</p>
                    </div>
                  </div>
                  <span style={{ justifySelf: "end", paddingTop: 4, color: open ? s.accent : INK3, transform: open ? "rotate(45deg)" : "none", transition: "all 300ms" }}>
                    <Icon name="plus" size={isMobile ? 18 : 22} />
                  </span>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Proceso — riel vertical con línea que conecta, sin pin
// ============================================================
const Process = ({ lang }) => {
  const isMobile = useIsMobile();
  const steps = lang === "es" ? [
    { t: "nos escribes",        d: "Nos cuentas de tu negocio. Sin formularios eternos: un mensaje basta." },
    { t: "te mostramos tu web", d: "En pocos días ves un diseño real con tus fotos y tu información. Si no te gusta, no pasa nada." },
    { t: "la publicamos",       d: "Tu web queda en línea con tu dominio. Tú solo cubres el dominio." },
    { t: "la IA se pone a trabajar", d: "Si quieres más, sumamos chatbot, agente de voz o automatización — a tu ritmo." },
  ] : [
    { t: "you reach out",       d: "Tell us about your business. No endless forms — one message is enough." },
    { t: "we show you your site", d: "In a few days you see a real design with your photos and info. If you don't love it, no harm done." },
    { t: "we publish it",       d: "Your site goes live on your domain. You only cover the domain." },
    { t: "AI gets to work",     d: "Want more? We add a chatbot, voice agent or automation — at your pace." },
  ];
  return (
    <section id="proceso" style={{ background: INK, color: PAPER, padding: isMobile ? "76px 20px" : "130px 24px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.3fr", gap: isMobile ? 44 : 90 }}>
          <div>
            <Reveal><Tag color={`${PAPER}88`}>{lang === "es" ? "el proceso" : "the process"}</Tag></Reveal>
            <Reveal delay={90}>
              <h2 style={{ fontSize: isMobile ? "clamp(36px, 10.5vw, 54px)" : "clamp(44px, 4.6vw, 68px)", fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.04, margin: "18px 0 20px", color: PAPER }}>
                {lang === "es" ? (<>sin reuniones<br /><span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "#8FA8FF" }}>eternas</span>.</>) : (<>no endless<br /><span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: "#8FA8FF" }}>meetings</span>.</>)}
              </h2>
            </Reveal>
            <Reveal delay={180}>
              <p style={{ fontSize: isMobile ? 15.5 : 17, lineHeight: 1.6, color: `${PAPER}B0`, maxWidth: 400, margin: 0 }}>
                {lang === "es"
                  ? "Cuatro pasos, cero vueltas. Ves resultados antes de comprometerte con nada."
                  : "Four steps, zero friction. You see results before committing to anything."}
              </p>
            </Reveal>
            {!isMobile && (
              <Reveal delay={280}>
                <a href={CONTACT_MAILTO} className="cta-paper" style={{ marginTop: 36 }}>{lang === "es" ? "empezar ahora" : "start now"} <Icon name="arrow-right" size={15} /></a>
              </Reveal>
            )}
          </div>
          <div style={{ position: "relative" }}>
            <div style={{ position: "absolute", left: isMobile ? 15 : 19, top: 10, bottom: 10, width: 1, background: `${PAPER}26` }} />
            {steps.map((s, i) => (
              <Reveal key={s.t} delay={i * 110}>
                <div style={{ display: "flex", gap: isMobile ? 20 : 28, padding: isMobile ? "18px 0" : "24px 0", alignItems: "flex-start", position: "relative" }}>
                  <span style={{ width: isMobile ? 32 : 40, height: isMobile ? 32 : 40, borderRadius: "50%", flexShrink: 0, background: i === 3 ? EMBER : INK, border: i === 3 ? `1px solid ${EMBER}` : `1px solid ${PAPER}44`, color: PAPER, display: "grid", placeItems: "center", fontFamily: "var(--font-mono)", fontSize: isMobile ? 12 : 14, position: "relative", zIndex: 1 }}>{i + 1}</span>
                  <div>
                    <h3 style={{ margin: "4px 0 8px", fontSize: isMobile ? 21 : 26, fontWeight: 400, letterSpacing: "-0.02em", color: PAPER, fontFamily: "var(--font-serif)", fontStyle: "italic" }}>{s.t}</h3>
                    <p style={{ margin: 0, fontSize: isMobile ? 14.5 : 15.5, lineHeight: 1.6, color: `${PAPER}A6`, maxWidth: 480 }}>{s.d}</p>
                  </div>
                </div>
              </Reveal>
            ))}
            {isMobile && (
              <Reveal delay={480}>
                <a href={CONTACT_MAILTO} className="cta-paper" style={{ marginTop: 22, width: "100%", justifyContent: "center" }}>{lang === "es" ? "empezar ahora" : "start now"} <Icon name="arrow-right" size={15} /></a>
              </Reveal>
            )}
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Proyectos — índice editorial con banda destacada
// ============================================================
const Projects = ({ lang }) => {
  const isMobile = useIsMobile();
  const feature = { name: "LivinGreen", url: "https://livingreen.life", tag: lang === "es" ? "empresa de limpieza · utah" : "cleaning company · utah",
    desc: lang === "es" ? "Web, app interna con IA y redes sociales en piloto automático para una empresa real que opera todos los días." : "Website, internal AI app and social media on autopilot for a real company operating every day." };
  const rest = [
    { name: "Majo Beauty",      url: "https://mjanailtech-demo.vercel.app",     tag: lang === "es" ? "estudio de uñas · orlando" : "nail studio · orlando", accent: SPARK },
    { name: "Fade & Co.",       url: "https://fadeandco-demo.vercel.app",       tag: lang === "es" ? "barbería · los ángeles" : "barbershop · los angeles", accent: EMBER },
    { name: "Julia Styles",     url: "https://juliastylesphotography.vercel.app", tag: lang === "es" ? "fotografía de bodas · dallas" : "wedding photography · dallas", accent: SPARK },
    { name: "De La Rosa Arte",  url: "https://delarosaarte.com",             tag: lang === "es" ? "portafolio de artista" : "artist portfolio", accent: EMBER },
    { name: "Casa Leyton",      url: "https://casa-leyton.vercel.app",       tag: lang === "es" ? "sitio de contratista" : "contractor site", accent: SPARK },
  ];
  return (
    <section id="proyectos" style={{ padding: isMobile ? "76px 20px" : "130px 24px", background: PAPER2 }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <Reveal>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 10, marginBottom: isMobile ? 30 : 50 }}>
            <h2 style={{ fontSize: isMobile ? "clamp(34px, 10vw, 52px)" : "clamp(44px, 5.4vw, 72px)", fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1, margin: 0, color: INK }}>
              {lang === "es" ? (<>proyectos <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: EMBER }}>reales</span></>) : (<>real <span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: EMBER }}>projects</span></>)}
            </h2>
            <Tag>{lang === "es" ? "todos en producción, ábrelos" : "all in production — open them"}</Tag>
          </div>
        </Reveal>

        {/* banda destacada */}
        <Reveal>
          <a href={feature.url} target="_blank" rel="noopener noreferrer" className="proj-feature">
            <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 14 : 40, alignItems: "center" }}>
              <div>
                <Tag color={`${PAPER}99`}>{feature.tag}</Tag>
                <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: isMobile ? "clamp(38px, 11vw, 54px)" : "clamp(48px, 5vw, 76px)", color: PAPER, lineHeight: 1, margin: "10px 0 0" }}>{feature.name}</div>
              </div>
              <div style={{ display: "flex", alignItems: isMobile ? "flex-start" : "center", gap: 18, justifyContent: "space-between" }}>
                <p style={{ margin: 0, fontSize: isMobile ? 14.5 : 16, lineHeight: 1.6, color: `${PAPER}B4`, maxWidth: 380 }}>{feature.desc}</p>
                <span className="proj-arrow" style={{ background: EMBER, color: PAPER }}><Icon name="arrow-up-right" size={20} /></span>
              </div>
            </div>
          </a>
        </Reveal>

        {/* índice tipo lista */}
        <div style={{ marginTop: 14, borderTop: `1px solid ${INK}1C` }}>
          {rest.map((p, i) => (
            <Reveal key={p.name} delay={i * 60}>
              <a href={p.url} target="_blank" rel="noopener noreferrer" className="proj-row">
                <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: INK3, width: isMobile ? 24 : 60, flexShrink: 0 }}>0{i + 2}</span>
                <span style={{ fontSize: isMobile ? "clamp(20px, 5.8vw, 26px)" : "clamp(24px, 2.6vw, 38px)", letterSpacing: "-0.02em", color: INK, flex: 1, lineHeight: 1.15 }}>{p.name}</span>
                {!isMobile && <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: INK3, textTransform: "uppercase", letterSpacing: "0.08em", marginRight: 20 }}>{p.tag}</span>}
                <span className="proj-arrow" style={{ background: "transparent", border: `1px solid ${INK}26`, color: INK }}><Icon name="arrow-up-right" size={16} /></span>
              </a>
              {isMobile && <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: INK3, textTransform: "uppercase", letterSpacing: "0.08em", margin: "-8px 0 12px 38px" }}>{p.tag}</div>}
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// ============================================================
// Oferta — statement grande, sin precios fijos
// ============================================================
const Offer = ({ lang }) => {
  const isMobile = useIsMobile();
  const bullets = lang === "es"
    ? ["diseño profesional a medida", "SEO básico incluido", "sin obligación de comprar nada más", "tú solo cubres el dominio", "mantención opcional si la necesitas"]
    : ["custom professional design", "basic SEO included", "no obligation to buy anything else", "you only cover the domain", "optional maintenance if you need it"];
  return (
    <section id="oferta" style={{ padding: isMobile ? "76px 20px" : "140px 24px", position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: "20%", left: "50%", transform: "translateX(-50%)", width: 700, height: 700, borderRadius: "50%", background: `radial-gradient(circle, ${EMBER}14, transparent 60%)`, pointerEvents: "none" }} />
      <div style={{ maxWidth: 960, margin: "0 auto", textAlign: "center", position: "relative" }}>
        <Reveal><Tag color={EMBER}>{lang === "es" ? "oferta de lanzamiento · cupos limitados" : "launch offer · limited spots"}</Tag></Reveal>
        <Reveal delay={100}>
          <h2 style={{ fontSize: isMobile ? "clamp(38px, 11.5vw, 60px)" : "clamp(52px, 6.4vw, 92px)", fontWeight: 400, letterSpacing: "-0.03em", lineHeight: 1.04, margin: "22px 0 24px", color: INK }}>
            {lang === "es"
              ? (<>tu primera web va<br /><span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: EMBER }}>por cuenta nuestra</span>.</>)
              : (<>your first website is<br /><span style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", color: EMBER }}>on us</span>.</>)}
          </h2>
        </Reveal>
        <Reveal delay={200}>
          <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.6, color: INK2, maxWidth: 560, margin: "0 auto 30px" }}>
            {lang === "es"
              ? "Estamos lanzando la agencia y armando portafolio: por eso el diseño de tu web no te cuesta nada. Es una oferta por tiempo limitado, no una tarifa — escríbenos y te contamos los detalles."
              : "We're launching the agency and building our portfolio — that's why your website design costs you nothing. It's a limited-time offer, not a fixed rate. Reach out for the details."}
          </p>
        </Reveal>
        <Reveal delay={280}>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 10, justifyContent: "center", marginBottom: 38 }}>
            {bullets.map(b => (
              <span key={b} style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "9px 16px", borderRadius: 999, border: `1px solid ${INK}22`, background: BONE, fontSize: isMobile ? 13 : 14, color: INK2 }}>
                <Icon name="check" size={13} strokeWidth={2.4} style={{ color: EMBER }} /> {b}
              </span>
            ))}
          </div>
        </Reveal>
        <Reveal delay={360}>
          <a href={CONTACT_MAILTO} className="cta-ink" style={{ fontSize: isMobile ? 16 : 17, padding: isMobile ? "16px 26px" : "18px 34px", width: isMobile ? "100%" : "auto", justifyContent: "center" }}>
            {lang === "es" ? "quiero mi web" : "get my website"} <Icon name="arrow-right" size={17} />
          </a>
        </Reveal>
        <Reveal delay={430}>
          <p style={{ marginTop: 18, fontFamily: "var(--font-mono)", fontSize: 12, color: INK3, textTransform: "uppercase", letterSpacing: "0.1em" }}>
            {lang === "es" ? "¿automatización o IA a medida? también — hablemos." : "custom automation or AI? we do that too — let's talk."}
          </p>
        </Reveal>
      </div>
    </section>
  );
};

// ============================================================
// Footer
// ============================================================
const Footer = ({ lang }) => {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: INK, color: PAPER, padding: isMobile ? "56px 20px 30px" : "80px 24px 36px" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto" }}>
        <div style={{ display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", gap: 34, marginBottom: 48 }}>
          <div>
            <LogoMark size={24} color={PAPER} />
            <p style={{ marginTop: 14, fontSize: 13.5, lineHeight: 1.6, color: `${PAPER}8C`, maxWidth: 300 }}>
              {lang === "es" ? "EinLab SpA — constituida en Chile, atendemos negocios en EE.UU. de forma remota." : "EinLab SpA — incorporated in Chile, serving U.S. businesses remotely."}
            </p>
          </div>
          <div style={{ display: "flex", gap: isMobile ? 40 : 80, flexWrap: "wrap" }}>
            <div>
              <Tag color={`${PAPER}66`}>{lang === "es" ? "secciones" : "sections"}</Tag>
              <ul style={{ listStyle: "none", margin: "14px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                {[["#servicios", lang === "es" ? "servicios" : "services"], ["#proceso", lang === "es" ? "proceso" : "process"], ["#proyectos", lang === "es" ? "proyectos" : "projects"], ["#oferta", lang === "es" ? "oferta" : "offer"]].map(([h, l]) => (
                  <li key={h}><a href={h} style={{ color: `${PAPER}B4`, fontSize: 14 }}>{l}</a></li>
                ))}
              </ul>
            </div>
            <div>
              <Tag color={`${PAPER}66`}>{lang === "es" ? "contacto" : "contact"}</Tag>
              <ul style={{ listStyle: "none", margin: "14px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 9 }}>
                <li><a href={CONTACT_MAILTO} style={{ color: `${PAPER}B4`, fontSize: 14 }}>jose.m.robles7@gmail.com</a></li>
                <li><span style={{ color: `${PAPER}66`, fontSize: 14 }}>Utah, US · Santiago, CL</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div style={{ borderTop: `1px solid ${PAPER}1E`, paddingTop: 18, display: "flex", flexDirection: isMobile ? "column" : "row", justifyContent: "space-between", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: `${PAPER}5C` }}>© EinLab SpA 2026</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: `${PAPER}5C`, display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: EMBER, display: "inline-block" }} className="pulse" />
            {lang === "es" ? "disponible ahora" : "available now"}
          </span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Header, Hero, Marquee, Services, Process, Projects, Offer, Footer });