// Tu Software Hoy — landing
const { useState, useEffect, useRef, useMemo } = React;

// ----------------------------- helpers -----------------------------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll("[data-reveal]");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("is-in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -40px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

function GlowCard({ children, className = "", style }) {
  const ref = useRef(null);
  const onMove = (e) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    el.style.setProperty("--mx", `${e.clientX - r.left}px`);
    el.style.setProperty("--my", `${e.clientY - r.top}px`);
  };
  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      className={`glow-card ${className}`}
      style={style}
    >
      {children}
    </div>
  );
}

// Subtly-striped SVG placeholder (no faked human imagery)
function Placeholder({ label = "team / workspace", aspect = "16/10", tone = "purple" }) {
  const id = useMemo(() => `ph-${Math.random().toString(36).slice(2, 8)}`, []);
  const stripeColor = "rgba(255,255,255,0.04)";
  const accent =
    tone === "orange"
      ? "oklch(0.72 0.19 45 / 0.18)"
      : tone === "mix"
      ? "oklch(0.7 0.2 320 / 0.16)"
      : "oklch(0.65 0.22 295 / 0.18)";
  return (
    <div
      className="placeholder"
      style={{ aspectRatio: aspect }}
      role="img"
      aria-label={label}
    >
      <svg width="100%" height="100%" preserveAspectRatio="none">
        <defs>
          <pattern id={id} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <line x1="0" y1="0" x2="0" y2="14" stroke={stripeColor} strokeWidth="6" />
          </pattern>
          <radialGradient id={`${id}-g`} cx="30%" cy="20%" r="80%">
            <stop offset="0%" stopColor={accent} />
            <stop offset="100%" stopColor="transparent" />
          </radialGradient>
        </defs>
        <rect width="100%" height="100%" fill="#0c0c16" />
        <rect width="100%" height="100%" fill={`url(#${id})`} />
        <rect width="100%" height="100%" fill={`url(#${id}-g)`} />
      </svg>
      <span className="placeholder__label">{label}</span>
      <span className="placeholder__corner">PLACEHOLDER</span>
    </div>
  );
}

// ----------------------------- chrome -----------------------------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [openServices, setOpenServices] = useState(false);
  const closeT = useRef();
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const enter = () => { clearTimeout(closeT.current); setOpenServices(true); };
  const leave = () => { closeT.current = setTimeout(() => setOpenServices(false), 120); };

  const services = [
    { h: "#web", t: "Webs & Landings", d: "Sitios que convierten visitas en clientes", tone: "purple" },
    { h: "#ecom", t: "Ecommerce", d: "Tiendas que venden 24/7", tone: "orange" },
    { h: "#auto", t: "Automatizaciones & IA", d: "Menos trabajo manual, más eficiencia", tone: "purple" },
  ];

  return (
    <header className={`nav ${scrolled ? "nav--scrolled" : ""}`}>
      <div className="nav__inner">
        <a href="#top" className="brand" aria-label="Tu Software Hoy">
          <span className="brand__mark" aria-hidden="true">
            <span className="brand__dot brand__dot--p" />
            <span className="brand__dot brand__dot--o" />
          </span>
          <span className="brand__name">
            tu software <span className="brand__accent">hoy</span>
          </span>
        </a>
        <nav className="nav__links" aria-label="Principal">
          <div className="nav__dd" onMouseEnter={enter} onMouseLeave={leave}>
            <button className={`nav__dd-btn ${openServices ? "is-open" : ""}`} aria-haspopup="true" aria-expanded={openServices}>
              Servicios
              <svg width="10" height="10" viewBox="0 0 10 10" aria-hidden="true"><path d="M2 4l3 3 3-3" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
            <div className={`nav__dd-panel ${openServices ? "is-open" : ""}`}>
              {services.map((s) => (
                <a key={s.h} href={s.h} className="nav__dd-item" onClick={() => setOpenServices(false)}>
                  <span className={`nav__dd-dot nav__dd-dot--${s.tone}`} aria-hidden="true" />
                  <div>
                    <div className="nav__dd-t">{s.t}</div>
                    <div className="nav__dd-d">{s.d}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
          <a href="#proceso">Proceso</a>
          <a href="#resultados">Resultados</a>
          <a href="#testimonios">Casos</a>
          <a href="#contacto">Contacto</a>
        </nav>
        <div className="nav__cta">
          <a href="#contacto" className="btn btn--primary btn--sm">Hablemos</a>
        </div>
      </div>
    </header>
  );
}

// ----------------------------- hero -----------------------------
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="hero__bg" aria-hidden="true">
        <div className="hero__grid" />
        <div className="hero__glow hero__glow--p" />
        <div className="hero__glow hero__glow--o" />
      </div>

      <div className="container hero__inner">
        <a className="eyebrow" href="#servicios" data-reveal>
          <span className="eyebrow__pill">Nuevo</span>
          <span>Automatizaciones con IA para tu negocio</span>
          <span className="eyebrow__arrow" aria-hidden="true">→</span>
        </a>

        <h1 className="hero__title" data-reveal>
          Transformamos ideas en <em>software</em>
          <br />que hace crecer negocios.
        </h1>

        <p className="hero__sub" data-reveal>
          Webs, ecommerce y automatizaciones pensadas para escalar.
          Equipo de producto a medida — sin agencias lentas, sin freelancers que desaparecen.
        </p>

        <div className="hero__ctas" data-reveal>
          <a href="#contacto" className="btn btn--primary btn--lg">
            Hablemos de tu proyecto
            <span className="btn__arrow">→</span>
          </a>
          <a href="#agenda" className="btn btn--secondary btn--lg">
            <span className="btn__cal" aria-hidden="true">
              <span className="btn__cal-dot" />
            </span>
            Agendá una llamada
          </a>
        </div>

        <div className="hero__meta" data-reveal>
          <span><strong>+30</strong> proyectos lanzados</span>
          <span className="dot" aria-hidden="true">•</span>
          <span>Equipo en Argentina</span>
          <span className="dot" aria-hidden="true">•</span>
          <span>Respuesta en <strong>menos de 24h</strong></span>
        </div>

        <div className="hero__visual" data-reveal>
          <div className="hero__visual-frame">
            <div className="hero__visual-chrome">
              <span className="dot dot--r" /><span className="dot dot--y" /><span className="dot dot--g" />
              <span className="hero__visual-url">tusoftwarehoy.com / equipo</span>
            </div>
            <Placeholder label="equipo trabajando — fotografía real" aspect="16/8" tone="mix" />
          </div>
          <div className="hero__visual-tag hero__visual-tag--p">
            <span className="hero__visual-tag-k">conversión</span>
            <span className="hero__visual-tag-v">+41%</span>
          </div>
          <div className="hero__visual-tag hero__visual-tag--o">
            <span className="hero__visual-tag-k">tiempo manual</span>
            <span className="hero__visual-tag-v">−63%</span>
          </div>
        </div>

        <div className="trustbar" data-reveal>
          <span className="trustbar__label">Confían en nosotros</span>
          <ul className="trustbar__logos">
            {["Norvik", "Pampa Co.", "Lumen/AR", "Tienda 21", "Helia", "Ruta 9"].map((n) => (
              <li key={n}>{n}</li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

// ----------------------------- problem -----------------------------
function Problem() {
  const pains = [
    {
      k: "01",
      t: "Procesos manuales que te comen el día",
      d: "Planillas, copy-paste, recordatorios por WhatsApp. Tu equipo es bueno — pero está atrapado haciendo lo que una automatización resuelve en segundos.",
    },
    {
      k: "02",
      t: "Una web que no convierte",
      d: "Tenés tráfico, pero los usuarios no compran ni dejan datos. El problema casi nunca es el producto: es el flujo.",
    },
    {
      k: "03",
      t: "Pérdida de tiempo y oportunidades",
      d: "Sabés exactamente qué necesitás, pero las cotizaciones tardan semanas y los desarrollos meses. Mientras tanto, tu competencia despega.",
    },
  ];
  return (
    <section className="problem section">
      <div className="container">
        <div className="section__head" data-reveal>
          <span className="kicker kicker--p">El problema</span>
          <h2 className="section__title">
            Si reconocés algo de esto,<br />no estás solo.
          </h2>
        </div>

        <div className="problem__grid">
          {pains.map((p, i) => (
            <div key={p.k} className="problem__item" data-reveal style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="problem__num">{p.k}</div>
              <h3 className="problem__t">{p.t}</h3>
              <p className="problem__d">{p.d}</p>
            </div>
          ))}
        </div>

        <p className="problem__punchline" data-reveal>
          Entonces tenés un problema de <em>software</em>,
          <br />no de <s>esfuerzo</s>.
        </p>
      </div>
    </section>
  );
}

// ----------------------------- solution -----------------------------
function Solution() {
  return (
    <section className="solution section">
      <div className="container solution__inner">
        <div className="solution__copy" data-reveal>
          <span className="kicker kicker--o">La solución</span>
          <h2 className="section__title">
            En <span className="brand-inline">Tu Software Hoy</span> creamos soluciones digitales a medida para que tu negocio crezca sin fricción.
          </h2>
          <p className="solution__lede">
            Diseñamos, desarrollamos y lanzamos. Vos te enfocás en el negocio,
            nosotros nos encargamos del software.
          </p>
          <ul className="solution__bullets">
            <li><span className="check" aria-hidden="true">✓</span> Equipo full-stack: diseño + desarrollo + automatización</li>
            <li><span className="check" aria-hidden="true">✓</span> Entregas claras y avance visible</li>
            <li><span className="check" aria-hidden="true">✓</span> Sin contratos eternos. Empezamos por lo esencial y escalamos.</li>
          </ul>
        </div>

        <div className="solution__visual" data-reveal>
          <div className="solution__panel">
            <div className="solution__panel-head">
              <span className="solution__panel-title">Proyecto actual</span>
              <span className="solution__panel-sub">en curso</span>
            </div>
            <ul className="solution__tasks">
              {[
                ["Checkout en 1 paso", "done"],
                ["Email automation — carrito abandonado", "done"],
                ["Dashboard de ventas en vivo", "doing"],
                ["Integración WhatsApp Business", "doing"],
                ["A/B test landing principal", "next"],
              ].map(([t, s]) => (
                <li key={t} className={`task task--${s}`}>
                  <span className="task__bullet" aria-hidden="true" />
                  <span className="task__t">{t}</span>
                  <span className="task__s">{s === "done" ? "Hecho" : s === "doing" ? "En curso" : "Próximo"}</span>
                </li>
              ))}
            </ul>
            <div className="solution__panel-foot">
              <div className="solution__avatars" aria-hidden="true">
                <span /><span /><span /><span />
              </div>
              <span className="solution__panel-meta">Equipo asignado · seguimiento continuo</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----------------------------- services -----------------------------
function Services({ accent }) {
  const items = [
    {
      id: "web",
      tag: "Web & Landing",
      title: "Convertís visitas en clientes",
      desc: "Landings y sitios pensados para vender. Diseño, copy y velocidad — afinados con datos reales.",
      bullets: ["Diseño a medida", "Tests A/B", "SEO técnico", "Carga < 1s"],
      cta: "Quiero esto",
      tone: "purple",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <rect x="3" y="4" width="18" height="14" rx="2" />
          <path d="M3 9h18M7 13h6" />
        </svg>
      ),
    },
    {
      id: "ecom",
      tag: "Ecommerce",
      title: "Vendés 24/7",
      desc: "Tiendas que funcionan mientras dormís. Checkout corto, pagos locales, envíos integrados, panel claro.",
      bullets: ["Mercado Pago", "Andreani / OCA", "Cupones", "Reportes"],
      cta: "Quiero esto",
      tone: "orange",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <path d="M4 6h16l-1.5 9.5a2 2 0 0 1-2 1.7H7.5a2 2 0 0 1-2-1.7L4 6Z" />
          <circle cx="9" cy="20" r="1.4" /><circle cx="17" cy="20" r="1.4" />
          <path d="M4 6 3 3H1" />
        </svg>
      ),
    },
    {
      id: "auto",
      tag: "Automatizaciones",
      title: "Menos trabajo manual, más eficiencia",
      desc: "Conectamos tus herramientas y dejamos que el software haga el laburo aburrido. Bots, integraciones, IA.",
      bullets: ["WhatsApp / CRM", "Zapier + n8n", "Agentes IA", "ETL a medida"],
      cta: "Ver más",
      tone: "purple",
      icon: (
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
          <circle cx="6" cy="6" r="2.4" /><circle cx="18" cy="6" r="2.4" />
          <circle cx="6" cy="18" r="2.4" /><circle cx="18" cy="18" r="2.4" />
          <path d="M8.4 6H15.6M6 8.4V15.6M18 8.4V15.6M8.4 18H15.6" />
        </svg>
      ),
    },
  ];

  return (
    <section id="servicios" className="services section">
      <div className="container">
        <div className="section__head section__head--row" data-reveal>
          <div>
            <span className="kicker kicker--p">Servicios</span>
            <h2 className="section__title">Tres formas de hacer<br />crecer tu negocio.</h2>
          </div>
          <p className="section__lede">
            Cada proyecto es a medida. Pero tras +30 entregas, sabemos exactamente
            cuáles son las palancas que mueven la aguja. Mirá cada servicio en detalle abajo.
          </p>
        </div>

        <div className="services__grid">
          {items.map((it, i) => (
            <a key={it.id} href={`#${it.id}`} className="service-link">
            <GlowCard className={`service service--${it.tone}`} style={{ transitionDelay: `${i * 70}ms` }}>
              <div className="service__inner" data-reveal>
                <div className="service__top">
                  <span className={`service__icon service__icon--${it.tone}`}>{it.icon}</span>
                  <span className="service__tag">{it.tag}</span>
                </div>
                <h3 className="service__title">{it.title}</h3>
                <p className="service__desc">{it.desc}</p>
                <ul className="service__bullets">
                  {it.bullets.map((b) => (
                    <li key={b}><span className="check" aria-hidden="true">+</span>{b}</li>
                  ))}
                </ul>
                <div className="service__foot">
                  <span className="btn btn--ghost btn--sm">Ver detalle <span className="btn__arrow">→</span></span>
                  <span className="service__more">{`#0${i + 1}`}</span>
                </div>
              </div>
            </GlowCard>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----------------------------- service deep dive -----------------------------
function ServiceDeepDive({ id, tag, eyebrow, title, lede, bullets, stat, tone, align, visual }) {
  return (
    <section id={id} className={`deepdive section deepdive--${tone} deepdive--${align}`}>
      <div className="container deepdive__inner">
        <div className="deepdive__copy" data-reveal>
          <span className={`kicker kicker--${tone === "orange" ? "o" : "p"}`}>{eyebrow}</span>
          <h2 className="deepdive__title">{title}</h2>
          <p className="deepdive__lede">{lede}</p>

          <ul className="deepdive__bullets">
            {bullets.map(([k, v]) => (
              <li key={k}>
                <div className="deepdive__bullet-k">
                  <span className={`deepdive__check deepdive__check--${tone}`} aria-hidden="true">✓</span>
                  {k}
                </div>
                <div className="deepdive__bullet-v">{v}</div>
              </li>
            ))}
          </ul>

          <div className="deepdive__stat">
            <span className={`deepdive__stat-k deepdive__stat-k--${tone}`}>{stat[0]}</span>
            <span className="deepdive__stat-l">{stat[1]}</span>
          </div>

          <div className="deepdive__ctas">
            <a href="#contacto" className="btn btn--primary">
              {tag === "Ecommerce" ? "Quiero mi tienda" : tag === "Web & Landing" ? "Quiero esto" : "Automatizar mi negocio"}
              <span className="btn__arrow">→</span>
            </a>
            <a href="#agenda" className="btn btn--ghost">Hablar con un experto</a>
          </div>
        </div>

        <div className="deepdive__visual" data-reveal>
          {visual}
        </div>
      </div>
    </section>
  );
}

function WebPreview() {
  return (
    <div className="dd-web">
      <div className="dd-web__frame">
        <div className="dd-chrome">
          <span className="dot dot--r" /><span className="dot dot--y" /><span className="dot dot--g" />
          <span className="dd-chrome__url">tucliente.com</span>
        </div>
        <div className="dd-web__body">
          <div className="dd-web__nav">
            <span className="dd-web__logo" />
            <span className="dd-web__nav-links">
              <span /><span /><span />
            </span>
            <span className="dd-web__cta" />
          </div>
          <div className="dd-web__hero">
            <div className="dd-web__h1" />
            <div className="dd-web__h1 dd-web__h1--short" />
            <div className="dd-web__sub" />
            <div className="dd-web__buttons"><span /><span className="ghost" /></div>
          </div>
          <Placeholder label="hero shot" aspect="16/6" tone="purple" />
        </div>
      </div>
      <div className="dd-web__metric">
        <div className="dd-web__metric-h">
          <span>Conversión esta semana</span>
          <span className="dd-web__metric-trend">↑ 12.4%</span>
        </div>
        <svg viewBox="0 0 200 60" className="dd-web__spark">
          <defs>
            <linearGradient id="spark" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="oklch(0.65 0.22 295 / 0.5)" />
              <stop offset="100%" stopColor="oklch(0.65 0.22 295 / 0)" />
            </linearGradient>
          </defs>
          <path d="M0,45 L20,40 L40,42 L60,30 L80,28 L100,22 L120,24 L140,16 L160,12 L180,8 L200,4 L200,60 L0,60 Z" fill="url(#spark)" />
          <path d="M0,45 L20,40 L40,42 L60,30 L80,28 L100,22 L120,24 L140,16 L160,12 L180,8 L200,4" fill="none" stroke="oklch(0.65 0.22 295)" strokeWidth="1.6" />
        </svg>
      </div>
    </div>
  );
}

function EcomPreview() {
  const products = [
    { n: "Botín de cuero", p: "$48.900", s: "82 vendidos" },
    { n: "Mochila urbana", p: "$32.400", s: "147 vendidos" },
    { n: "Reloj minimal", p: "$71.200", s: "21 vendidos" },
    { n: "Buzo oversized", p: "$24.900", s: "203 vendidos" },
  ];
  return (
    <div className="dd-ecom">
      <div className="dd-ecom__panel">
        <div className="dd-ecom__head">
          <div>
            <div className="dd-ecom__title">Ventas hoy</div>
            <div className="dd-ecom__amt">$847.230</div>
          </div>
          <div className="dd-ecom__live"><span /> en vivo</div>
        </div>
        <div className="dd-ecom__list">
          {products.map((p) => (
            <div key={p.n} className="dd-ecom__row">
              <div className="dd-ecom__thumb"><Placeholder label="" aspect="1/1" tone="orange" /></div>
              <div className="dd-ecom__info">
                <div className="dd-ecom__n">{p.n}</div>
                <div className="dd-ecom__s">{p.s}</div>
              </div>
              <div className="dd-ecom__p">{p.p}</div>
            </div>
          ))}
        </div>
        <div className="dd-ecom__foot">
          <span>Mercado Pago</span>
          <span>·</span>
          <span>Andreani</span>
          <span>·</span>
          <span>OCA</span>
        </div>
      </div>
      <div className="dd-ecom__notif">
        <div className="dd-ecom__notif-dot" />
        <div>
          <div className="dd-ecom__notif-t">Nueva venta</div>
          <div className="dd-ecom__notif-s">Mochila urbana — Argentina</div>
        </div>
      </div>
    </div>
  );
}

function AutoPreview() {
  const flow = [
    { t: "WhatsApp", s: "Cliente pregunta por stock", c: "Mensaje recibido", tone: "in" },
    { t: "Agente IA", s: "Clasifica intención + busca producto", c: "Procesando…", tone: "ai" },
    { t: "Sheets / CRM", s: "Stock disponible · 12 unidades", c: "Datos OK", tone: "data" },
    { t: "Respuesta", s: "Mensaje + link de pago al cliente", c: "Enviado · 2.4s", tone: "out" },
  ];
  return (
    <div className="dd-auto">
      <div className="dd-auto__panel">
        <div className="dd-auto__head">
          <span className="dd-auto__title">Flujo: consulta de stock</span>
          <span className="dd-auto__pill">Activo</span>
        </div>
        <div className="dd-auto__flow">
          {flow.map((f, i) => (
            <div key={f.t} className={`dd-auto__step dd-auto__step--${f.tone}`} style={{ animationDelay: `${i * 0.6}s` }}>
              <span className="dd-auto__node" aria-hidden="true" />
              <div className="dd-auto__step-body">
                <div className="dd-auto__step-h">
                  <span className="dd-auto__step-t">{f.t}</span>
                  <span className="dd-auto__step-c">{f.c}</span>
                </div>
                <div className="dd-auto__step-s">{f.s}</div>
              </div>
            </div>
          ))}
        </div>
        <div className="dd-auto__metrics">
          <div><span>Mensajes hoy</span><strong>1.247</strong></div>
          <div><span>Resueltos por IA</span><strong>89%</strong></div>
          <div><span>Tiempo medio</span><strong>2.4s</strong></div>
        </div>
      </div>
    </div>
  );
}

// ----------------------------- results -----------------------------
function Results() {
  const stats = [
    { k: "+40%", l: "conversión promedio", d: "Después de rediseñar el flujo principal y testear copy con datos." },
    { k: "−60%", l: "tareas manuales", d: "Automatizando lo que tu equipo hacía a mano todos los días." },
    { k: "Rápido", l: "para ver el primer release", d: "Avance visible y entregas tempranas. Nada de procesos eternos." },
    { k: "24/7", l: "tu negocio, en línea", d: "Web, tienda y bots que no duermen. Vos sí podés." },
  ];
  return (
    <section id="resultados" className="results section">
      <div className="container">
        <div className="section__head" data-reveal>
          <span className="kicker kicker--o">Resultados</span>
          <h2 className="section__title">Números que cambian<br />la forma en que opera tu negocio.</h2>
        </div>

        <div className="results__grid">
          {stats.map((s, i) => (
            <div key={s.l} className="result" data-reveal style={{ transitionDelay: `${i * 60}ms` }}>
              <div className="result__k">{s.k}</div>
              <div className="result__l">{s.l}</div>
              <div className="result__d">{s.d}</div>
            </div>
          ))}
        </div>

        <div className="results__chart" data-reveal aria-hidden="true">
          <ResultsChart />
        </div>
      </div>
    </section>
  );
}

function ResultsChart() {
  // Decorative growth chart
  const before = [12, 14, 13, 16, 18, 17, 19, 21, 20, 23, 24, 26];
  const after =  [12, 16, 19, 23, 28, 31, 36, 42, 47, 53, 60, 68];
  const W = 800, H = 220, P = 24;
  const max = 70;
  const x = (i) => P + (i * (W - P * 2)) / (before.length - 1);
  const y = (v) => H - P - (v / max) * (H - P * 2);
  const path = (a) => a.map((v, i) => `${i === 0 ? "M" : "L"}${x(i)},${y(v)}`).join(" ");
  const area = `${path(after)} L${x(after.length - 1)},${H - P} L${x(0)},${H - P} Z`;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="none" className="chart">
      <defs>
        <linearGradient id="ch-after" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="oklch(0.72 0.19 45 / 0.5)" />
          <stop offset="100%" stopColor="oklch(0.72 0.19 45 / 0)" />
        </linearGradient>
      </defs>
      {/* gridlines */}
      {[0, 1, 2, 3].map((i) => (
        <line key={i} x1={P} x2={W - P} y1={P + ((H - P * 2) / 3) * i} y2={P + ((H - P * 2) / 3) * i} stroke="rgba(255,255,255,0.05)" />
      ))}
      <path d={area} fill="url(#ch-after)" />
      <path d={path(before)} fill="none" stroke="rgba(255,255,255,0.25)" strokeWidth="1.6" strokeDasharray="4 4" />
      <path d={path(after)} fill="none" stroke="oklch(0.72 0.19 45)" strokeWidth="2.4" />
      <g fontFamily="'Geist Mono', monospace" fontSize="11" fill="rgba(255,255,255,0.55)">
        <text x={P} y={H - 6}>ene</text>
        <text x={W / 2 - 8} y={H - 6}>jun</text>
        <text x={W - P - 18} y={H - 6}>dic</text>
      </g>
      <g fontFamily="'Geist Mono', monospace" fontSize="11">
        <circle cx={x(after.length - 1)} cy={y(after[after.length - 1])} r="4" fill="oklch(0.72 0.19 45)" />
        <text x={x(after.length - 1) - 90} y={y(after[after.length - 1]) - 10} fill="oklch(0.72 0.19 45)">+183% revenue</text>
      </g>
    </svg>
  );
}

// ----------------------------- process -----------------------------
function Process() {
  const steps = [
    { n: "01", t: "Entendemos tu negocio", d: "Una llamada, preguntas duras y un brief claro. Salimos con el problema bien definido — no con una lista de features." },
    { n: "02", t: "Diseñamos la solución", d: "Wireframes, flujo y prototipo navegable en días, no semanas. Validamos con usuarios reales antes de tocar código." },
    { n: "03", t: "Desarrollamos", d: "Construimos con foco en lo que mueve la aguja. Comunicación constante y avance visible." },
    { n: "04", t: "Lanzamos y optimizamos", d: "Lanzamos, medimos, iteramos. La primera versión es el comienzo — seguimos midiendo y mejorando." },
  ];
  return (
    <section id="proceso" className="process section">
      <div className="container">
        <div className="section__head" data-reveal>
          <span className="kicker kicker--p">Proceso</span>
          <h2 className="section__title">Cuatro pasos.<br />Cero misterio.</h2>
        </div>

        <ol className="process__list">
          {steps.map((s, i) => (
            <li key={s.n} className="process__item" data-reveal style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="process__rail" aria-hidden="true">
                <span className="process__node">{s.n}</span>
                {i < steps.length - 1 && <span className="process__line" />}
              </div>
              <div className="process__body">
                <h3 className="process__t">{s.t}</h3>
                <p className="process__d">{s.d}</p>
              </div>
            </li>
          ))}
        </ol>
      </div>
    </section>
  );
}

// ----------------------------- testimonial -----------------------------
function Testimonials() {
  const items = [
    {
      q: "Veníamos cargando pedidos a mano desde hace dos años. En seis semanas armaron una integración que nos ahorra unas 20 horas por semana. Encima la web nueva convierte el doble.",
      n: "Mariela Sosa",
      r: "Co-fundadora, Tienda 21",
      tone: "purple",
    },
    {
      q: "Probamos con dos agencias antes. Estos vinieron, entendieron el negocio en una llamada y a la semana ya teníamos prototipo. Hoy son parte del equipo.",
      n: "Federico Álvarez",
      r: "CEO, Norvik",
      tone: "orange",
    },
  ];
  return (
    <section id="testimonios" className="testimonials section">
      <div className="container">
        <div className="section__head" data-reveal>
          <span className="kicker kicker--o">Casos</span>
          <h2 className="section__title">Lo que dicen<br />nuestros clientes.</h2>
        </div>

        <div className="testimonials__grid">
          {items.map((t, i) => (
            <GlowCard key={t.n} className={`testimonial testimonial--${t.tone}`} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="testimonial__inner" data-reveal>
                <span className="testimonial__quote" aria-hidden="true">“</span>
                <p className="testimonial__q">{t.q}</p>
                <div className="testimonial__by">
                  <Placeholder label={t.n} aspect="1/1" tone={t.tone} />
                  <div>
                    <div className="testimonial__n">{t.n}</div>
                    <div className="testimonial__r">{t.r}</div>
                  </div>
                </div>
              </div>
            </GlowCard>
          ))}
        </div>
      </div>
    </section>
  );
}

// ----------------------------- final cta -----------------------------
function FinalCTA() {
  return (
    <section id="contacto" className="final section">
      <div className="container">
        <div className="final__card" data-reveal>
          <div className="final__bg" aria-hidden="true">
            <div className="final__glow final__glow--p" />
            <div className="final__glow final__glow--o" />
            <div className="final__grid" />
          </div>

          <span className="kicker kicker--p">Hablemos</span>
          <h2 className="final__title">
            No vendemos código.<br />Creamos <em>soluciones</em>.
          </h2>
          <p className="final__sub">
            Una llamada de 15 minutos alcanza para saber si podemos ayudarte.
            Si no encajamos, te decimos qué buscar — sin vueltas.
          </p>
          <div className="final__ctas">
            <a href="#agenda" className="btn btn--primary btn--xl">
              Hablemos de tu proyecto
              <span className="btn__arrow">→</span>
            </a>
            <a href="#agenda" className="btn btn--secondary btn--xl">
              <span className="btn__cal" aria-hidden="true"><span className="btn__cal-dot" /></span>
              Agendá una llamada de 15 min
            </a>
          </div>

          <div className="final__meta">
            <span><strong>hola@tusoftwarehoy.com</strong></span>
            <span className="dot">•</span>
            <span>Argentina</span>
            <span className="dot">•</span>
            <span>Respondemos en menos de 24h</span>
          </div>
        </div>

        {/* Calendly placeholder */}
        <div id="agenda" className="calendly" data-reveal>
          <div className="calendly__head">
            <div>
              <div className="calendly__t">Agendá una llamada de 15 min</div>
              <div className="calendly__s">Calendly · gratis · sin compromiso</div>
            </div>
            <span className="calendly__pill">en vivo</span>
          </div>
          <div className="calendly__body">
            <div className="calendly__cal">
              <div className="calendly__month">Mayo 2026</div>
              <div className="calendly__weekdays">
                {["L", "M", "X", "J", "V", "S", "D"].map((d, i) => <span key={i}>{d}</span>)}
              </div>
              <div className="calendly__days">
                {Array.from({ length: 31 }, (_, i) => i + 1).map((d) => (
                  <button key={d} className={`calendly__day ${d === 7 ? "is-active" : ""} ${[2, 9, 16, 23, 30, 3, 10].includes(d) ? "is-disabled" : ""}`} disabled={[2,9,16,23,30,3,10].includes(d)}>
                    {d}
                  </button>
                ))}
              </div>
            </div>
            <div className="calendly__slots">
              <div className="calendly__slots-h">Mié 7 de mayo</div>
              {["10:00", "11:30", "14:00", "15:30", "17:00"].map((t, i) => (
                <button key={t} className={`calendly__slot ${i === 1 ? "is-selected" : ""}`}>
                  {t} <span>−03</span>
                </button>
              ))}
              <button className="btn btn--primary btn--block">Confirmar 11:30</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----------------------------- footer -----------------------------
function Footer() {
  return (
    <footer className="foot">
      <div className="container foot__inner">
        <div className="foot__brand">
          <span className="brand__mark" aria-hidden="true">
            <span className="brand__dot brand__dot--p" />
            <span className="brand__dot brand__dot--o" />
          </span>
          <span className="brand__name">tu software <span className="brand__accent">hoy</span></span>
        </div>
        <div className="foot__cols">
          <div>
            <div className="foot__h">Servicios</div>
            <a href="#servicios">Webs & Landings</a>
            <a href="#servicios">Ecommerce</a>
            <a href="#servicios">Automatizaciones</a>
          </div>
          <div>
            <div className="foot__h">Empresa</div>
            <a href="#proceso">Proceso</a>
            <a href="#testimonios">Casos</a>
            <a href="#contacto">Contacto</a>
          </div>
          <div>
            <div className="foot__h">Contacto</div>
            <a href="mailto:hola@tusoftwarehoy.com">hola@tusoftwarehoy.com</a>
            <a href="tel:+5493517516055">+54 9 351 751 6055</a>
            <a href="#">Argentina</a>
          </div>
        </div>
      </div>
      <div className="foot__legal container">
        <span>© 2026 Tu Software Hoy. Todos los derechos reservados.</span>
        <span>Hecho con cariño en Argentina.</span>
      </div>
    </footer>
  );
}

// ----------------------------- floating WA -----------------------------
function FloatingWA() {
  const [open, setOpen] = useState(false);
  return (
    <div className={`wa ${open ? "wa--open" : ""}`}>
      {open && (
        <div className="wa__panel" role="dialog" aria-label="WhatsApp">
          <div className="wa__head">
            <div className="wa__avatar" aria-hidden="true">TS</div>
            <div>
              <div className="wa__name">Tu Software Hoy</div>
              <div className="wa__status"><span /> en línea · responde en min</div>
            </div>
            <button className="wa__close" aria-label="Cerrar" onClick={() => setOpen(false)}>×</button>
          </div>
          <div className="wa__body">
            <div className="wa__bubble">
              ¡Hola! 👋 Contanos qué necesitás y te respondemos en minutos.
            </div>
          </div>
          <a className="wa__send" href="https://wa.me/5493517516055" target="_blank" rel="noreferrer">
            Abrir WhatsApp →
          </a>
        </div>
      )}
      <button
        className="wa__btn"
        aria-label="WhatsApp"
        onClick={() => setOpen((o) => !o)}
      >
        <svg viewBox="0 0 32 32" width="30" height="30" aria-hidden="true">
          <path fill="#fff" fillRule="evenodd" clipRule="evenodd" d="M16 3C8.8 3 3 8.8 3 16c0 2.3.6 4.5 1.7 6.4L3 29l6.8-1.8c1.9 1 4 1.6 6.2 1.6 7.2 0 13-5.8 13-13S23.2 3 16 3Zm0 23.6c-2 0-3.9-.5-5.6-1.5l-.4-.2-4 1.1 1.1-3.9-.3-.4A10.5 10.5 0 0 1 5.5 16c0-5.8 4.7-10.5 10.5-10.5S26.5 10.2 26.5 16 21.8 26.6 16 26.6Zm5.7-7.9c-.3-.2-1.8-.9-2.1-1-.3-.1-.5-.2-.7.2-.2.3-.8 1-1 1.2-.2.2-.4.2-.7.1-.3-.2-1.3-.5-2.5-1.5a9.4 9.4 0 0 1-1.7-2.1c-.2-.3 0-.5.1-.6l.5-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.2c-.2-.5-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4-.3.3-1.2 1.2-1.2 2.9 0 1.7 1.2 3.4 1.4 3.6.2.2 2.4 3.7 5.9 5.2.8.4 1.5.6 2 .7.8.3 1.6.2 2.2.1.7-.1 2-.8 2.3-1.6.3-.8.3-1.5.2-1.6 0-.1-.3-.2-.6-.3Z" />
        </svg>
      </button>
    </div>
  );
}

// ----------------------------- root -----------------------------
function App() {
  const defaults = (typeof TWEAK_DEFAULTS !== "undefined") ? TWEAK_DEFAULTS : {};
  const [tweaks, setTweak] = useTweaks(defaults);

  useReveal();

  // Apply accent vars from tweaks
  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--purple", tweaks.purple || "oklch(0.65 0.22 295)");
    root.style.setProperty("--orange", tweaks.orange || "oklch(0.72 0.19 45)");
    root.style.setProperty("--bg", tweaks.bg || "#070710");
    root.dataset.density = tweaks.density || "comfy";
  }, [tweaks]);

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <Services accent={tweaks.purple} />
        <ServiceDeepDive
          id="web"
          tag="Web & Landing"
          eyebrow="01 / Web & Landing"
          title="Webs que convierten visitas en clientes."
          lede="Sitios y landings diseñados para vender. Cada bloque, cada copy, cada milisegundo de carga, optimizados con datos reales — no con corazonadas."
          bullets={[
            ["Diseño a medida", "Branding propio, no plantillas. Mobile-first siempre."],
            ["Tests A/B", "Probamos copys, hero, CTAs y precios hasta encontrar el flujo que vende."],
            ["SEO técnico", "Schema, Core Web Vitals, sitemap, indexado limpio desde el día 1."],
            ["Carga < 1s", "Next.js + edge + imágenes optimizadas. Velocidad real, no excusas."],
          ]}
          stat={["+41%", "conversión promedio en sitios rediseñados"]}
          tone="purple"
          align="left"
          visual={<WebPreview />}
        />
        <ServiceDeepDive
          id="ecom"
          tag="Ecommerce"
          eyebrow="02 / Ecommerce"
          title="Tiendas que venden mientras dormís."
          lede="Checkout corto, pagos locales, envíos integrados y un panel donde realmente entendés qué pasa con tu negocio."
          bullets={[
            ["Mercado Pago + tarjetas", "Pagos locales, cuotas y QR. Transferencia incluida."],
            ["Andreani / OCA / Correo Argentino", "Cotización en vivo en el checkout."],
            ["Carrito abandonado", "Email + WhatsApp automático que recupera ventas."],
            ["Reportes claros", "Qué se vende, qué no, qué da plata. En un dashboard, no en planillas."],
          ]}
          stat={["+183%", "revenue en 6 meses (caso Tienda 21)"]}
          tone="orange"
          align="right"
          visual={<EcomPreview />}
        />
        <ServiceDeepDive
          id="auto"
          tag="Automatizaciones & IA"
          eyebrow="03 / Automatizaciones"
          title="Menos trabajo manual. Más tiempo para crecer."
          lede="Conectamos tus herramientas y dejamos que el software haga el laburo aburrido. Bots de WhatsApp, agentes IA, integraciones a medida — todo lo que se pueda automatizar, lo automatizamos."
          bullets={[
            ["WhatsApp Business + CRM", "Atención 24/7, calificación de leads, agendamiento automático."],
            ["Zapier + n8n + Make", "Integraciones entre tus apps sin escribir una línea de código."],
            ["Agentes IA", "Asistentes que responden, clasifican y resuelven. GPT-4, Claude, locales."],
            ["ETL a medida", "Migraciones, sincronizaciones y reportes automáticos para tu data."],
          ]}
          stat={["−63%", "tareas manuales por semana"]}
          tone="purple"
          align="left"
          visual={<AutoPreview />}
        />
        <Problem />
        <Solution />
        <Results />
        <Process />
        <Testimonials />
        <FinalCTA />
      </main>
      <Footer />
      <FloatingWA />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Acentos">
          <TweakColor label="Púrpura" value={tweaks.purple} onChange={(v) => setTweak("purple", v)} />
          <TweakColor label="Naranja" value={tweaks.orange} onChange={(v) => setTweak("orange", v)} />
          <TweakColor label="Fondo" value={tweaks.bg} onChange={(v) => setTweak("bg", v)} />
        </TweakSection>
        <TweakSection title="Hero">
          <TweakRadio
            label="Variante de título"
            value={tweaks.heroVariant}
            options={[
              { label: "Default", value: "default" },
              { label: "Tachado", value: "strike" },
              { label: "Mega", value: "mega" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
          <TweakToggle
            label="Mostrar trustbar"
            value={tweaks.showTrust}
            onChange={(v) => setTweak("showTrust", v)}
          />
        </TweakSection>
        <TweakSection title="Densidad">
          <TweakRadio
            label="Espaciado"
            value={tweaks.density}
            options={[
              { label: "Compacto", value: "compact" },
              { label: "Cómodo", value: "comfy" },
              { label: "Amplio", value: "wide" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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