// Sections: Nav, Hero, Logos, Benefits, Plans, FAQ, CTA/Contact, Footer
// All components are exposed on window so the main app can use them.

const { useState, useRef, useEffect } = React;

// ───────── tiny icons (geometric only) ─────────
const Icon = ({ name }) => {
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: 20, height: 20, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "globe":
      return <svg {...common}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3c2.5 2.5 4 5.5 4 9s-1.5 6.5-4 9c-2.5-2.5-4-5.5-4-9s1.5-6.5 4-9z" /></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "bolt":
      return <svg {...common}><path d="M13 3L4 14h7l-1 7 9-11h-7l1-7z" /></svg>;
    case "headset":
      return <svg {...common}><path d="M4 13a8 8 0 0116 0v5a2 2 0 01-2 2h-2v-7h4M4 13v5a2 2 0 002 2h2v-7H4" /></svg>;
    case "check":
      return <svg width="11" height="11" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M2 6l3 3 5-6" /></svg>;
    case "plus":
      return <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M7 2v10M2 7h10" /></svg>;
    case "search":
      return <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></svg>;
    case "gift":
      return <svg {...common}><rect x="3" y="8" width="18" height="4" rx="1" /><path d="M4 12v9h16v-9M12 8v13M12 8s-3-5-6-3 0 5 3 3M12 8s3-5 6-3 0 5-3 3" /></svg>;
    case "arrow":
      return <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M2 7h10M8 3l4 4-4 4" /></svg>;
    default:return null;
  }
};

// ───────── Nav ─────────
function Nav() {
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="logo">
          <span className="logo-mark"><img src="assets/soloweb-logo.png" alt="SoloWeb" /></span>
          <span className="brand">dominios<b>gratis.com.mx</b></span>
          <small>un servicio de soloweb.mx</small>
        </a>
        <div className="nav-links">
          <a href="#dominio">Dominio gratis</a>
          <a href="#planes">Planes</a>
          <a href="#porque">Por qué nosotros</a>
          <a href="#faq">Preguntas</a>
        </div>
        <a href="#contacto" className="btn btn-secondary" style={{ padding: '10px 18px', fontSize: 14 }}>
          Contacto <Icon name="arrow" />
        </a>
      </div>
    </nav>);

}

// ───────── Hero ─────────
function Hero() {
  const [tld, setTld] = useState(".com.mx");
  const [q, setQ] = useState("");
  const inputRef = useRef(null);

  const clean = (s) => s.toLowerCase().replace(/[^a-z0-9-]/g, "").replace(/^-+|-+$/g, "");

  const SEARCH_URL = "https://soloweb.mx/dominios";
  const buildSearchHref = () => {
    const name = clean(q);
    if (!name) return SEARCH_URL;
    return `${SEARCH_URL}?d=${encodeURIComponent(name + tld)}`;
  };

  const check = (e) => {
    e?.preventDefault?.();
    window.open(buildSearchHref(), "_blank", "noopener");
  };

  return (
    <section className="hero" id="dominio">
      <div className="wrap hero-grid">
        <div>
          <div className="hero-tag">
            <span className="dot"></span>
            <span>Promoción 2026</span>
            <span className="chip"></span>
          </div>
          <h1>
            Tu dominio,<br />
            <span className="serif-it">gratis</span> al contratar<br />
            tu hosting.
          </h1>
          <p className="lead">
            Lanza tu sitio en México con un <b>.com</b> o <b>.com.mx</b> incluido,
            hosting rápido en SSD y soporte humano. Sin letras chiquitas.
          </p>

          <form className="search" onSubmit={check}>
            <Icon name="search" />
            <input
              ref={inputRef}
              type="text"
              placeholder="tu-marca"
              value={q}
              onChange={(e) => setQ(e.target.value)}
              spellCheck="false"
              autoComplete="off" />
            
            <div className="tld-group">
              {[".com", ".com.mx", ".mx"].map((t) =>
              <button key={t} type="button" className={`tld ${tld === t ? "on" : ""}`} onClick={() => setTld(t)}>{t}</button>
              )}
            </div>
            <button className="search-go" type="submit" aria-label="Buscar dominio en soloweb.mx">
              <Icon name="arrow" />
            </button>
          </form>

          <div className="hero-actions">
            <a href="https://soloweb.mx/dominios" target="_blank" rel="noopener" className="btn btn-primary">Buscar mi dominio en soloweb.mx <span className="arr"><Icon name="arrow" /></span></a>
            <a href="#porque" className="btn btn-ghost">¿Cómo funciona?</a>
          </div>

          <div className="hero-meta">
            <div><b>15 min</b><span>Sitio publicado</span></div>
            <div><b>99.9%</b><span>Uptime garantizado</span></div>
            <div><b>+8,400</b><span>Sitios activos</span></div>
          </div>
        </div>

        <div className="hero-visual">
          <image-slot
            id="hero-photo"
            shape="rounded"
            radius="28"
            placeholder="Pareja de empresarios celebrando el inicio de su empresa"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          </image-slot>
          <div className="floating">
            <div className="l1">Tu dominio</div>
            <div className="l2"><span className="ok"></span>mi-tienda.com.mx</div>
          </div>
          <div className="badge">
            <span className="ico">$</span>
            <div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', letterSpacing: '0.04em' }}>AHORRAS</div>
              <div style={{ fontWeight: 600 }}>$420 MXN</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ───────── Logos strip ─────────
function LogosStrip() {
  const items = ["+8,400 sitios activos", "Hosting en SSD", "99.9% uptime", "Soporte en español", "Pagos MXN", "Factura CFDI 4.0"];
  return (
    <div className="logos-strip">
      <div className="wrap row">
        <span className="lbl"></span>
        {items.map((n) => <span key={n}>{n}</span>)}
      </div>
    </div>);

}

// ───────── Benefits ─────────
function Benefits() {
  const items = [
  { ico: "globe", t: "Dominio gratis", d: "Incluido el primer año con cualquier plan de hosting .com  o .com.mx — a tu nombre, siempre." },
  { ico: "bolt", t: "Espacio", d: "Espacio para tu página Web y Correos en Servidores con discos SSD" },
  { ico: "shield", t: "SSL y respaldos", d: "Certificado HTTPS gratis, respaldos automáticos." },
  { ico: "headset", t: "Soporte en español", d: "Hablamos contigo, no con un bot. Lunes a sábado, por chat, correo o WhatsApp." }];

  return (
    <section className="benefits" id="porque">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="eyebrow">Por qué nosotros</span>
            <h2>Todo lo que necesitas <span className="serif-it">incluido</span>.</h2>
          </div>
          <p>Sin sorpresas en la renovación. Sin extras escondidos. Hosting hecho para que tu sitio se vea bien y cargue rápido en México.</p>
        </div>
        <div className="benefits-grid">
          {items.map((it, i) =>
          <div className="bcard" key={i}>
              <div className="ico"><Icon name={it.ico} /></div>
              <h4>{it.t}</h4>
              <p>{it.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────── Plans ─────────
function Plans() {
  const plans = [
  {
    name: "Personal", price: "56", was: "70", mo: "/mes",
    desc: "Para tu primera página o blog",
    link: "https://soloweb.mx/store/hosting-windows/personal?promocode=G53B11KLHS",
    features: [
    ["Dominio gratis 1er año", true],
    ["5 GB SSD", true],
    ["1 sitio Web", true],
    ["SSL incluido + Respaldos", true],
    ["Correos corporativos", false]],

    cta: "Personal"
  },
  {
    name: "Emprendedor", price: "118", was: "148", mo: "/mes",
    desc: "Para emprendedores y tiendas",
    link: "https://soloweb.mx/store/hosting-windows/emprendedor?promocode=G53B11KLHS",
    featured: true,
    features: [
    ["Dominio gratis 1er año", true],
    ["15 GB SSD + CDN", true],
    ["1 Sitio Web", true],
    ["SSL + Respaldos", true],
    ["Correos corporativos", true]],

    cta: "Elegir Emprendedor"
  },
  {
    name: "Corporativo", price: "480", was: "577", mo: "/mes",
    desc: "Para tiendas y agencias",
    link: "https://soloweb.mx/store/hosting-windows/corporativo",
    features: [
    ["Dominio gratis 1er año", true],
    ["30 GB SSD + CDN", true],
    ["1 Sitio Web", true],
    ["SSL + Respaldos", true],
    ["Correos con preferencia", true]],

    cta: "Elegir Corporativo"
  }];

  return (
    <section id="planes">
      <div className="wrap">
        <div className="s-head">
          <div className="l">
            <span className="eyebrow">Planes</span>
            <h2>Un plan, un dominio <span className="serif-it">gratis</span>.</h2>
          </div>
          <p>Precios en pesos mexicanos, sin IVA.</p>
        </div>
        <div className="plans-grid">
          {plans.map((p, i) =>
          <div className={`plan ${p.featured ? "featured" : ""}`} key={i}>
              {p.featured && <div className="plan-tag">Más popular</div>}
              <div className="plan-name">{p.name}</div>
              <h3>{p.desc}</h3>
              <div className="price-row">
                <span className="price-now">${p.price}</span>
                <div style={{ display: 'flex', flexDirection: 'column' }}>
                  <span className="price-mo">MXN{p.mo}</span>
                  <span className="price-was">antes ${p.was}</span>
                </div>
              </div>
              <div className="gift"><Icon name="gift" /> Dominio gratis incluido</div>
              <ul>
                {p.features.map(([f, on], k) =>
              <li key={k}>
                    <span className={`li-check ${on ? "" : "dim"}`}>
                      {on ? <Icon name="check" /> : <span style={{ fontSize: 14, lineHeight: 1 }}>−</span>}
                    </span>
                    {f}
                  </li>
              )}
              </ul>
              <a href={p.link || `https://soloweb.mx/dominios?plan=${encodeURIComponent(p.name.toLowerCase())}`} target="_blank" rel="noopener" className="btn btn-plan">{p.cta} <Icon name="arrow" /></a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────── FAQ ─────────
function FAQ() {
  const items = [
  { q: "¿Realmente el dominio es gratis?", a: "Sí. Al contratar cualquier plan anual de hosting incluimos el registro de tu dominio .com, o .com.mx por el primer año, sin costo. La renovación a partir del segundo año tiene tarifa estándar publicada — sin sorpresas." },
  { q: "¿El dominio queda a mi nombre?", a: "Siempre. Tú eres el titular legal del dominio en el registro público del NIC. Puedes transferirlo, administrarlo  desde tu panel de clientes o transferirlo a otro proveedor después de 60 días." },
  { q: "¿Cuánto tarda en quedar listo mi sitio?", a: "El hosting se activa en minutos. Si ya tienes tu sitio, lo migramos sin costo en menos de 24 horas. Si empiezas de cero, nuestro instalador puede dejar WordPress listo en menos de 15 minutos o puedes usar el diseñador en línea" },
  { q: "¿Qué pasa al renovar?", a: "El hosting se renueva al precio regular, sin aumentos sorpresa. El dominio se renueva a la tarifa estándar de cada extensión (publicada y fija). Te avisamos 90 días antes y puedes cancelar cuando quieras." },
  { q: "¿Puedo migrar mi sitio actual?", a: "Sí, lo hacemos por ti sin costo. Solo necesitas darnos acceso a tu hosting actual y nosotros nos encargamos del traslado, incluyendo bases de datos, correos y configuración SSL." },
  { q: "¿Aceptan pagos en pesos mexicanos?", a: "Por supuesto. Aceptamos tarjeta, transferencia SPEI, OXXO, PayPal y Mercado Pago. Facturamos con CFDI 4.0." }];

  const [open, setOpen] = useState(0);
  return (
    <section className="faq" id="faq">
      <div className="wrap faq-layout">
        <div>
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 style={{ marginTop: 12 }}>Todo lo que <span className="serif-it">querías saber</span>.</h2>
          <p style={{ marginTop: 18 }}>¿No encuentras tu duda? Escríbenos por WhatsApp y te respondemos en menos de 5 minutos en horario laboral.</p>
          <a href="https://api.whatsapp.com/send?phone=5217222714555" target="_blank" rel="noopener" className="btn btn-secondary" style={{ marginTop: 28 }}>Hablar con alguien <Icon name="arrow" /></a>
        </div>
        <div className="faq-list">
          {items.map((it, i) =>
          <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle"><Icon name="plus" /></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────── CTA / Contact ─────────
function CTA() {
  const [sent, setSent] = useState(false);
  const onSubmit = (e) => {e.preventDefault();setSent(true);setTimeout(() => setSent(false), 3200);};
  return (
    <section id="contacto">
      <div className="wrap">
        <div className="cta">
          <div>
            <span className="eyebrow" style={{ color: 'var(--accent-2)' }}>Contacto</span>
            <h2 style={{ marginTop: 12 }}>¿Listo para empezar? <br /><span style={{ color: 'var(--accent)' }} className="serif-it">Cuéntanos.</span></h2>
            <p>Te ayudamos a elegir el plan correcto y te regalamos tu dominio. Sin compromiso, sin venta agresiva — solo claridad.</p>
            <div style={{ display: 'flex', gap: 18, marginTop: 32, color: 'rgba(255,255,255,.78)', fontSize: 14, flexWrap: 'wrap' }}>
              <span><b style={{ color: '#fff', fontWeight: 600 }}>contacto</b>@soloweb.mx</span>
              <span><b style={{ color: '#fff', fontWeight: 600 }}>+52</b> 722 271 4555</span>
            </div>
          </div>
          <form className="form" onSubmit={onSubmit}>
            <input type="text" placeholder="Tu nombre" required />
            <input type="email" placeholder="correo@ejemplo.com" required />
            <textarea placeholder="Cuéntanos qué tipo de sitio quieres lanzar…"></textarea>
            <button type="submit" className="btn btn-primary">
              {sent ? "✓ Recibido — te escribimos" : <>Enviar mensaje <span className="arr"><Icon name="arrow" /></span></>}
            </button>
          </form>
        </div>
      </div>
    </section>);

}

// ───────── Footer ─────────
function Footer() {
  return (
    <footer>
      <div className="wrap foot">
        <div className="foot-top">
          <div>
            <a href="#" className="logo" style={{ marginBottom: 16 }}>
              <span className="logo-mark"><img src="assets/soloweb-logo.png" alt="SoloWeb" /></span>
              <span className="brand">dominios<b>gratis.com.mx</b></span>
            </a>
            <p className="foot-blurb">Un servicio de <a href="https://soloweb.mx" target="_blank" rel="noopener" style={{ color: 'var(--primary-2)', fontWeight: 600 }}>soloweb.mx</a> — hosting mexicano con dominio incluido. Hecho para quien quiere lanzar su sitio sin complicarse.</p>
          </div>
          <div>
            <h5>Producto</h5>
            <ul>
              <li><a href="#planes">Planes</a></li>
              <li><a href="#dominio">Dominio gratis</a></li>
              <li><a href="#">Migración gratis</a></li>
              <li><a href="#">Correos corporativos</a></li>
            </ul>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li><a href="#porque">Por qué nosotros</a></li>
              <li><a href="#faq">Preguntas</a></li>
              <li><a href="#">Términos</a></li>
              <li><a href="#">Privacidad</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li><a href="#contacto">contacto@soloweb.mx</a></li>
              <li><a href="https://api.whatsapp.com/send?phone=5217222714555" target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="#">Estado del servicio</a></li>
            </ul>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 dominiosgratis.com.mx · Un servicio de SoloWeb</span>
          <span>Hecho con <span className="serif-it" style={{ color: 'var(--accent)' }}>cariño</span> en México</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Nav, Hero, LogosStrip, Benefits, Plans, FAQ, CTA, Footer, Icon });