/* Secciones de la landing de SimplifAI */
const { useState: useStateS } = React;

/* ---------- Hero ---------- */
function Hero() {
  const h = window.CONTENT.hero;
  const [email, setEmail] = useStateS("");
  const [sent, setSent] = useStateS(false);
  function submit(e) {
    e.preventDefault();
    if (/.+@.+\..+/.test(email)) setSent(true);
  }
  return (
    <header className="hero" id="top">
      <div className="hero__glow" aria-hidden="true"></div>
      <div className="container hero__grid">
        <div className="hero__copy">
          <div className="eyebrow"><span className="eyebrow__dot"></span>{h.eyebrow}</div>
          <h1 className="hero__title">
            <span className="hero__l1">{h.title[0]}</span><span className="grad-text hero__accent">{h.title[1]}</span>
          </h1>
          <p className="hero__sub">{h.sub}</p>
          <form className="hero__form" onSubmit={submit}>
            {!sent ?
            <React.Fragment>
                <input
                type="email"
                className="hero__input"
                placeholder="tu@email.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required />
              
                <button type="submit" className="btn btn--grad">{h.ctaPrimary}</button>
              </React.Fragment> :

            <div className="hero__sent">✓ ¡Listo! Te avisamos apenas abramos el acceso.</div>
            }
          </form>
          <div className="hero__row">
            <a href="#demo" className="btn btn--ghost">{h.ctaSecondary} →</a>
            <span className="hero__note">{h.note}</span>
          </div>
        </div>
        <div className="hero__visual">
          <WhatsAppMock />
          <div className="hero__chip hero__chip--1">+38% en ventas por chat</div>
          <div className="hero__chip hero__chip--2">Responde en 3 seg</div>
        </div>
      </div>
    </header>);

}

/* ---------- Logos ---------- */
function Logos() {
  const l = window.CONTENT.logos;
  return (
    <section className="logos">
      <div className="container">
        <p className="logos__title">{l.title}</p>
        <div className="logos__row">
          {l.items.map((name) =>
          <span key={name} className="logos__item">{name}</span>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Cómo funciona ---------- */
function Steps() {
  const s = window.CONTENT.steps;
  return (
    <section className="section steps" id="como-funciona">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>{s.eyebrow}</div>
          <h2 className="section__title">{s.title}</h2>
        </div>
        <div className="steps__grid">
          {s.items.map((it, i) =>
          <div className="step-card" key={it.n}>
              <div className="step-card__n">{it.n}</div>
              <h3 className="step-card__title">{it.title}</h3>
              <p className="step-card__body">{it.body}</p>
              {i < s.items.length - 1 && <div className="step-card__arrow" aria-hidden="true">→</div>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Features ---------- */
function Features() {
  const f = window.CONTENT.features;
  const icons = [
    "assets/feat-responde.png",
    "assets/feat-catalogo.png",
    "assets/feat-api.png",
    "assets/feat-marca.png",
    "assets/feat-humano.png",
    "assets/feat-metricas.png",
  ];
  return (
    <section className="section features" id="funciones" style={{ color: "rgb(255, 255, 255)" }}>
      <div className="container">
        <div className="section__head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>{f.eyebrow}</div>
          <h2 className="section__title" style={{ color: "rgb(0, 0, 0)" }}>{f.title}</h2>
        </div>
        <div className="features__grid">
          {f.items.map((it, i) =>
          <div className="feature-card" key={it.title}>
              <div className="feature-card__icon" aria-hidden="true"><img src={icons[i]} alt="" /></div>
              <h3 className="feature-card__title" style={{ color: "rgb(0, 0, 0)" }}><span style={{ color: "rgb(0, 0, 0)" }}>{it.title}</span></h3>
              <p className="feature-card__body">{it.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Meta Business Partner ---------- */
function PartnerIcon({ name }) {
  const common = { width: 26, height: 26, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === "shield") return <svg {...common}><path d="M12 3l7 3v5c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6l7-3z" /><path d="M9 12l2 2 4-4" /></svg>;
  if (name === "scales") return <svg {...common}><path d="M12 3v18" /><path d="M7 21h10" /><path d="M5 7h14" /><path d="M8 4l-4 9a3 3 0 006 0L6 4" /><path d="M18 4l-4 9a3 3 0 006 0l-2-9" /></svg>;
  if (name === "bolt") return <svg {...common}><path d="M13 2L4 14h7l-1 8 9-12h-7l1-8z" /></svg>;
  return <svg {...common}><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V8a4 4 0 018 0v3" /></svg>;
}

function Partner() {
  const cards = [
  { ico: "shield", title: "Menor riesgo de bloqueos", body: "Tu número opera sobre la API oficial, no en apps truchas que Meta puede dar de baja." },
  { ico: "scales", title: "Alineado a las políticas de Meta", body: "Tu automatización cumple las reglas, así tu cuenta queda siempre en regla." },
  { ico: "bolt", title: "Acceso a la API real de WhatsApp", body: "Funciones oficiales: catálogo, plantillas, botones y cuenta verificada." },
  { ico: "lock", title: "Escalás sin hacks", body: "Crecé en volumen de mensajes sin trucos que pongan en riesgo tu operación." }];

  return (
    <section className="partner" id="partner">
      <div className="partner__bg" aria-hidden="true" style={{ opacity: "1" }}></div>
      <div className="container partner__grid">
        <div className="partner__visual" aria-hidden="true">
          <div className="emblem">
            <div className="emblem__ring emblem__ring--3"></div>
            <div className="emblem__ring emblem__ring--2"></div>
            <div className="emblem__ring emblem__ring--1"></div>
            <div className="emblem__core">
              <img src="assets/meta.png" alt="Meta Business Partner" className="emblem__core-img" />
            </div>
            <div className="emblem__bubble emblem__bubble--1"><img src="assets/whatsapp.png" alt="WhatsApp" /></div>
            <div className="emblem__bubble emblem__bubble--2"><img src="assets/whatsapp.png" alt="WhatsApp" /></div>
            <div className="emblem__bubble emblem__bubble--3"><img src="assets/whatsapp.png" alt="WhatsApp" /></div>
          </div>
        </div>
        <div className="partner__content">
          <div className="partner__badges">
            <span className="partner__badge"><span className="partner__badge-dot"></span>Meta Business Partner</span>
            <span className="partner__badge"><span className="partner__badge-dot partner__badge-dot--green"></span>WhatsApp Solution Partner</span>
          </div>
          <h2 className="section__title section__title--left partner__title">¿Por qué importa que seamos Meta Business Partner?</h2>
          <p className="partner__sub">Trabajamos directamente con Meta para darte estabilidad, cumplimiento y acceso oficial a la API de WhatsApp. Sin atajos ni riesgos.</p>
          <div className="partner__cards">
            {cards.map((c) =>
            <div className="partner-card" key={c.title}>
                <div className="partner-card__icon"><PartnerIcon name={c.ico} /></div>
                <h3 className="partner-card__title">{c.title}</h3>
                <p className="partner-card__body">{c.body}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Precios ---------- */
function Pricing() {
  const p = window.CONTENT.pricing;
  const [billing, setBilling] = useStateS("monthly");
  const periodLabel = { monthly: "/mes", quarterly: "/trimestre", annual: "/año" };
  const priceKey = { monthly: "priceMonthly", quarterly: "priceQuarterly", annual: "priceAnnual" };
  return (
    <section className="section pricing" id="precios">
      <div className="container">
        <div className="section__head">
          <div className="eyebrow eyebrow--center"><span className="eyebrow__dot"></span>{p.eyebrow}</div>
          <h2 className="section__title">{p.title}</h2>
          <p className="section__sub">{p.sub}</p>
          <div className="toggle">
            <button className={"toggle__opt" + (billing === "monthly" ? " is-active" : "")} onClick={() => setBilling("monthly")}>{p.monthlyLabel}</button>
            <button className={"toggle__opt" + (billing === "quarterly" ? " is-active" : "")} onClick={() => setBilling("quarterly")}>
              {p.quarterlyLabel} <span className="toggle__badge">{p.quarterlyBadge}</span>
            </button>
            <button className={"toggle__opt" + (billing === "annual" ? " is-active" : "")} onClick={() => setBilling("annual")}>
              {p.annualLabel} <span className="toggle__badge">{p.annualBadge}</span>
            </button>
          </div>
        </div>
        <div className="pricing__grid">
          {p.plans.map((plan) => {
            const price = plan[priceKey[billing]];
            return (
              <div className={"plan" + (plan.featured ? " plan--featured" : "")} key={plan.name}>
                {plan.featured && <div className="plan__badge">Más elegido</div>}
                <h3 className="plan__name">{plan.name}</h3>
                <p className="plan__tagline">{plan.tagline}</p>
                <div className="plan__price">
                  {price !== null ?
                  <React.Fragment>
                      <span className="plan__currency">$</span>
                      <span className="plan__amount">{price}</span>
                      <span className="plan__period">{periodLabel[billing]}</span>
                    </React.Fragment> :

                  <span className="plan__custom">A medida</span>
                  }
                </div>
                <button className={"btn btn--block " + (plan.featured ? "btn--grad" : "btn--outline")}>{plan.cta}</button>
                <ul className="plan__features">
                  {plan.features.map((feat) =>
                  <li key={feat}><span className="plan__check" aria-hidden="true">✓</span>{feat}</li>
                  )}
                </ul>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ---------- FAQ ---------- */
function Faq() {
  const f = window.CONTENT.faq;
  const [open, setOpen] = useStateS(0);
  return (
    <section className="section faq" id="faq">
      <div className="container faq__wrap">
        <div className="faq__head">
          <div className="eyebrow"><span className="eyebrow__dot"></span>{f.eyebrow}</div>
          <h2 className="section__title section__title--left">{f.title}</h2>
        </div>
        <div className="faq__list">
          {f.items.map((it, i) =>
          <div className={"faq-item" + (open === i ? " is-open" : "")} key={i}>
              <button className="faq-item__q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-item__icon" aria-hidden="true">{open === i ? "−" : "+"}</span>
              </button>
              <div className="faq-item__a"><p>{it.a}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- CTA final ---------- */
function FinalCta() {
  const c = window.CONTENT.finalCta;
  const [email, setEmail] = useStateS("");
  const [sent, setSent] = useStateS(false);
  function submit(e) {
    e.preventDefault();
    if (/.+@.+\..+/.test(email)) setSent(true);
  }
  return (
    <section className="final-cta" id="demo">
      <div className="container final-cta__inner">
        <div className="final-cta__glow" aria-hidden="true"></div>
        <h2 className="final-cta__title">{c.title}</h2>
        <p className="final-cta__sub">{c.sub}</p>
        <form className="final-cta__form" onSubmit={submit}>
          {!sent ?
          <React.Fragment>
              <input type="email" className="hero__input hero__input--dark" placeholder={c.placeholder} value={email} onChange={(e) => setEmail(e.target.value)} required />
              <button type="submit" className="btn btn--light">{c.cta}</button>
            </React.Fragment> :

          <div className="hero__sent hero__sent--dark">✓ ¡Sumado! Te escribimos pronto.</div>
          }
        </form>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function Footer() {
  const f = window.CONTENT.footer;
  const hrefMap = {
    "Términos": "terminos-y-condiciones.html",
    "Privacidad": "politica-de-privacidad.html",
    "Eliminación de datos": "eliminacion-de-datos.html",
    "Cómo funciona": "#como-funciona",
    "Funciones": "#funciones",
    "Precios": "#precios",
    "Preguntas": "#faq",
  };
  return (
    <footer className="footer">
      <div className="container footer__grid">
        <div className="footer__brand">
          <div className="logo logo--img"><img src="assets/logo-simplifai.png" alt="SimplifAI" className="brand-logo" /></div>
          <p className="footer__tagline">{f.tagline}</p>
          <p className="footer__loc">{f.location}</p>
        </div>
        {f.cols.map((col) =>
        <div className="footer__col" key={col.title}>
            <div className="footer__col-title">{col.title}</div>
            <ul>
              {col.links.map((link) => <li key={link}><a href={hrefMap[link] || "#top"}>{link}</a></li>)}
            </ul>
          </div>
        )}
      </div>
      <div className="container footer__bottom">
        <span>© {new Date().getFullYear()} {window.CONTENT.brand}. Todos los derechos reservados.</span>
        <span>simplifai.com.ar</span>
      </div>
    </footer>);

}

Object.assign(window, { Hero, Logos, Steps, Features, Partner, Pricing, Faq, FinalCta, Footer });