/* global React, ReactDOM, COPY */
const { useState, useEffect } = React;

const INNER_LINKS = {
  es: [
    { href: "/", idx: "01", label: "Inicio" },
    { href: "/nosotros.html", idx: "02", label: "Nosotros" },
    { href: "/soluciones.html", idx: "03", label: "Soluciones" },
    { href: "/desarrollos.html", idx: "04", label: "Desarrollos" },
    { href: "/contacto.html", idx: "05", label: "Contacto" },
  ],
  en: [
    { href: "/", idx: "01", label: "Home" },
    { href: "/nosotros.html", idx: "02", label: "About" },
    { href: "/soluciones.html", idx: "03", label: "Solutions" },
    { href: "/desarrollos.html", idx: "04", label: "Lab" },
    { href: "/contacto.html", idx: "05", label: "Contact" },
  ],
};

function SolucionesHero({ p }) {
  return (
    <section className="page-hero">
      <div className="wrap">
        <div className="section-tag reveal">{p.tag}</div>
        <h1 className="page-hero-title reveal" data-delay="1">
          {p.title1}<br/>
          <span style={{ color: "var(--accent)" }}>{p.title2}</span>
        </h1>
        <p className="page-hero-desc reveal" data-delay="2">{p.desc}</p>
      </div>
    </section>
  );
}

function Capabilities({ p }) {
  const icons = [
    (<svg fill="none" viewBox="0 0 40 40"><rect x="4" y="8" width="32" height="24" rx="2" stroke="currentColor" strokeWidth="1.5"/><path d="M14 22l4-4 4 4 6-6" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>),
    (<svg fill="none" viewBox="0 0 40 40"><circle cx="10" cy="14" r="4" stroke="currentColor" strokeWidth="1.5"/><circle cx="30" cy="14" r="4" stroke="currentColor" strokeWidth="1.5"/><circle cx="20" cy="30" r="4" stroke="currentColor" strokeWidth="1.5"/><path d="M14 14h12M13 17l-1 9M27 17l1 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/></svg>),
    (<svg fill="none" viewBox="0 0 40 40"><circle cx="20" cy="20" r="12" stroke="currentColor" strokeWidth="1.5"/><path d="M26 14l6-6m0 0h-5m5 0v5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/><path d="M20 16v4l3 3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>),
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-tag reveal">{p.tag}</div>
            <h2 className="section-title reveal" data-delay="1">{p.title}</h2>
          </div>
          <p className="section-desc reveal" data-delay="2">{p.desc}</p>
        </div>
        <div className="svc-grid">
          {p.items.map((item, i) => (
            <div key={i} className="svc-card reveal" data-delay={String(i + 1)}>
              <div className="svc-num">
                <span>{item.tag}</span>
                <span>{item.num}</span>
              </div>
              <div className="svc-icon">{icons[i]}</div>
              <div className="svc-title">{item.title}</div>
              <p className="svc-body">{item.body}</p>
              <ul className="svc-list">
                {item.list.map((li, j) => <li key={j}>{li}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function UseCases({ p }) {
  return (
    <section className="section" style={{ background: "var(--bg-2)" }}>
      <div className="wrap">
        <div className="section-head">
          <div>
            <div className="section-tag reveal">{p.tag}</div>
            <h2 className="section-title reveal" data-delay="1">{p.title}</h2>
          </div>
          <p className="section-desc reveal" data-delay="2">{p.desc}</p>
        </div>
        <div className="pg-grid pg-grid-3">
          {p.items.map((item, i) => (
            <div key={i} className="pg-card reveal" data-delay={String(i % 3 + 1)}>
              <div className="pc-tag">{item.area}</div>
              <div className="pc-title">{item.title}</div>
              <p className="pc-body">{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Statement({ p }) {
  return (
    <section className="section">
      <div className="wrap">
        <div className="statement-block">
          <h2 className="reveal">{p.title}</h2>
          <p className="reveal" data-delay="1">{p.body}</p>
        </div>
      </div>
    </section>
  );
}

function SolucionesCta({ p }) {
  return (
    <section className="cta-final">
      <div className="wrap">
        <div className="section-tag reveal">{p.tag}</div>
        <h2 className="reveal" data-delay="1">
          {p.pre}<br/>
          <span className="accent">{p.accent}</span>
        </h2>
        <p className="section-desc reveal" data-delay="2" style={{ marginBottom: 48, maxWidth: 600 }}>{p.body}</p>
        <div className="cta-final-actions reveal" data-delay="3">
          <a href="/contacto.html" className="cta">{p.btn} <span className="arrow">→</span></a>
        </div>
        <p className="reveal" data-delay="4" style={{ marginTop: 32, fontSize: 11, color: "var(--fg-mute)", fontFamily: "var(--mono)" }}>{p.note}</p>
      </div>
    </section>
  );
}

function SolucionesApp() {
  const [lang, setLang] = useState("es");
  const [direction, setDirection] = useState("a");

  useEffect(() => { document.documentElement.setAttribute("data-lang", lang); }, [lang]);
  useEffect(() => { document.documentElement.setAttribute("data-direction", direction); }, [direction]);
  useEffect(() => { if (typeof initChat === "function") initChat(); }, []);

  useReveal();
  const t = COPY[lang];
  const p = t.soluciones;

  return (
    <>
      <MagnetCursor/>
      <div className="grid-overlay"/>
      <StatusBar t={t}/>
      <Nav
        t={t}
        lang={lang}
        setLang={setLang}
        direction={direction}
        setDirection={setDirection}
        navLinks={INNER_LINKS[lang]}
        navCtaHref="/contacto.html"
      />
      <main>
        <SolucionesHero p={p.hero}/>
        <Capabilities p={p.capabilities}/>
        <UseCases p={p.usecases}/>
        <Statement p={p.statement}/>
        <SolucionesCta p={p.cta}/>
      </main>
      <Footer t={t}/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<SolucionesApp/>);