// Mercomercio — section components
const { useState: useStateS } = React;

const Icon = ({ name, size = 22 }) => {
  const s = size;
  const stroke = "currentColor";
  const sw = 1.6;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "ship":
      return <svg {...common}><path d="M3 18c2 1 4 1 6 0s4-1 6 0 4 1 6 0"/><path d="M5 14V8h14v6"/><path d="M9 8V5h6v3"/><path d="M5 14h14l-2 4H7z"/></svg>;
    case "doc":
      return <svg {...common}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>;
    case "truck":
      return <svg {...common}><path d="M3 7h11v9H3z"/><path d="M14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>;
    case "target":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill={stroke}/></svg>;
    case "eye":
      return <svg {...common}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case "net":
      return <svg {...common}><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/><path d="M7.5 7.5l3 3M16.5 7.5l-3 3M7.5 16.5l3-3M16.5 16.5l-3-3"/></svg>;
    case "zap":
      return <svg {...common}><path d="M13 2L3 14h7l-1 8 10-12h-7z"/></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>;
    case "globe":
      return <svg {...common}><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 "headset":
      return <svg {...common}><path d="M4 14v-2a8 8 0 0 1 16 0v2"/><path d="M4 14h3v6H5a1 1 0 0 1-1-1zM20 14h-3v6h2a1 1 0 0 0 1-1z"/></svg>;
    case "book":
      return <svg {...common}><path d="M4 4h10a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4z"/><path d="M4 16a4 4 0 0 1 4-4h10"/></svg>;
    case "handshake":
      return <svg {...common}><path d="M3 12l3-4 4 1 3-1 4 1 4 4"/><path d="M3 12v3l5 5 3-2 3 2 5-5v-3"/><path d="M11 16l2-2 2 2"/></svg>;
    case "mail":
      return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
    case "phone":
      return <svg {...common}><path d="M5 4h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/></svg>;
    case "pin":
      return <svg {...common}><path d="M12 22s7-7 7-12a7 7 0 1 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>;
    case "arrow":
      return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case "check":
      return <svg {...common}><path d="M5 12l5 5L20 7"/></svg>;
    case "chev":
      return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    default:
      return null;
  }
};

function LangSwitcher() {
  const { lang, setLang } = useT();
  return (
    <div className="lang-switcher" role="group" aria-label="Language">
      <button
        type="button"
        className={`lang-btn${lang === "es" ? " active" : ""}`}
        onClick={() => setLang("es")}
        aria-pressed={lang === "es"}
      >
        ES
      </button>
      <span className="lang-sep">·</span>
      <button
        type="button"
        className={`lang-btn${lang === "en" ? " active" : ""}`}
        onClick={() => setLang("en")}
        aria-pressed={lang === "en"}
      >
        EN
      </button>
    </div>
  );
}

function Header() {
  const { t } = useT();
  return (
    <header className="site-header">
      <div className="container nav">
        <a className="brand" href="#top">
          <span className="brand-mark"></span>
          Mercomercio
        </a>
        <nav className="nav-links">
          <a href="#como">{t.nav.howItWorks}</a>
          <a href="#calculadora">{t.nav.calculator}</a>
          <a href="#casos">{t.nav.cases}</a>
          <a href="#planes">{t.nav.plans}</a>
          <a href="#faq">{t.nav.faq}</a>
        </nav>
        <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
          <LangSwitcher />
          <a className="btn btn-ghost btn-sm" href="#contacto">{t.nav.login}</a>
          <a className="btn btn-dark btn-sm" href="#contacto">{t.nav.consult}</a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  const { t } = useT();
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <span className="hero-tag">
              <span className="dot"></span>
              {t.hero.tag}
            </span>
            <h1>
              {t.hero.titlePre}<span className="accent">{t.hero.titleAccent}</span>
            </h1>
            <p className="hero-lead">{t.hero.lead}</p>
            <div className="hero-ctas">
              <a className="btn btn-primary btn-lg" href="#calculadora">
                {t.hero.ctaPrimary}
              </a>
              <a className="btn btn-ghost btn-lg" href="#como">
                {t.hero.ctaSecondary} <Icon name="arrow" size={16} />
              </a>
            </div>
            <div className="hero-meta">
              {t.hero.meta.map((m, i) => (
                <div key={i}><strong>{m.v}</strong>{m.l}</div>
              ))}
            </div>
          </div>
          <div>
            <RouteCard />
          </div>
        </div>
      </div>
    </section>
  );
}

function RouteCard() {
  const { t } = useT();
  return (
    <div className="route-card">
      <span className="tag">{t.route.tag}</span>
      <h4>{t.route.title}</h4>
      <div className="route-map">
        <svg preserveAspectRatio="none">
          <defs>
            <linearGradient id="g1" x1="0" x2="1">
              <stop offset="0" stopColor="#1e40af" stopOpacity="0.6"/>
              <stop offset="1" stopColor="#10b981" stopOpacity="0.6"/>
            </linearGradient>
          </defs>
          <path d="M 12% 28% Q 38% 10%, 50% 50%" stroke="url(#g1)" strokeWidth="2" strokeDasharray="5 5" fill="none">
            <animate attributeName="stroke-dashoffset" from="20" to="0" dur="1.6s" repeatCount="indefinite"/>
          </path>
          <path d="M 50% 50% Q 70% 70%, 88% 70%" stroke="#10b981" strokeWidth="2" strokeDasharray="5 5" fill="none">
            <animate attributeName="stroke-dashoffset" from="20" to="0" dur="1.6s" repeatCount="indefinite"/>
          </path>
        </svg>
        <div className="route-pin" style={{ left: "12%", top: "28%" }}>
          <div className="flag">🇪🇸</div>
          <span>{t.route.origin}</span>
          <span className="label-sub">{t.route.originSub}</span>
        </div>
        <div className="route-pin hub" style={{ left: "50%", top: "50%" }}>
          <div className="flag">🇵🇾</div>
          <span>{t.route.hub}</span>
          <span className="label-sub">{t.route.hubSub}</span>
        </div>
        <div className="route-pin" style={{ left: "88%", top: "70%" }}>
          <div className="flag">🇧🇷</div>
          <span>{t.route.dest}</span>
          <span className="label-sub">{t.route.destSub}</span>
        </div>
      </div>
      <div className="route-stats">
        {t.route.stats.map((s, i) => (
          <div key={i} className={`route-stat${i === 2 ? " save" : ""}`}>
            <div className="v">{s.v}</div>
            <div className="l">{s.l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HowItWorks() {
  const { t } = useT();
  const icos = ["ship", "doc", "truck"];
  return (
    <section id="como" data-screen-label="02 Cómo funciona">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.how.eyebrow}</span>
          <h2>{t.how.h2}</h2>
          <p>{t.how.lead}</p>
        </div>
        <div className="steps">
          {t.how.steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="step-num">{s.n}</div>
              <div className="step-ico"><Icon name={icos[i]} /></div>
              <h3>{s.title}</h3>
              <p>{s.copy}</p>
              <div className="detail"><Icon name="check" size={16} /> {s.detail}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CalculatorSection() {
  const { t } = useT();
  return (
    <section id="calculadora" className="calc-wrap" data-screen-label="03 Calculadora">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.calcSection.eyebrow}</span>
          <h2 style={{ color: "white" }}>{t.calcSection.h2}</h2>
          <p>{t.calcSection.lead}</p>
        </div>
        <Calculator />
      </div>
    </section>
  );
}

function Cases() {
  const { t } = useT();
  return (
    <section id="casos" data-screen-label="04 Casos">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.cases.eyebrow}</span>
          <h2>{t.cases.h2}</h2>
          <p>{t.cases.lead}</p>
        </div>
        <div className="cases">
          {t.cases.items.map((c, i) => (
            <article className="case" key={i}>
              <div className="case-head">
                <div className="case-logo" style={{ color: c.color }}>{c.logo}</div>
                <div>
                  <div className="case-name">{c.name}</div>
                  <div className="case-sub">{c.sub}</div>
                </div>
                <div className="case-route">{c.route}</div>
              </div>
              <div className="case-metrics">
                <div className="case-metric">
                  <div className="l">{t.cases.volumeLabel}</div>
                  <div className="v">{c.volume}</div>
                </div>
                <div className="case-metric save">
                  <div className="l">{t.cases.savingMonthLabel}</div>
                  <div className="v">{c.savingMonth}</div>
                </div>
                <div className="case-metric save">
                  <div className="l">{t.cases.savingYearLabel}</div>
                  <div className="v">{c.savingYear}</div>
                </div>
              </div>
              <blockquote className="case-quote">
                "{c.quote}"
                <div className="who">— {c.who}, {c.name}</div>
              </blockquote>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  const { t } = useT();
  return (
    <section id="nosotros" style={{ background: "var(--paper-2)" }} data-screen-label="05 Nosotros">
      <div className="container">
        <div className="about">
          <div className="about-copy">
            <span className="eyebrow">{t.about.eyebrow}</span>
            <h2 style={{ marginTop: 14 }}>{t.about.h2}</h2>
            <p>{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <div className="values">
              {t.about.values.map((v, i) => (
                <div className="value" key={i}>
                  <div className="value-ico"><Icon name={v.ico} /></div>
                  <div>
                    <h4>{v.title}</h4>
                    <p>{v.copy}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
          <div className="about-img">
            <div className="pl">{t.about.imgAlt}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Features() {
  const { t } = useT();
  return (
    <section id="ventajas" data-screen-label="06 Ventajas">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.features.eyebrow}</span>
          <h2>{t.features.h2}</h2>
          <p>{t.features.lead}</p>
        </div>
        <div className="features">
          {t.features.items.map((f, i) => (
            <div className="feature" key={i}>
              <div className="feature-ico"><Icon name={f.ico} /></div>
              <h4>{f.title}</h4>
              <p>{f.copy}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pricing() {
  const { t } = useT();
  return (
    <section id="planes" className="pricing-wrap" data-screen-label="07 Planes">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.pricing.eyebrow}</span>
          <h2>{t.pricing.h2}</h2>
          <p>{t.pricing.lead}</p>
        </div>
        <div className="pricing">
          {t.pricing.plans.map((p, i) => (
            <div className={`plan${p.featured ? " featured" : ""}`} key={i}>
              {p.featured && <span className="plan-badge">{t.pricing.badgePopular}</span>}
              <h3>{p.name}</h3>
              <div>
                <div className="plan-price">
                  {p.price}
                  <span className="per">{p.per !== undefined ? p.per : t.pricing.perUnit}</span>
                </div>
                <div className="plan-desc" style={{ marginTop: 8 }}>{p.desc}</div>
              </div>
              <ul className="plan-list">
                {p.items.map((it, j) => <li key={j}>{it}</li>)}
              </ul>
              <div className="plan-savings">{p.save}</div>
              <a className={`btn ${p.featured ? "btn-primary" : "btn-dark"}`} href="#contacto">{p.cta} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const [sent, setSent] = useStateS(false);
  const { t } = useT();
  const originCodes = ["ES", "PT", "IT", "FR", "TR", "GB", "DE", "NL", "PL", "CZ", "FI", "SE", "PE", "CO", "EC"];
  const destCodes = ["BR", "AR", "UY"];
  return (
    <section id="contacto" data-screen-label="08 Contacto">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.contact.eyebrow}</span>
          <h2>{t.contact.h2}</h2>
          <p>{t.contact.lead}</p>
        </div>
        <div className="contact">
          <form className="form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
            {sent ? (
              <div style={{ padding: "40px", background: "var(--green-50)", borderRadius: "var(--radius)", border: "1px solid var(--green-100)", textAlign: "center" }}>
                <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--green-500)", color: "white", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16 }}>
                  <Icon name="check" size={28} />
                </div>
                <h3>{t.contact.sentH3}</h3>
                <p style={{ color: "var(--ink-500)", marginTop: 8 }}>{t.contact.sentP}</p>
              </div>
            ) : (
              <>
                <div className="form-row">
                  <div><label>{t.contact.nameLbl}</label><input type="text" required placeholder={t.contact.namePh} /></div>
                  <div><label>{t.contact.emailLbl}</label><input type="email" required placeholder={t.contact.emailPh} /></div>
                </div>
                <div className="form-row">
                  <div><label>{t.contact.phoneLbl}</label><input type="tel" required placeholder={t.contact.phonePh} /></div>
                  <div><label>{t.contact.companyLbl}</label><input type="text" required placeholder={t.contact.companyPh} /></div>
                </div>
                <div className="form-row">
                  <div>
                    <label>{t.contact.originLbl}</label>
                    <select required defaultValue="">
                      <option value="" disabled>{t.contact.selectPh}</option>
                      {originCodes.map((c) => <option key={c}>{t.originNames[c]}</option>)}
                      <option>{t.contact.productOther}</option>
                    </select>
                  </div>
                  <div>
                    <label>{t.contact.destLbl}</label>
                    <select required defaultValue="">
                      <option value="" disabled>{t.contact.selectPh}</option>
                      {destCodes.map((c) => <option key={c}>{t.destNames[c]}</option>)}
                    </select>
                  </div>
                </div>
                <div className="form-row">
                  <div>
                    <label>{t.contact.productLbl}</label>
                    <select required defaultValue="">
                      <option value="" disabled>{t.contact.selectPh}</option>
                      <option>{t.contact.productTextiles}</option>
                      <option>{t.contact.productElectronics}</option>
                      <option>{t.contact.productOther}</option>
                    </select>
                  </div>
                  <div>
                    <label>{t.contact.volumeLbl}</label>
                    <select required defaultValue="">
                      <option value="" disabled>{t.contact.selectPh}</option>
                      {t.contact.volumes.map((v) => <option key={v}>{v}</option>)}
                    </select>
                  </div>
                </div>
                <div>
                  <label>{t.contact.messageLbl}</label>
                  <textarea placeholder={t.contact.messagePh}></textarea>
                </div>
                <label className="checkbox">
                  <input type="checkbox" required />
                  <span>{t.contact.terms}</span>
                </label>
                <button className="btn btn-primary btn-lg" type="submit" style={{ justifySelf: "start" }}>
                  {t.contact.submit}
                </button>
              </>
            )}
          </form>
          <aside className="contact-info">
            <h3>{t.contact.asideH3}</h3>
            <div className="row">
              <div className="ico"><Icon name="phone" size={18} /></div>
              <div><div className="l">{t.contact.phoneLine}</div><div className="v">+595 21 000 000</div></div>
            </div>
            <div className="row">
              <div className="ico"><Icon name="mail" size={18} /></div>
              <div><div className="l">{t.contact.emailLine}</div><div className="v">hello@mercomercio.com</div></div>
            </div>
            <div className="row">
              <div className="ico"><Icon name="pin" size={18} /></div>
              <div><div className="l">{t.contact.officeLine}</div><div className="v">{t.contact.officeVal}</div></div>
            </div>
            <div className="row">
              <div className="ico"><Icon name="clock" size={18} /></div>
              <div><div className="l">{t.contact.hoursLine}</div><div className="v">{t.contact.hoursVal}</div></div>
            </div>
            <div className="map">{t.contact.mapAlt}</div>
          </aside>
        </div>
      </div>
    </section>
  );
}

function FAQ() {
  const { t } = useT();
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" style={{ background: "var(--paper-2)" }} data-screen-label="09 FAQ">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">{t.faq.eyebrow}</span>
          <h2>{t.faq.h2}</h2>
        </div>
        <div className="faq">
          {t.faq.qs.map(([q, a], i) => (
            <div className={`faq-item${open === i ? " open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{q}</span>
                <span className="chev"><Icon name="chev" size={14} /></span>
              </button>
              <div className="faq-a"><div><p>{a}</p></div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const { t } = useT();
  return (
    <footer className="site-footer" data-screen-label="10 Footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a className="brand" href="#top">
              <span className="brand-mark"></span>
              Mercomercio
            </a>
            <p>{t.footer.tagline}</p>
          </div>
          {t.footer.cols.map((c) => (
            <div className="footer-col" key={c.h}>
              <h5>{c.h}</h5>
              <ul>{c.links.map((l) => <li key={l}><a href="#">{l}</a></li>)}</ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom">
          <div>{t.footer.copyright}</div>
          <div className="socials">
            <a href="#">LinkedIn</a>
            <a href="#">Instagram</a>
            <a href="#">YouTube</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, HowItWorks, CalculatorSection, Cases, About, Features, Pricing, Contact, FAQ, Footer });