/* Sections B: Experience, Projects, Contact, Footer — i18n */

const { useState: useStateB, useEffect: useEffectB, useRef: useRefB } = React;

const ExperienceSection = ({ data, lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  const [active, setActive] = useStateB(0);
  if (!data || !data.length) return null;
  const cur = data[active];

  return (
    <section className="exp section-pad" id="experience">
      <div className="section-head reveal">
        <span className="section-num">{t('exp.num')}</span>
        <h2 className="section-title" dangerouslySetInnerHTML={html('exp.title.html')} />
        <span className="section-kicker">{t('exp.kicker')}</span>
      </div>

      <div className="exp__grid reveal">
        <div className="exp__list" role="listbox">
          {data.map((e, i) => (
            <div
              key={i}
              className={"exp__row" + (i === active ? " active" : "")}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}
              data-hover
            >
              <div className="exp__date">{e.date}</div>
              <div>
                <div className="exp__rowtitle">{e.title}</div>
                <span className="exp__company">{e.company}</span>
              </div>
              <span className="exp__arrow">→</span>
            </div>
          ))}
        </div>
        <div className="exp__detail" key={active}>
          <div className="exp__detail-date">{cur.date}</div>
          <h3 className="exp__detail-title">{cur.title}</h3>
          <div className="exp__detail-company">{t('exp.at')} {cur.company}</div>
          <p className="exp__detail-desc">{cur.description}</p>
          {cur.moreDescription && (
            <div className="exp__detail-more">{cur.moreDescription}</div>
          )}
          {cur.links && cur.links.length > 0 && (
            <div className="exp__detail-links">
              {cur.links.map((l, i) => (
                <a key={i} className="exp__detail-link" href={l.url} target="_blank" rel="noreferrer" data-hover>
                  {l.label} <span>↗</span>
                </a>
              ))}
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

const PROJECT_SIZES = [
  'xl', 'l',
  'm', 'm',
  'l', 's', 'xs',
  's', 's', 's',
  'm', 'm',
  'xs', 'xs', 'xs', 'xs',
  'm',
];

const ProjectsSection = ({ data, lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  if (!data || !data.length) return null;
  return (
    <section className="projects section-pad" id="projects">
      <div className="section-head reveal">
        <span className="section-num">{t('proj.num')}</span>
        <h2 className="section-title" dangerouslySetInnerHTML={html('proj.title.html')} />
        <span className="section-kicker">{t('proj.kicker')}</span>
      </div>

      <div className="projects__grid">
        {data.map((p, i) => {
          const size = PROJECT_SIZES[i] || 's';
          return (
            <a
              key={i}
              className={"proj reveal proj--" + size}
              style={{ transitionDelay: (Math.min(i, 8)*0.04) + 's' }}
              href="#"
              onClick={(e) => e.preventDefault()}
              data-hover
            >
              {p.image && (
                <div className="proj__img-wrap">
                  <img className="proj__img" src={p.image} alt={p.title} loading="lazy" />
                  <div className="proj__overlay"></div>
                </div>
              )}
              <div className="proj__content">
                <div className="proj__top">
                  <span className="proj__date">{p.date}</span>
                  <span className="proj__num">P/{String(i+1).padStart(2, '0')}</span>
                </div>
                <div className="proj__bottom">
                  <h3 className="proj__title">{p.title}</h3>
                  <p className="proj__desc">{p.description}</p>
                </div>
              </div>
            </a>
          );
        })}
      </div>
    </section>
  );
};

const ContactSection = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  const titleRef = useRefB(null);
  useEffectB(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          titleRef.current?.querySelectorAll('.underline').forEach(u => u.classList.add('in'));
        }
      });
    }, { threshold: 0.3 });
    if (titleRef.current) io.observe(titleRef.current);
    return () => io.disconnect();
  }, [lang]);

  return (
    <section className="contact" id="contact">
      <div className="contact__lead reveal">{t('contact.num')}</div>
      <h2 className="contact__title reveal" ref={titleRef} dangerouslySetInnerHTML={html('contact.title.html')} />

      <a
        className="contact__cta hoverable"
        href="mailto:leonardo.cotta2002@gmail.com"
        data-hover
      >
        <span className="dot"></span>
        {t('contact.cta')}
        <span>→</span>
      </a>

      <div className="contact__grid">
        <div className="contact__col">
          <div className="contact__col-label">{t('contact.col.email')}</div>
          <a href="mailto:leonardo.cotta2002@gmail.com" data-hover>leonardo.cotta2002<br/>@gmail.com</a>
        </div>
        <div className="contact__col">
          <div className="contact__col-label">{t('contact.col.social')}</div>
          <a href="https://www.linkedin.com/in/leonardo-cotta" target="_blank" rel="noreferrer" data-hover>LinkedIn ↗</a>
          <a href="https://leonardocotta.it" data-hover>leonardocotta.it ↗</a>
        </div>
        <div className="contact__col">
          <div className="contact__col-label">{t('contact.col.base')}</div>
          <span>{t('contact.base.city')}</span>
          <span>{t('contact.base.remote')}</span>
        </div>
        <div className="contact__col">
          <div className="contact__col-label">{t('contact.col.status')}</div>
          <span style={{ color: 'var(--accent)' }}>{t('contact.status.available')}</span>
          <span style={{ fontSize: '13px', color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>{t('contact.status.detail')}</span>
        </div>
      </div>
    </section>
  );
};

const Footer = ({ lang }) => {
  const t = (k) => window.__t(lang, k);
  const html = (k) => ({ __html: window.__t(lang, k) });
  return (
    <footer className="footer">
      <span>© 2026 <strong>Leonardo Cotta</strong></span>
      <span>{t('footer.role')}</span>
      <span dangerouslySetInnerHTML={html('footer.built.html')} />
    </footer>
  );
};

Object.assign(window, { ExperienceSection, ProjectsSection, ContactSection, Footer });