/* parts3.jsx — Planes · Testimonios · FAQ · CTA final · Footer */

const fmt = (n) => n.toLocaleString("es-CO");

const PLANS = [
  {
    name: "Gourmet Express",
    tag: "Para restaurantes que quieren profesionalizar sus domicilios sin aumentar nómina.",
    subtitle: "Empieza a entregar como una marca premium. Desde solo $6.633 por día.",
    annualSubtitle: "Desde solo $5.526 por día · ahorras $398.000 al año (¡2 meses gratis!)",
    monthly: 199000,
    annualMonthly: 165800,
    annualTotal: 1990000,
    annualSave: 398000,
    feats: [
      "Domicilios ilimitados",
      "Despacha pedidos en segundos",
      "Rastreo en tiempo real para el cliente",
      "Asignación rápida de repartidores",
    ],
  },
  {
    name: "Premium Partner", pop: true,
    badge: "🏆 MÁS ELEGIDO POR RESTAURANTES EN CAJICÁ",
    tag: "El favorito de los restaurantes que ya venden todos los días.",
    subtitle: "Automatiza tu operación y libera tiempo de tu equipo. Desde solo $12.966 por día.",
    annualSubtitle: "Desde solo $10.800 por día · ahorras $780.000 al año (¡2 meses gratis!)",
    monthly: 389000,
    annualMonthly: 324000,
    annualTotal: 3890000,
    annualSave: 780000,
    feats: [
      "Domicilios ilimitados",
      "Dashboard avanzado con reportes",
      "Notificaciones automáticas por WhatsApp",
      "Menos riesgo de comida fría",
      "Reembolso si el daño es culpa nuestra",
    ],
  },
  {
    name: "Elite Gastro",
    tag: "Para restaurantes que no pueden permitirse errores en la entrega.",
    subtitle: "La experiencia logística más avanzada de Cajicá. Desde solo $21.633 por día.",
    annualSubtitle: "Desde solo $18.026 por día · ahorras $1.300.000 al año (¡2 meses gratis!)",
    monthly: 649000,
    annualMonthly: 540800,
    annualTotal: 6490000,
    annualSave: 1300000,
    feats: [
      "Domicilios ilimitados",
      "Despacho automático con IA",
      "Cliente informado automáticamente",
      "Prioridad máxima de asignación",
      "Soporte VIP",
      "Cambia de plan cuando quieras",
    ],
    annualLastFeat: "Contrato blindado por 12 meses sin variaciones de tarifa",
  },
];

function Plans({ onContacto }) {
  const [annual, setAnnual] = useState(true);
  const [selected, setSelected] = useState(PLANS.findIndex((p) => p.pop));
  const [shown, setShown] = useState(false);
  const secRef = React.useRef(null);
  useEffect(() => {
    const el = secRef.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setShown(true); io.disconnect(); } });
    }, { threshold: 0.08, rootMargin: "0px 0px -8% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const rv = shown ? " in" : "";
  return (
    <section className="section" id="planes" ref={secRef}>
      <div className="wrap">
        <div className={"section-head center reveal" + rv} style={{ maxWidth: 820 }}>
          <span className="eyebrow center">Planes de suscripción</span>
          <h2>Tus platos tardan horas en construirse. No dejes que un mal domicilio los arruine.</h2>
          <p>Treego convierte tus domicilios en una extensión de la experiencia premium de tu restaurante.</p>
          <div style={{ marginTop: 30, display: "flex", justifyContent: "center" }}>
            <div className="plans-toggle">
              <button className={!annual ? "on" : ""} onClick={() => setAnnual(false)}>Mensual</button>
              <button className={annual ? "on" : ""} onClick={() => setAnnual(true)}>Anual<span className="save">−17%</span></button>
            </div>
          </div>
        </div>
        <div className="plans-grid">
          {PLANS.map((p, i) => {
            const price = annual ? p.annualMonthly : p.monthly;
            const subtitle = annual ? p.annualSubtitle : p.subtitle;
            const feats = annual && p.annualLastFeat
              ? [...p.feats.slice(0, -1), p.annualLastFeat]
              : p.feats;
            const isSel = selected === i;
            return (
              <div className={"plan" + (p.pop ? " pop" : "") + (isSel ? " selected" : "") + " reveal" + rv} key={p.name} style={{ transitionDelay: `${i * 80}ms` }} onClick={() => setSelected(i)} role="button" aria-pressed={isSel}>
                {p.pop && <div className="plan-pop-badge">{p.badge}</div>}
                <div className="plan-name">{p.name}</div>
                <div className="plan-tag">{p.tag}</div>
                <div className="plan-price">
                  <span className="cur">$</span>
                  <span className="amt" key={annual ? "anual" : "mensual"}>{fmt(price)}</span>
                  <span className="per">COP / mes</span>
                </div>
                {annual && (
                  <div className="plan-billed">(Cobrado anualmente: ${fmt(p.annualTotal)} COP)</div>
                )}
                <div className="plan-perday" key={annual ? "perday-a" : "perday-m"}>
                  {subtitle}
                </div>
                <div className="plan-feats">
                  {feats.map((f) => (
                    <div className="plan-feat" key={f}><span className="ck"><Icon name="check" /></span>{f}</div>
                  ))}
                </div>
                <button className={"btn " + (isSel ? "btn-primary" : "btn-outline")} onClick={(e) => { e.stopPropagation(); setSelected(i); onContacto(); }}>
                  Elegir {p.name.split(" ")[0]} <Icon name="arrow" />
                </button>
              </div>
            );
          })}
        </div>
        <p style={{ textAlign: "center", marginTop: 28, fontSize: 14, color: "var(--ink-3)" }}>
          ¿Una operación fuera de lo común? <a href="#" style={{ color: "var(--g3)", fontWeight: 600 }} onClick={(e) => { e.preventDefault(); onContacto(); }}>Hablemos de un plan a medida →</a>
        </p>
      </div>
    </section>
  );
}

/* ---- Testimonios ---- */
const TESTI = [
  { q: "Desde que entregamos con Treego, dejamos de recibir quejas por demoras. Los platos llegan como salen de la cocina.", who: "Mariana Gómez", role: "Dueña · Trattoria del Bosque, Chía" },
  { q: "Ver el perfil del repartidor y su calificación nos da una tranquilidad que ninguna otra app nos daba.", who: "Felipe Andrade", role: "Chef · Dark Kitchen Sabana" },
  { q: "El rango de llegada constante nos cambió la operación: empacamos en el momento justo y nada se enfría.", who: "Lucía Restrepo", role: "Gerente · Repostería Las Flores, Cajicá" },
];
function Testimonials() {
  return (
    <section className="section how" id="testimonios">
      <div className="wrap">
        <div className="section-head center reveal">
          <span className="eyebrow center">Lo que dicen</span>
          <h2>Restaurantes que ya no se preocupan por el domicilio.</h2>
        </div>
        <div className="testi-grid">
          {TESTI.map((t, i) => (
            <div className="testi reveal" key={t.who} style={{ transitionDelay: `${i * 80}ms` }}>
              <div className="stars">{[0, 1, 2, 3, 4].map((s) => <Star key={s} />)}</div>
              <blockquote>“{t.q}”</blockquote>
              <div className="testi-by">
                <div className="ph"><Avatar name={t.who} /></div>
                <div className="who"><b>{t.who}</b><span>{t.role}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- FAQ ---- */
const FAQS = [
  ["¿Qué incluye exactamente cada plan?", "Todos los planes incluyen domicilios ilimitados: pide todos los que necesites, sin límite mensual ni comisión adicional por entrega. Lo que cambia entre planes es el nivel del dashboard y beneficios como prioridad en horas pico, perfil del repartidor o soporte dedicado."],
  ["¿Hay límite de domicilios al mes?", "No. Con cualquier plan puedes pedir todos los domicilios que necesites, sin restricciones ni cobros extra por unidad. Solo pagas la suscripción mensual y la tarifa de cada envío según la distancia."],
  ["¿Cómo garantizan la puntualidad?", "Optimizamos rutas y asignamos al repartidor capacitado más cercano y disponible. Por eso la llegada al restaurante se mantiene en un rango constante, y no en un estimado abierto."],
  ["¿Cómo funciona la política de multas?", "Todos los planes tienen la misma ventana de tolerancia de espera: 5 minutos. Pasada esa ventana hay 5 minutos de cortesía; superados, se aplica una multa de $800 COP por minuto — igual para todos los planes — para no afectar al resto de la red. Todo queda registrado en tu panel."],
  ["¿Puedo ver quién va a recoger mi pedido?", "Sí. Desde el plan Premium Partner verás el perfil completo del repartidor asignado: foto, hoja de vida, capacitaciones y calificaciones."],
  ["¿En qué zonas operan?", "Operamos en Cajicá y sus alrededores en la Sabana Centro — casco urbano, veredas y municipios vecinos — con expansión activa. Escríbenos para confirmar cobertura de tu restaurante."],
];
function FAQ() {
  const MULTA_IDX = FAQS.findIndex(([q]) => q.toLowerCase().includes("multas"));
  const [open, setOpen] = useState(MULTA_IDX);
  return (
    <section className="section" id="faq">
      <div className="wrap faq-grid">
        <div className="reveal">
          <span className="eyebrow">Preguntas frecuentes</span>
          <h2 style={{ fontSize: "clamp(32px,3.6vw,46px)", marginTop: 18 }}>Todo claro antes de empezar.</h2>
          <p style={{ marginTop: 18, color: "var(--ink-2)", fontSize: 16 }}>¿Te queda una duda por fuera? Escríbenos y te respondemos el mismo día.</p>
        </div>
        <div className="faq-list reveal">
          {FAQS.map(([q, a], i) => (
            <div className={"faq-item" + (open === i ? " open" : "")} key={q}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                {q}<span className="pm"><Icon name={open === i ? "minus" : "plus"} /></span>
              </button>
              <div className="faq-a" style={{ maxHeight: open === i ? 360 : 0 }}>
                <div className="inner">{a}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- CTA final ---- */
function FinalCTA({ onContacto }) {
  return (
    <section className="section cta">
      <div className="wrap">
        <div className="cta-card reveal">
          <div className="cta-glow"></div>
          <span className="eyebrow center">Empiece hoy</span>
          <h2>Su primer domicilio con Treego puede ser esta semana.</h2>
          <p>Escríbanos por WhatsApp o correo. Le mostramos el panel, los planes y cómo Treego se adapta a su restaurante.</p>
          <div className="cta-actions">
            <button className="btn btn-primary btn-lg" onClick={onContacto}>Contáctanos <Icon name="arrow" /></button>
            <a className="cta-link" href="#planes">o explore los planes →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer({ onLogin }) {
  const cols = [
    ["Producto", [
      ["Cómo funciona", "#como"],
      ["Planes", "#planes"],
      ["Repartidores", "#repartidores"],
      ["Panel del restaurante", { action: "login" }],
    ]],
    ["Empresa", [
      ["Sobre Treego", "/pages/sobre.html"],
      ["Cobertura", "/pages/cobertura.html"],
      ["Trabaja con nosotros", "/pages/trabaja.html"],
      ["Blog", "/pages/blog.html"],
    ]],
    ["Recursos", [
      ["Centro de ayuda", "/pages/ayuda.html"],
      ["Contacto", "/pages/contacto.html"],
      ["Términos", "/pages/terminos.html"],
      ["Privacidad", "/pages/privacidad.html"],
      ["Política SGI", "/pages/politica-sgi"],
    ]],
  ];
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div className="footer-brand">
            <img loading="lazy" className="ficon" src="/assets/streego-icon.png?v=2" alt="Treego" />
            <p>Domicilios premium para restaurantes. Para que la reputación de sus platos llegue intacta hasta el último kilómetro.</p>
          </div>
          {cols.map(([h, links]) => (
            <div className="footer-col" key={h}>
              <h5>{h}</h5>
              {links.map(([label, dest]) =>
                typeof dest === "object"
                  ? <a href="#" key={label} onClick={(e) => { e.preventDefault(); if (typeof onLogin === "function") onLogin(); }}>{label}</a>
                  : <a href={dest} key={label}>{label}</a>
              )}
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <span>© 2026 Treego · Sabana Centro, Colombia. Todos los derechos reservados.</span>
          <div className="footer-soc">
            <a href="https://instagram.com/TreegoS.A.S" target="_blank" rel="noopener noreferrer" aria-label="Instagram"><Icon name="camera" style={{ width: 17, height: 17 }} /></a>
            <a href="https://wa.me/573024523802" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp"><Icon name="phone" style={{ width: 17, height: 17 }} /></a>
            <a href="/pages/cobertura.html" aria-label="Cobertura"><Icon name="pin" style={{ width: 17, height: 17 }} /></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Plans, Testimonials, FAQ, FinalCTA, Footer });