/* 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 NosotrosHero({ 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 WhatIsAico({ p }) {
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 840 }}>
        <h2 className="section-title reveal" style={{ fontSize: "clamp(22px, 3vw, 40px)", marginBottom: 24, lineHeight: 1.15 }}>{p.title}</h2>
        <p className="section-desc reveal" data-delay="1" style={{ maxWidth: "100%", fontSize: 16 }}>{p.body}</p>
      </div>
    </section>
  );
}

function TheProblem({ 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.title1}<br/>
              <span style={{ color: "var(--accent)" }}>{p.title2[0]}<br/>{p.title2[1]}</span>
            </h2>
          </div>
          <p className="section-desc reveal" data-delay="2">{p.desc}</p>
        </div>
        <div className="pg-grid pg-grid-2">
          {p.cards.map((c, i) => (
            <div key={i} className="pg-card reveal" data-delay={String(i + 1)}>
              <div className="pc-num">0{i + 1}</div>
              <div className="pc-title">{c.title}</div>
              <p className="pc-body">{c.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ThreeVectors({ p }) {
  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="pg-grid pg-grid-3">
          {p.items.map((item, i) => (
            <div key={i} className="pg-card reveal" data-delay={String(i + 1)}>
              <div className="pc-num">{item.num}</div>
              <div className="pc-title">{item.title}</div>
              <p className="pc-body">{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Methodology({ 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="steps-list">
          {p.steps.map((s, i) => (
            <div key={i} className="step-row reveal" data-delay={String(i % 4 + 1)}>
              <div className="sr-num">{s.num}</div>
              <div>
                <div className="sr-title">{s.title}</div>
                <p className="sr-body">{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Differentiators({ p }) {
  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.title1}<br/>
              <span style={{ color: "var(--accent)" }}>{p.title2}</span>
            </h2>
          </div>
          <p className="section-desc reveal" data-delay="2">{p.desc}</p>
        </div>
        <div className="pg-grid pg-grid-2">
          {p.items.map((item, i) => (
            <div key={i} className="pg-card reveal" data-delay={String(i % 4 + 1)}>
              <div className="pc-title">{item.title}</div>
              <p className="pc-body">{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function NosotrosCta({ 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>
        <p className="reveal" data-delay="4" style={{ marginTop: 32, fontSize: 11, color: "var(--fg-mute)", fontFamily: "var(--mono)" }}>{p.note}</p>
      </div>
    </section>
  );
}

function NosotrosApp() {
  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.nosotros;

  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>
        <NosotrosHero p={p.hero}/>
        <WhatIsAico p={p.brief}/>
        <TheProblem p={p.problem}/>
        <ThreeVectors p={p.vectors}/>
        <Methodology p={p.method}/>
        <Differentiators p={p.diff}/>
        <NosotrosCta p={p.cta}/>
      </main>
      <Footer t={t}/>
    </>
  );
}

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