/* ====================================================================
   components.jsx — section components for the portfolio site.
   Each receives `lang` ('en'|'es'). Reads content from window.SITE.
   ==================================================================== */
const { useState, useEffect, useRef } = React;

// pick a localized value: string passthrough, or {en,es} object
const L = (v, lang) => (v && typeof v === "object" && !Array.isArray(v) && ("en" in v || "es" in v)) ? v[lang] : v;

/* ---------------- Side navigation ---------------- */
function SideNav({ lang, setLang, active, onNav }) {
  const S = window.SITE;
  const labels = S.nav[lang];
  const ids = S.nav.en; // ids are always english anchors
  return (
    <aside className="side">
      <div className="side-top">
        <a className="brand" href="#home" onClick={(e) => onNav(e, "home")}>
          <div className="mark">{S.meta.short}</div>
          <div className="brand-name mono">MIGUEL ANGEL<br />SALAMANCA</div>
        </a>
      </div>
      <nav className="side-nav">
        {labels.map((label, i) => (
          <a
            key={ids[i]}
            href={"#" + ids[i]}
            onClick={(e) => onNav(e, ids[i])}
            className={"navlink mono" + (active === ids[i] ? " active" : "")}
          >
            // {label}
          </a>
        ))}
      </nav>
      <div className="side-foot mono">
        <button
          className="lang-toggle"
          onClick={() => setLang(lang === "en" ? "es" : "en")}
          aria-label="Toggle language"
        >
          <span className={lang === "en" ? "on" : ""}>EN</span>
          <span className={lang === "es" ? "on" : ""}>ES</span>
        </button>
        <div className="side-copy">
          © 2026<br />{L(S.meta.location, lang)}<br />{L(S.hero.foot, lang)}
        </div>
      </div>
    </aside>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ lang, onNav }) {
  const S = window.SITE, H = S.hero;
  return (
    <section id="home" className="section hero" data-screen-label="Home">
      <div className="grid-bg"></div>
      <div className="marquee" aria-hidden="true">
        <span>Salamanca · Salamanca · Salamanca · Salamanca · Salamanca · Salamanca · </span>
        <span>Salamanca · Salamanca · Salamanca · Salamanca · Salamanca · Salamanca · </span>
      </div>
      <div className="hero-inner">
        <div className="hello">
          <span className="dot"></span>
          <span className="kicker">{L(H.hello, lang)}</span>
        </div>
        <h1 className="hero-name">Miguel Angel<br />Salamanca</h1>
        <p className="hero-role mono">{L(H.role, lang)}</p>
        <p className="hero-blurb">{L(H.blurb, lang)}</p>
        <div className="hero-cta">
          <a className="btn" href="#work" onClick={(e) => onNav(e, "work")}>{L(H.cta1, lang)} →</a>
          <a className="ghost mono" href="#expertise" onClick={(e) => onNav(e, "expertise")}>{L(H.cta2, lang)}</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Expertise ---------------- */
function Expertise({ lang }) {
  const S = window.SITE, E = S.expertise;
  return (
    <section id="expertise" className="section" data-screen-label="Expertise">
      <SectionHead no="/ 01" title={L(E.title, lang)} intro={L(E.intro, lang)} />
      <div className="exp-cards">
        {E.cards.map((c) => (
          <article className="exp-card" key={c.no}>
            <div className="exp-no mono">{c.no}</div>
            <h3>{L(c.title, lang)}</h3>
            <p>{L(c.body, lang)}</p>
            <div className="chips">
              {c.tags.map((t) => <span className="chip mono" key={t}>{t}</span>)}
            </div>
          </article>
        ))}
      </div>

      <blockquote className="quote">
        <span className="qmark">“</span>
        <p>{L(E.quote, lang)}</p>
        <cite className="mono">— {E.quoteBy}</cite>
      </blockquote>

      <div className="exp-detail">
        <div className="exp-col">
          <h4 className="col-head mono">{L(E.softwareTitle, lang)}</h4>
          <ul className="stack-list">
            {E.software.map((s) => (
              <li key={s}><span className="stack-bullet mono">▹</span>{L(s, lang)}</li>
            ))}
          </ul>
        </div>
        <div className="exp-col">
          <h4 className="col-head mono">{L(E.coursesTitle, lang)}</h4>
          <ul className="course-list">
            {E.courses.map((c, i) => (
              <li key={i}>
                <span className="course-name">{L(c.name, lang)}</span>
                {c.org ? <span className="course-org mono">{c.org}</span> : null}
              </li>
            ))}
          </ul>
        </div>
        <div className="exp-col">
          <h4 className="col-head mono">{L(E.eduTitle, lang)}</h4>
          <div className="edu-block">
            <div className="edu-degree">{L(E.edu.degree, lang)}</div>
            <div className="edu-org mono">{E.edu.org}</div>
          </div>
          <h4 className="col-head mono" style={{ marginTop: 34 }}>{L(E.langTitle, lang)}</h4>
          <ul className="lang-list">
            {E.languages.map((l, i) => (
              <li key={i}>
                <span>{L(l.name, lang)}</span>
                <span className="lang-level mono">{L(l.level, lang)}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Work ---------------- */
function Work({ lang }) {
  const S = window.SITE, W = S.work;
  const filters = W.filters[lang];
  const filtersEn = W.filters.en;
  const [active, setActive] = useState(0);
  const featured = W.projects.find((p) => p.featured);
  const grid = W.projects;
  const visible = grid.filter((p) => active === 0 || L(p.cat, "en") === filtersEn[active]);

  return (
    <section id="work" className="section" data-screen-label="Work">
      <SectionHead no="/ 02" title={L(W.title, lang)} intro={L(W.intro, lang)} />

      {/* Featured */}
      <a className="featured" href={featured.href} target={featured.href.startsWith("http") ? "_blank" : undefined} rel="noopener">
        <div className="featured-media">
          <div className="dash-preview">
            <div className="dp-bar"><i></i><i></i><i></i><span className="mono">diputrax · v7LR — AUC por época</span></div>
            <div className="dp-body">
              <div className="dp-kpis">
                <div className="dp-kpi"><b>5,000</b><span className="mono">registros</span></div>
                <div className="dp-kpi"><b>0.73</b><span className="mono">AUC nodal</span></div>
                <div className="dp-kpi"><b>4</b><span className="mono">eras</span></div>
              </div>
              <div className="dp-bars">
                {[83, 96, 55, 78, 40, 64, 50, 37, 76, 34].map((h, i) => (
                  <span key={i} style={{ height: h + "%" }}></span>
                ))}
              </div>
            </div>
          </div>
        </div>
        <div className="featured-body">
          <span className="kicker">{L(W.featuredLabel, lang)}</span>
          <h3>{featured.title}</h3>
          <p className="featured-sub">{L(featured.sub, lang)}</p>
          <p className="featured-text">{L(featured.body, lang)}</p>
          <div className="chips">{featured.stack.map((t) => <span className="chip mono" key={t}>{t}</span>)}</div>
          <span className="featured-cta mono">{L(featured.cta, lang)} →</span>
        </div>
      </a>

      {/* Filter */}
      <div className="filters mono">
        <span className="filter-label">{lang === "en" ? "Filter by" : "Filtrar por"}</span>
        {filters.map((f, i) => (
          <button key={i} className={"filter" + (active === i ? " on" : "")} onClick={() => setActive(i)}>
            {f}
          </button>
        ))}
      </div>

      {/* Grid */}
      <div className="work-grid">
        {visible.map((p) => (
          <a className="work-card" key={p.id} href={p.href} target={p.href.startsWith("http") ? "_blank" : undefined} rel="noopener">
            <div className="work-card-top">
              <span className="work-cat mono">{L(p.cat, lang)}</span>
              <span className="work-arrow mono">↗</span>
            </div>
            <h4>{p.title}</h4>
            <p>{L(p.sub, lang)}</p>
            <div className="chips">{p.stack.map((t) => <span className="chip mono" key={t}>{t}</span>)}</div>
            <span className="work-cta mono">{L(p.cta, lang)}</span>
          </a>
        ))}
      </div>
      <a className="more-link mono" href={S.meta.github} target="_blank" rel="noopener">{L(W.more, lang)}</a>
    </section>
  );
}

/* ---------------- Experience ---------------- */
function ExperienceItem({ job, lang, idx }) {
  const [open, setOpen] = useState(false);
  const S = window.SITE, X = S.experience;
  const bullets = L(job.bullets, lang) || [];
  const ach = L(job.achievements, lang) || [];
  const hasDetail = bullets.length > 0 || ach.length > 0;
  return (
    <div className={"job" + (open ? " open" : "")}>
      <div className="job-head" onClick={() => hasDetail && setOpen(!open)} role={hasDetail ? "button" : undefined}>
        <div className="job-marker"><span className="job-no mono">{String(idx + 1).padStart(2, "0")}</span></div>
        <div className="job-main">
          <h3 className="job-role">{L(job.role, lang)} <span className="job-org">@ {job.org}</span></h3>
          <div className="job-meta mono">
            <span>{job.period}</span><span className="job-dot">·</span><span>{L(job.place, lang)}</span>
          </div>
          <p className="job-summary">{L(job.summary, lang)}</p>
          <div className="chips">{job.tags.map((t) => <span className="chip mono" key={t}>{t}</span>)}</div>
          {open && hasDetail && (
            <div className="job-detail">
              {bullets.length > 0 && (
                <ul className="job-bullets">
                  {bullets.map((b, i) => <li key={i}>{b}</li>)}
                </ul>
              )}
              {ach.length > 0 && (
                <div className="job-ach">
                  <span className="ach-label mono">★ {L(X.achievementsLabel, lang)}</span>
                  <ul>{ach.map((a, i) => <li key={i}>{a}</li>)}</ul>
                </div>
              )}
            </div>
          )}
        </div>
        {hasDetail && (
          <button className="job-toggle mono" aria-expanded={open}>
            {L(X.expand, lang)}<span className="caret">{open ? "−" : "+"}</span>
          </button>
        )}
      </div>
    </div>
  );
}

function Experience({ lang }) {
  const S = window.SITE, X = S.experience;
  return (
    <section id="experience" className="section" data-screen-label="Experience">
      <SectionHead no="/ 03" title={L(X.title, lang)} intro={L(X.intro, lang)} />
      <div className="jobs">
        {X.jobs.map((j, i) => <ExperienceItem key={i} job={j} lang={lang} idx={i} />)}
      </div>
    </section>
  );
}

/* ---------------- Contact ---------------- */
function Contact({ lang }) {
  const S = window.SITE, C = S.contact, M = S.meta;
  return (
    <section id="contact" className="section contact" data-screen-label="Contact">
      <div className="grid-bg"></div>
      <div className="contact-inner">
        <span className="kicker">{L(C.avail, lang)}</span>
        <h2 className="contact-title">{L(C.title, lang)}</h2>
        <p className="contact-blurb">{L(C.blurb, lang)}</p>
        <a className="contact-email" href={"mailto:" + M.email}>{M.email}</a>
        <div className="contact-links mono">
          <a href={M.linkedin} target="_blank" rel="noopener">LinkedIn ↗</a>
          <a href={M.github} target="_blank" rel="noopener">GitHub ↗</a>
          <a href={"mailto:" + M.email}>{L(C.emailLabel, lang)} ↗</a>
          <span className="contact-phone">{M.phone}</span>
        </div>
        <div className="contact-foot mono">
          © 2026 {M.name}. {L(C.rights, lang)}
        </div>
      </div>
    </section>
  );
}

/* ---------------- shared section header ---------------- */
function SectionHead({ no, title, intro }) {
  return (
    <div className="sec-head">
      <span className="sec-no mono">{no}</span>
      <h2 className="sec-title">{title}</h2>
      {intro ? <p className="sec-intro">{intro}</p> : null}
    </div>
  );
}

Object.assign(window, { SideNav, Hero, Expertise, Work, Experience, Contact, SectionHead, L });