// Initium — Commercial sections
const { useState: useS, useEffect: useE } = React;

function Icon({ name, size = 20 }) {
  const sw = 1.5;
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "cart":      return <svg {...c}><path d="M3 4h2l2.5 11.5a2 2 0 0 0 2 1.5h7a2 2 0 0 0 2-1.4L21 8H6" /><circle cx="10" cy="20" r="1" /><circle cx="17" cy="20" r="1" /></svg>;
    case "megaphone": return <svg {...c}><path d="M3 11v2a1 1 0 0 0 1 1h2l9 4V6L6 10H4a1 1 0 0 0-1 1z" /><path d="M18 8a4 4 0 0 1 0 8" /></svg>;
    case "cube":      return <svg {...c}><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z" /><path d="M4 7.5l8 4.5 8-4.5M12 12v9" /></svg>;
    case "globe":     return <svg {...c}><circle cx="12" cy="12" r="9" /><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" /></svg>;
    case "node":      return <svg {...c}><circle cx="6" cy="12" r="2.5" /><circle cx="18" cy="6" r="2.5" /><circle cx="18" cy="18" r="2.5" /><path d="M8.2 11l7.6-4M8.2 13l7.6 4" /></svg>;
    case "split":     return <svg {...c}><path d="M4 6h4l5 6 5-6h2M4 18h4l5-6" /></svg>;
    case "bank":      return <svg {...c}><path d="M3 10l9-6 9 6M5 10v8M19 10v8M9 10v8M15 10v8M3 20h18" /></svg>;
    case "in":        return <svg {...c}><path d="M4 12h12m0 0l-4-4m4 4l-4 4M20 4v16" /></svg>;
    case "shield":    return <svg {...c}><path d="M12 3l8 3v6c0 5-3.6 8.5-8 9-4.4-.5-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "scan":      return <svg {...c}><path d="M4 8V5a1 1 0 0 1 1-1h3M4 16v3a1 1 0 0 0 1 1h3M20 8V5a1 1 0 0 0-1-1h-3M20 16v3a1 1 0 0 1-1 1h-3" /><path d="M4 12h16" /></svg>;
    case "lock":      return <svg {...c}><rect x="4" y="11" width="16" height="10" rx="1.5" /><path d="M8 11V8a4 4 0 0 1 8 0v3" /></svg>;
    case "chevron":   return <svg {...c}><path d="M6 9l6 6 6-6" /></svg>;
    case "arrow":     return <svg {...c}><path d="M5 12h14m0 0l-5-5m5 5l-5 5" /></svg>;
    case "wa":        return <svg viewBox="0 0 24 24" width={size} height={size} fill="currentColor"><path d="M19.05 4.91A10 10 0 0 0 4.45 18.5L3 22l3.59-1.41A10 10 0 1 0 19.05 4.91zM12 20a8 8 0 0 1-4.06-1.11l-.29-.17-2.13.84.85-2.07-.19-.31A8 8 0 1 1 12 20zm4.55-5.61c-.25-.13-1.47-.73-1.7-.81s-.39-.13-.56.12-.65.81-.79.97-.29.19-.54.06a6.5 6.5 0 0 1-3.23-2.82c-.24-.42.24-.39.69-1.3a.45.45 0 0 0 0-.42c-.06-.13-.56-1.35-.77-1.84s-.4-.42-.56-.42h-.48a.92.92 0 0 0-.66.31 2.78 2.78 0 0 0-.87 2.06 4.84 4.84 0 0 0 1 2.55 11 11 0 0 0 4.2 3.7c2.59 1.13 2.59.75 3.05.7a2.4 2.4 0 0 0 1.6-1.12 2 2 0 0 0 .14-1.12c-.07-.1-.23-.16-.48-.29z"/></svg>;
    default:          return null;
  }
}

function SectionHead({ eyebrow, title, titleAccent, sub, paper, center }) {
  return (
    <div className="section-head" style={center ? { gridTemplateColumns: "1fr", textAlign: "center", justifyItems: "center" } : null}>
      <div>
        <span className="eyebrow">{eyebrow}</span>
        <h2 className="display-l mt-16">
          {title}<br /><span className="serif-display" style={{ color: paper ? "var(--gold-deep)" : "var(--gold)" }}>{titleAccent}</span>
        </h2>
      </div>
      {sub && (
        <div>
          <p className="body-l text-2" style={{ marginTop: 0, maxWidth: center ? 720 : null }}>{sub}</p>
        </div>
      )}
    </div>
  );
}

// ============================================================
// AUDIENCE switcher
// ============================================================
function Audience({ t }) {
  const [tab, setTab] = useS("biz");
  const cur = t.audience[tab];
  return (
    <section className="section" id="servicios">
      <div className="shell">
        <SectionHead eyebrow={t.audience.eyebrow} title={t.audience.title} titleAccent={t.audience.titleAccent} sub={t.audience.sub} />

        <div className="aud-tabs">
          {t.audience.tabs.map((tb) => (
            <button
              key={tb.id}
              className={"aud-tab" + (tab === tb.id ? " active" : "")}
              onClick={() => setTab(tb.id)}
            >
              {tb.label}
            </button>
          ))}
        </div>

        <div className="aud-body">
          <div className="aud-intro">
            <h3 className="display-m">{cur.h}</h3>
            <p className="body-l text-2 mt-16">{cur.d}</p>
            <ul className="aud-bullets mt-24">
              {cur.bullets.map((b, i) => (
                <li key={i}><span className="check-mini">✓</span> {b}</li>
              ))}
            </ul>
          </div>

          <div className="aud-cases">
            {cur.cases.map((cs, i) => (
              <div className="case-card" key={i}>
                <span className="icon-wrap"><Icon name={cs.ic} /></span>
                <div>
                  <h4 className="h3">{cs.t}</h4>
                  <p className="body-s text-2 mt-8">{cs.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// HOW IT WORKS — 3 steps
// ============================================================
function HowItWorks({ t }) {
  return (
    <section className="section paper" id="como-funciona">
      <div className="shell">
        <SectionHead paper eyebrow={t.how.eyebrow} title={t.how.title} titleAccent={t.how.titleAccent} sub={t.how.sub} />
        <div className="steps-row">
          {t.how.steps.map((s, i) => (
            <div className="step-card" key={i}>
              <span className="step-n">{s.n}</span>
              <h3 className="h2 mt-16">{s.t}</h3>
              <p className="body-s mt-12">{s.d}</p>
              {i < t.how.steps.length - 1 && <span className="step-arrow"><Icon name="arrow" size={22} /></span>}
            </div>
          ))}
        </div>
        <p className="body-s text-2 mt-32" style={{ maxWidth: 720 }}>
          <span className="serif-display" style={{ color: "var(--gold-deep)" }}>↪</span> {t.how.foot}
        </p>
      </div>
    </section>
  );
}

// ============================================================
// PRICING — live rate card
// ============================================================
function useDriftingRate(base, jitter = 6, speed = 1800) {
  const [v, setV] = useS(base);
  useE(() => {
    const id = setInterval(() => {
      setV((cur) => {
        const drift = (Math.random() - 0.5) * jitter;
        const next = base + drift;
        return cur * 0.7 + next * 0.3;
      });
    }, speed);
    return () => clearInterval(id);
  }, [base, jitter, speed]);
  return v;
}
function fmtCOP(n) {
  return new Intl.NumberFormat("es-CO", { maximumFractionDigits: 0 }).format(Math.round(n));
}

function Pricing({ t }) {
  const buy = useDriftingRate(4042, 8, 1800);
  const sell = useDriftingRate(4068, 8, 2100);
  const spread = sell - buy;
  return (
    <section className="section" id="tarifa">
      <div className="shell">
        <SectionHead eyebrow={t.pricing.eyebrow} title={t.pricing.title} titleAccent={t.pricing.titleAccent} sub={t.pricing.sub} />

        <div className="pricing-grid">
          <div className="rate-card">
            <div className="rate-head">
              <span><span className="live-pulse"></span> {t.pricing.card_t}</span>
              <span className="mono" style={{ color: "var(--text-3)", fontSize: 11 }}>USDT/COP · LIVE</span>
            </div>
            <div className="rate-body">
              <div className="rate-row">
                <span className="rate-label">{t.pricing.card_buy_label}</span>
                <span className="rate-value tabular mono">{fmtCOP(buy)} <span className="rate-unit">{t.pricing.card_unit}</span></span>
              </div>
              <div className="rate-divider"></div>
              <div className="rate-row">
                <span className="rate-label">{t.pricing.card_sell_label}</span>
                <span className="rate-value tabular mono">{fmtCOP(sell)} <span className="rate-unit">{t.pricing.card_unit}</span></span>
              </div>
              <div className="rate-spread">
                <span className="cap">Spread</span>
                <span className="mono tabular" style={{ fontSize: 16 }}>{fmtCOP(spread)} COP <span style={{ color: "var(--text-3)" }}>(~{((spread / buy) * 100).toFixed(2)}%)</span></span>
              </div>
            </div>
            <div className="rate-foot">
              <span className="body-s text-3">{t.pricing.card_disclaimer}</span>
              <a href="#contacto" className="btn btn-primary">
                {t === window.I18N.es ? "Solicitar cotización" : "Get a quote"}
                <Icon name="arrow" size={14} />
              </a>
            </div>
          </div>

          <div className="pricing-bullets">
            {t.pricing.bullets.map((b, i) => (
              <div className="pb-row" key={i}>
                <span className="pb-num">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <h4 className="h3">{b.t}</h4>
                  <p className="body-s text-2 mt-8">{b.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// TRUST / RESPALDO
// ============================================================
function Trust({ t }) {
  return (
    <section className="section paper" id="respaldo">
      <div className="shell">
        <SectionHead paper eyebrow={t.trust.eyebrow} title={t.trust.title} titleAccent={t.trust.titleAccent} sub={t.trust.sub} />
        <div className="trust-grid">
          {t.trust.cards.map((c, i) => (
            <div className="id-card" key={i}>
              <span className="icon-wrap"><Icon name={c.ic} /></span>
              <h3 className="h3">{c.t}</h3>
              <p className="body-s">{c.d}</p>
            </div>
          ))}
        </div>
        <div className="trust-stats">
          {t.trust.stats.map((s, i) => (
            <div className="ts-cell" key={i}>
              <div className="display-m" style={{ color: "var(--on-paper)" }}>{s.t}</div>
              <div className="body-s mt-8" style={{ color: "var(--on-paper-2)" }}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FAQ
// ============================================================
function FAQ({ t }) {
  const [open, setOpen] = useS(0);
  return (
    <section className="section" id="preguntas">
      <div className="shell">
        <SectionHead eyebrow={t.faq.eyebrow} title={t.faq.title} titleAccent={t.faq.titleAccent} sub={t.faq.sub} />
        <div className="faq-list">
          {t.faq.items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div className={"faq-row" + (isOpen ? " open" : "")} key={i}>
                <button className="faq-q" onClick={() => setOpen(isOpen ? -1 : i)}>
                  <span>{it.q}</span>
                  <span className={"faq-chev" + (isOpen ? " open" : "")}><Icon name="chevron" size={18} /></span>
                </button>
                <div className="faq-a-wrap" style={{ maxHeight: isOpen ? 400 : 0 }}>
                  <p className="faq-a body">{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ============================================================
// FINAL CTA banner
// ============================================================
function FinalCTA({ t }) {
  return (
    <section className="cta-banner">
      <div className="shell">
        <div className="cta-inner">
          <div>
            <span className="eyebrow">{t.cta.eyebrow}</span>
            <h2 className="display-l mt-16">
              {t.cta.title} <span className="serif-display">{t.cta.titleAccent}</span>
            </h2>
            <p className="body-l mt-24" style={{ color: "var(--text-2)", maxWidth: 560 }}>{t.cta.sub}</p>
          </div>
          <div className="cta-actions">
            <a href="#contacto" className="btn btn-primary btn-lg">
              {t.cta.btn1}
              <Icon name="arrow" size={14} />
            </a>
            <a href="https://wa.me/" className="btn btn-ghost btn-lg">
              <Icon name="wa" size={16} />
              {t.cta.btn2}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Audience, HowItWorks, Pricing, Trust, FAQ, FinalCTA, SectionHead, Icon });