/* 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 DesarrollosHero({ 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 Projects({ p }) {
  return (
    <section className="section" style={{ paddingTop: 72 }}>
      <div className="wrap">
        <div className="dev-grid">
          {p.projects.map((proj, i) => (
            <a
              key={i}
              href={proj.href}
              target="_blank"
              rel="noopener noreferrer"
              className="dev-card reveal"
              data-delay={String(i + 1)}
            >
              <div className="dev-card-img">
                <img src={proj.img} alt={proj.url}/>
              </div>
              <div className="dev-card-content">
                <div className="dev-card-head">
                  <div className="dev-card-url">{proj.url}</div>
                  <div className={`dev-card-status ${proj.status.includes("BETA") ? "beta" : proj.live ? "live" : "wip"}`}>{proj.status}</div>
                </div>
                <p className="dev-card-desc">{proj.desc}</p>
                <div className="dev-card-tags">
                  {proj.tags.map((tag, j) => <span key={j} className="dev-tag">{tag}</span>)}
                </div>
                <div className="dev-card-link">
                  {proj.live ? p.visitLabel : p.devLabel} <span>→</span>
                </div>
              </div>
            </a>
          ))}
          <div className="dev-idea reveal" data-delay="3">
            <div className="section-tag" style={{ margin: 0, justifyContent: "center" }}>{p.idea.tag}</div>
            <div className="dev-idea-title">{p.idea.title}</div>
            <p className="dev-idea-body">{p.idea.body}</p>
            <a href="/contacto.html" className="cta">{p.idea.btn} <span className="arrow">→</span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

function DesarrollosCta({ 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>
          <a href="/soluciones.html" className="cta cta-outline">{p.btn2} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function DesarrollosApp() {
  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.desarrollos;

  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>
        <DesarrollosHero p={p.hero}/>
        <Projects p={p}/>
        <DesarrollosCta p={p.cta}/>
      </main>
      <Footer t={t}/>
    </>
  );
}

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