// Bottom sections: Stack, Stats, FAQ, CTA, Contact, Footer, FloatingWA

// ─── Brand SVG marks (monochrome, currentColor) ─────────────
const Brand = {
  react: (
    <svg viewBox="-11.5 -10.23 23 20.46" fill="none" stroke="currentColor" strokeWidth="0.9">
      <circle r="2" fill="currentColor" stroke="none" />
      <ellipse rx="11" ry="4.2" />
      <ellipse rx="11" ry="4.2" transform="rotate(60)" />
      <ellipse rx="11" ry="4.2" transform="rotate(120)" />
    </svg>
  ),
  next: (
    <svg viewBox="0 0 180 180" fill="currentColor">
      <circle cx="90" cy="90" r="86" fill="none" stroke="currentColor" strokeWidth="6" />
      <path d="M58 50h12v80H58zM110 50h12v62l-50-62H58l64 80h-12L60 68V50z" fill="currentColor"/>
      <rect x="110" y="50" width="12" height="48" fill="currentColor"/>
    </svg>
  ),
  node: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 1.85a1.4 1.4 0 0 0-.7.19L2.78 6.94a1.4 1.4 0 0 0-.7 1.21v7.7a1.4 1.4 0 0 0 .7 1.21l8.52 4.91a1.4 1.4 0 0 0 1.4 0l8.52-4.91a1.4 1.4 0 0 0 .7-1.21v-7.7a1.4 1.4 0 0 0-.7-1.21L12.7 2.04A1.4 1.4 0 0 0 12 1.85zM12 4.16l7.93 4.59L12 13.34 4.07 8.75z" opacity=".75"/>
      <path d="M12 4.16l7.93 4.59L12 13.34zm0 9.18v8.41" fill="none" stroke="currentColor" strokeWidth="1.2"/>
    </svg>
  ),
  postgres: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
      <ellipse cx="12" cy="5" rx="8" ry="3" />
      <path d="M4 5v14c0 1.66 3.58 3 8 3s8-1.34 8-3V5" />
      <path d="M4 12c0 1.66 3.58 3 8 3s8-1.34 8-3" />
    </svg>
  ),
  supabase: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M13.5 2L4 13.5h7.5L10.5 22 20 10.5h-7.5L13.5 2z"/>
    </svg>
  ),
  stripe: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M13.5 9.5c0-1 .8-1.4 2.2-1.4 2 0 4.4.6 6.4 1.7V3.7C20 2.9 17.9 2.5 15.7 2.5c-5.3 0-8.8 2.8-8.8 7.4 0 7.2 9.9 6 9.9 9.1 0 1.2-1 1.6-2.5 1.6-2.1 0-4.9-.9-7.1-2v6.2c2.4 1 4.9 1.4 7.1 1.4 5.4 0 9.1-2.7 9.1-7.4-.1-7.7-10-6.3-10-9.3z" transform="scale(0.85) translate(2, 2)"/>
    </svg>
  ),
  mercadopago: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <ellipse cx="12" cy="12" rx="10" ry="6.5" />
      <path d="M6 11c1.5-.5 3.5 0 4.5 1.5M13.5 12.5c1-1.5 3-2 4.5-1.5" />
      <circle cx="9" cy="11.5" r="0.7" fill="currentColor" stroke="none" />
      <circle cx="15" cy="11.5" r="0.7" fill="currentColor" stroke="none" />
    </svg>
  ),
  openai: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
      <path d="M21.6 10.4a5.6 5.6 0 0 0-.5-4.6 5.7 5.7 0 0 0-6.1-2.7 5.6 5.6 0 0 0-4.2-1.9 5.7 5.7 0 0 0-5.4 3.9 5.6 5.6 0 0 0-3.7 2.7 5.7 5.7 0 0 0 .7 6.7 5.6 5.6 0 0 0 .5 4.6 5.7 5.7 0 0 0 6.1 2.7 5.6 5.6 0 0 0 4.2 1.9 5.7 5.7 0 0 0 5.4-3.9 5.6 5.6 0 0 0 3.7-2.7 5.7 5.7 0 0 0-.7-6.7z"/>
      <path d="M12 7v10M7.5 9.5l9 5M7.5 14.5l9-5" strokeWidth="0.9"/>
    </svg>
  ),
  vercel: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2 2 20h20L12 2z"/>
    </svg>
  ),
  tailwind: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 6c-2.7 0-4.4 1.3-5 4 .9-1.3 2-1.7 3.2-1.4.7.2 1.2.7 1.7 1.2 1 1 2.1 2.2 4.6 2.2 2.7 0 4.4-1.3 5-4-.9 1.3-2 1.7-3.2 1.4-.7-.2-1.2-.7-1.7-1.2-1-1-2.1-2.2-4.6-2.2zM7 12c-2.7 0-4.4 1.3-5 4 .9-1.3 2-1.7 3.2-1.4.7.2 1.2.7 1.7 1.2 1 1 2.1 2.2 4.6 2.2 2.7 0 4.4-1.3 5-4-.9 1.3-2 1.7-3.2 1.4-.7-.2-1.2-.7-1.7-1.2-1-1-2.1-2.2-4.6-2.2z"/>
    </svg>
  ),
  figma: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <circle cx="15" cy="12" r="3"/>
      <path d="M9 3h3v6H9a3 3 0 1 1 0-6zM12 3h3a3 3 0 0 1 0 6h-3V3zM9 9h3v6H9a3 3 0 1 1 0-6zM9 15h3v3a3 3 0 1 1-3-3z"/>
    </svg>
  ),
  whatsapp: (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M17.5 14.4c-.3-.1-1.7-.9-2-1-.3-.1-.5-.1-.7.1s-.8 1-.9 1.2c-.2.2-.3.2-.6.1s-1.2-.5-2.4-1.5c-.9-.8-1.5-1.8-1.7-2.1-.2-.3 0-.5.1-.6l.4-.5c.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5l-.9-2.2c-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4s-1 1-1 2.5c0 1.5 1.1 2.9 1.2 3.1.1.2 2.1 3.2 5.1 4.5 2 .9 2.5.7 2.9.7.6-.1 1.7-.7 2-1.4.3-.7.3-1.3.2-1.4-.1-.2-.3-.3-.6-.4z"/>
      <path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.3c1.5.8 3.1 1.3 4.8 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3.2-.4-4.5-1.2l-.3-.2-3.3.9.9-3.2-.2-.3C3.7 14.7 3.3 13.4 3.3 12 3.3 7.2 7.2 3.3 12 3.3s8.7 3.9 8.7 8.7-3.9 8-8.7 8z" fillOpacity=".7"/>
    </svg>
  ),
};

function Stack() {
  const items = [
    { name: "React", b: Brand.react },
    { name: "Next.js", b: Brand.next },
    { name: "Node.js", b: Brand.node },
    { name: "PostgreSQL", b: Brand.postgres },
    { name: "Supabase", b: Brand.supabase },
    { name: "Stripe", b: Brand.stripe },
    { name: "Mercado Pago", b: Brand.mercadopago },
    { name: "OpenAI", b: Brand.openai },
    { name: "Vercel", b: Brand.vercel },
    { name: "Tailwind", b: Brand.tailwind },
    { name: "Figma", b: Brand.figma },
    { name: "WhatsApp API", b: Brand.whatsapp },
  ];
  return (
    <section id="stack">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Stack</span></span>
          <h2 className="h-section">Tecnología seria, sin que tengas que entenderla.</h2>
          <p className="lede">
            Usamos las mismas herramientas que las grandes startups. Para vos
            significa: rápido, seguro, escalable.
          </p>
        </div>
        <div className="stack-grid">
          {items.map((s) => (
            <div className="stack-cell" key={s.name} title={s.name}>
              <span className="brand">{s.b}</span>
              <span className="name">{s.name}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CountUp({ to, suffix = "", duration = 1400 }) {
  const [v, setV] = React.useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const ease = 1 - Math.pow(1 - t, 3);
            setV(Math.round(to * ease));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, duration]);
  return <span ref={ref}>{v.toLocaleString("es-AR")}{suffix}</span>;
}

function Stats() {
  return (
    <section id="stats">
      <div className="shell">
        <div className="stats-grid">
          <div className="stat">
            <div className="stat-num"><CountUp to={4} suffix=" hs" /></div>
            <div className="stat-label">Tiempo promedio de respuesta</div>
          </div>
          <div className="stat">
            <div className="stat-num"><CountUp to={7} suffix=" días" /></div>
            <div className="stat-label">Para tener tu sitio en línea</div>
          </div>
          <div className="stat">
            <div className="stat-num"><CountUp to={100} suffix="%" /></div>
            <div className="stat-label">Sitios responsive y optimizados</div>
          </div>
          <div className="stat">
            <div className="stat-num"><CountUp to={30} suffix=" días" /></div>
            <div className="stat-label">Garantía post-entrega</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: "¿Cuánto tarda en estar listo mi sitio?", a: "Un sitio del Plan Básico está listo en 7 días hábiles. El Medio entre 10–14 días. El Avanzado depende del alcance, pero la mayoría se entrega entre 3 y 6 semanas. Si necesitás algo express, lo hablamos." },
    { q: "¿Hay que pagar todo junto?", a: "No. Trabajamos con 50% al aprobar el diseño y 50% al entregar. Para proyectos más grandes (Plan Avanzado) hacemos 3 pagos: arranque, mitad y entrega final. Sin pago inicial para arrancar a charlar." },
    { q: "¿Y si después quiero modificar algo?", a: "Todos los planes incluyen ajustes durante el desarrollo y un período de soporte gratuito post-entrega. Después podés contratar mantenimiento mensual o pedirnos cambios puntuales según necesites." },
    { q: "¿El sitio queda mío o se queda con ustedes?", a: "Es 100% tuyo. Te entregamos el código, los accesos al hosting, al dominio y al panel administrador. Si en algún momento querés cambiar de proveedor, te llevás todo." },
    { q: "Soy emprendedor y no entiendo de tecnología. ¿Sirve igual?", a: "Te diría que es justo para vos. Trabajamos con palabras simples, te mostramos avances visuales, y al final te dejamos un panel donde podés editar todo sin tocar código." },
    { q: "¿Puedo cargar yo los productos / contenido?", a: "Sí. Todos los planes Medio y Avanzado incluyen panel administrador. Te lo entregamos con una guía corta en video para que puedas editar todo." },
    { q: "¿Trabajan con IA solo si la pido?", a: "Sí. Si no la necesitás, no la metemos. Si querés sumarla (chatbot, automatización, análisis), te explicamos qué tiene sentido para tu caso y qué cuesta." },
    { q: "¿De dónde son? ¿Trabajan con clientes de otras provincias o países?", a: "Sí, trabajamos 100% remoto desde Argentina. Tenemos clientes en distintas provincias y países. Todo se hace por WhatsApp, mail y video llamadas." },
  ];
  return (
    <section id="faq" data-screen-label="FAQ">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Preguntas frecuentes</span></span>
          <h2 className="h-section">Todo lo que te suele preocupar.</h2>
          <p className="lede">Si quedó alguna duda, escribinos por WhatsApp y la respondemos en el momento.</p>
        </div>
        <div className="faq">
          {items.map((it, i) => (
            <details key={i} open={i === 0}>
              <summary>{it.q}</summary>
              <div>{it.a}</div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTASection() {
  return (
    <section>
      <div className="shell">
        <div className="cta-panel">
          <span className="eyebrow" style={{ background: "rgba(57,255,20,0.08)", borderColor: "rgba(57,255,20,0.25)" }}>
            <span className="dot"></span><span>Empezamos contigo</span>
          </span>
          <h2 className="h-section" style={{ marginTop: 24, maxWidth: 720, marginLeft: "auto", marginRight: "auto" }}>
            Sos uno de nuestros primeros clientes.
            <br/>
            <span className="accent">Aprovechalo.</span>
          </h2>
          <p className="lede" style={{ margin: "20px auto 0", textAlign: "left" }}>
            Estamos arrancando con DINI APPS y por los primeros 10 proyectos
            ofrecemos <b style={{ color: "var(--ink)" }}>15% off</b> y
            soporte extendido sin costo. Sin trampa, sin letra chica.
          </p>
          <div style={{ display: "flex", gap: 12, justifyContent: "center", marginTop: 30, flexWrap: "wrap" }}>
            <a
              href={window.DINI.waUrl("Hola DINI! Quiero ser uno de los primeros 10 con 15% off.")}
              target="_blank" rel="noopener noreferrer"
              className="btn btn-primary btn-lg"
            >
              <IconWA size={16} /> Reservar mi lugar
            </a>
            <a href="#calculadora" className="btn btn-ghost btn-lg">Ver mi precio</a>
          </div>
          <div style={{ marginTop: 20, fontSize: 13, color: "var(--ink-3)", fontFamily: "var(--font-mono)" }}>
            <span className="live-dot" style={{ marginRight: 8 }}></span>
            Lugares disponibles · cupo limitado
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [form, setForm] = React.useState({ name: "", email: "", business: "", interest: "Sitio web", msg: "" });
  const [sent, setSent] = React.useState(false);
  const handle = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  const submit = (e) => {
    e.preventDefault();
    const text = `Hola DINI! Soy ${form.name || "—"} (${form.email || "—"}).
Negocio: ${form.business || "—"}
Me interesa: ${form.interest}
Mensaje: ${form.msg || "—"}`;
    window.open(window.DINI.waUrl(text), "_blank");
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section id="contacto" data-screen-label="Contacto">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span><span>Hablemos</span></span>
          <h2 className="h-section">¿Listo para arrancar?</h2>
          <p className="lede">
            Contanos un poco de tu proyecto y te respondemos en menos de 4 horas
            con una primera idea y un presupuesto formal.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-side">
            <h3>Más rápido por WhatsApp.</h3>
            <p>
              Si querés respuesta inmediata, escribinos directamente. Estamos online
              de lunes a sábado, de 9 a 21 hs.
            </p>
            <a
              href={window.DINI.waUrl()}
              target="_blank" rel="noopener noreferrer"
              className="btn btn-wa"
              style={{ alignSelf: "flex-start" }}
            >
              <IconWA size={18} /> Abrir WhatsApp
            </a>

            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 20 }}>
              <div className="item">
                <div className="ico"><IconPhone size={14} /></div>
                <div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>WhatsApp</div>
                  <div>{window.DINI.whatsappDisplay}</div>
                </div>
              </div>
              <div className="item">
                <div className="ico"><IconMail size={14} /></div>
                <div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Mail</div>
                  <div>{window.DINI.email}</div>
                </div>
              </div>
              <div className="item">
                <div className="ico"><IconLocation size={14} /></div>
                <div>
                  <div style={{ fontSize: 12, color: "var(--ink-3)" }}>Trabajamos remoto</div>
                  <div>Argentina · Atención en español</div>
                </div>
              </div>
            </div>
          </div>

          <form className="contact-form" onSubmit={submit}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
              <div>
                <label className="field-label">Nombre</label>
                <input className="input" placeholder="Cómo te llamás" value={form.name} onChange={handle("name")} required />
              </div>
              <div>
                <label className="field-label">Email</label>
                <input className="input" type="email" placeholder="tu@email.com" value={form.email} onChange={handle("email")} required />
              </div>
            </div>
            <div>
              <label className="field-label">Negocio o proyecto</label>
              <input className="input" placeholder="Nombre o rubro de tu negocio" value={form.business} onChange={handle("business")} />
            </div>
            <div>
              <label className="field-label">¿Qué necesitás?</label>
              <select className="select" value={form.interest} onChange={handle("interest")}>
                <option>Sitio web</option>
                <option>Tienda online</option>
                <option>App móvil</option>
                <option>Sistema de gestión</option>
                <option>Automatización / IA</option>
                <option>Aún no estoy seguro</option>
              </select>
            </div>
            <div>
              <label className="field-label">Contanos un poco más</label>
              <textarea className="textarea" placeholder="Qué hace tu negocio, qué problema querés resolver, referencias que te gusten..." value={form.msg} onChange={handle("msg")} />
            </div>
            <button type="submit" className="btn btn-primary" style={{ justifyContent: "center" }}>
              {sent ? "Abriendo WhatsApp..." : "Enviar y abrir WhatsApp"} <IconArrow size={14} />
            </button>
            <div style={{ fontSize: 12, color: "var(--ink-3)", textAlign: "center" }}>
              Tus datos no se comparten. Solo te respondemos.
            </div>
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-grid">
          <div>
            <div className="logo logo-footer" style={{ marginBottom: 14 }}>
              <span className="logo-mark"></span>
              <span>DINI</span>
            </div>
            <p style={{ color: "var(--ink-3)", fontSize: 14, maxWidth: 360, lineHeight: 1.6 }}>
              Sitios, apps, sistemas e IA para que tu negocio crezca.
              Hecho con dedicación para emprendedores y pymes.
            </p>
          </div>
          <div>
            <h4>Producto</h4>
            <ul>
              <li><a href="#servicios">Servicios</a></li>
              <li><a href="#planes">Planes y precios</a></li>
              <li><a href="#calculadora">Calculadora</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
            </ul>
          </div>
          <div>
            <h4>Contacto</h4>
            <ul>
              <li><a href={window.DINI.waUrl()} target="_blank" rel="noopener noreferrer">WhatsApp</a></li>
              <li><a href={`mailto:${window.DINI.email}`}>{window.DINI.email}</a></li>
              <li><a href="#contacto">Formulario</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 DINI APPS · Hecho con dedicación en Argentina</span>
          <span className="mono">v1.0 · Mayo 2026</span>
        </div>
      </div>
    </footer>
  );
}

function FloatingWA() {
  return (
    <a
      href={window.DINI.waUrl()}
      target="_blank"
      rel="noopener noreferrer"
      className="fab-wa"
      aria-label="Abrir WhatsApp"
    >
      <span className="fab-wa-pulse"></span>
      <IconWA />
      <span>Hablar por WhatsApp</span>
    </a>
  );
}

Object.assign(window, { Stack, Stats, FAQ, CTASection, Contact, Footer, FloatingWA });