/* Section components. Depends on window.CONTENT. Exports to window. */
const { useState, useEffect, useRef } = React;

const t = (obj, lang) => obj && typeof obj === "object" ? obj[lang] : obj;

function Arrow({ className }) {
  return (
    <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M7 17 17 7M9 7h8v8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

/* morphing word — blur + fade + slide (animated-blur style) */
function MorphWord({ words }) {
  const [i, setI] = useState(0);
  const widest = words.reduce((a, b) => (b.length > a.length ? b : a), "");
  useEffect(() => {
    if (matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setI((p) => (p + 1) % words.length), 2200);
    return () => clearInterval(id);
  }, [words]);
  return (
    <span className="morph-word">
      <span className="morph-word__ghost">{widest}</span>
      {words.map((w, idx) =>
      <span key={idx} className={"morph-word__item" + (idx === i ? " on" : "")} aria-hidden={idx !== i}>{w}</span>
      )}
    </span>);

}

/* ---------------- HERO ---------------- */
function Hero({ lang }) {
  const C = window.CONTENT.hero;
  const words = C.headline[lang];
  const ital = C.italicIdx[lang] || [];
  const morph = C.morph[lang];
  return (
    <header className="hero wrap section" id="top">
      <div className="hero__top">
        <div className="hero__lead">
          <div className="hero__avail load-up" style={{ animationDelay: "2.7s" }}><span className="pulse"></span>{t(C.available, lang)}</div>
          <p className="hero__intro load-up" style={{ animationDelay: "2.9s" }}>{t(C.intro, lang).split("\n").map((s, i, a) => (<React.Fragment key={i}>{s}{i < a.length - 1 ? <br /> : null}</React.Fragment>))}</p>
        </div>
      </div>

      <h1 className="hero__headline">
        {words.map((w, i) => {
          if (w === "{{morph}}") {
            return (
              <span key={i} className="load-up" style={{ display: "inline-block", verticalAlign: "top", animationDelay: 2.55 + i * 0.06 + "s" }}>
                <MorphWord words={morph} />{i < words.length - 1 ? "\u00A0" : ""}
              </span>);

          }
          return (
            <span key={i} style={{ display: "inline-block", overflow: "hidden", verticalAlign: "top" }}>
              <span
                className="reveal-word"
                style={{ animationDelay: 2.55 + i * 0.06 + "s" }}>
                
                {ital.includes(i) ? <em>{w}</em> : w}
              </span>
              {i < words.length - 1 ? "\u00A0" : ""}
            </span>);

        })}
      </h1>

      <div className="hero__scroll load-up" style={{ animationDelay: "3.3s" }}>
        {t(C.scroll, lang)}
        <span className="scroll-mouse" aria-hidden="true">
          <span className="scroll-mouse__wheel"></span>
        </span>
        <span className="scroll-chevrons" aria-hidden="true">
          <span className="scroll-chev"></span>
          <span className="scroll-chev"></span>
        </span>
      </div>

      <Marquee />
    </header>);

}

function Marquee() {
  const cases = window.CONTENT.cases;
  const items = [...cases, ...cases];
  return (
    <div className="marquee">
      <div className="marquee__track">
        {items.map((c, i) =>
        <figure className="marquee__item" key={i}>
            <img src={c.img} alt="" loading="lazy" />
            <figcaption className="tag">{c.company}</figcaption>
          </figure>
        )}
      </div>
    </div>);

}

/* ---------------- STATEMENT ---------------- */
function Statement({ lang }) {
  const C = window.CONTENT.statement;
  const parts = C.body[lang];
  return (
    <section className="statement wrap section">
      <p className="eyebrow r-up" style={{ marginBottom: 28 }}>{t(C.eyebrow, lang)}</p>
      <h2 className="statement__h r-up">
        {parts[0]}<b>{parts[1]}</b>{parts[2]}<b>{parts[3]}</b><span className="dim">{parts[4]}</span>
      </h2>
    </section>);

}

/* ---------------- WORK (dark) ---------------- */
function Work({ lang }) {
  const C = window.CONTENT.work;
  const cases = window.CONTENT.cases;
  return (
    <section className="section dark" id="work">
      <div className="work wrap">
        <div className="work__head">
          <div>
            <p className="eyebrow r-up" style={{ marginBottom: 22 }}>{t(C.eyebrow, lang)}</p>
            <h2 className="r-up" style={{ whiteSpace: "pre-line" }}>{t(C.title, lang)}</h2>
          </div>
          <span className="work__count r-up">{t(C.note, lang)} / ’21—’24</span>
        </div>

        <div className="cases">
          {cases.map((c, i) =>
          <a className="case r-up" key={c.num} href="#" onClick={(e) => e.preventDefault()}>
              <div className="case__row">
                <span className="case__num">{c.num} / {c.year}</span>
                <div>
                  <h3 className="case__title">{t(c.title, lang)}</h3>
                  <div className="case__tags">
                    {c.tags.map((tg) => <span className="case__tag" key={tg}>{tg}</span>)}
                  </div>
                </div>
                <p className="case__sub"><span className="role">{c.company} · {t(c.role, lang)}</span>{t(c.sub, lang)}</p>
                <span className="case__arrow"><Arrow /></span>
              </div>
              <div className="case__media">
                <img data-parallax src={c.img} alt={t(c.title, lang)} loading="lazy" />
              </div>
            </a>
          )}
        </div>
      </div>
    </section>);

}

/* ---------------- ABOUT ---------------- */
function About({ lang }) {
  const C = window.CONTENT.about;
  return (
    <section className="section dark" id="about">
      <div className="about wrap">
        <p className="eyebrow r-up" style={{ marginBottom: 30 }}>{t(C.eyebrow, lang)}</p>
        <div className="about__grid">
          <div>
            <h2 className="about__lead r-up">{t(C.lead, lang)}</h2>
            <div className="about__blocks" data-stagger>
              {C.blocks.map((b, i) =>
              <div className="about__block r-up" key={i} style={{ "--i": i }}>
                  <h4>{t(b.h, lang)}</h4>
                  <p>{t(b.p, lang)}</p>
                </div>
              )}
            </div>
          </div>
          <figure className="about__photo r-up" style={{ margin: 0 }}>
            <img src={C.photo} alt="Marcus Martins" loading="lazy" />
            <figcaption>“{t(C.photoCap, lang)}”</figcaption>
          </figure>
        </div>
        <Experience lang={lang} />
      </div>
    </section>);

}

function Experience({ lang }) {
  const C = window.CONTENT.exp;
  return (
    <div className="exp">
      <p className="eyebrow r-up" style={{ marginBottom: 18 }}>{t(C.eyebrow, lang)}</p>
      <div>
        {C.items.map((it, i) =>
        <div className="exp__row r-up" key={i}>
            <span className="exp__role">{it.years}</span>
            <div>
              <div className="exp__co">{it.co}</div>
              <span className="exp__role">{t(it.role, lang)}</span>
            </div>
            <p className="exp__desc">{t(it.desc, lang)}</p>
          </div>
        )}
      </div>
    </div>);

}

/* ---------------- WORD TICKER (band between About & Contact) ---------------- */
function Ticker({ lang }) {
  const words = window.CONTENT.ticker[lang];
  const loop = [...words, ...words, ...words];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker__track">
        {loop.map((w, i) => (
          <span className="ticker__item" key={i}>
            <span className="ticker__word">{w}</span>
            <span className="ticker__sep">✳</span>
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------------- CONTACT + FOOTER (dark) ---------------- */
function Contact({ lang }) {
  const C = window.CONTENT.contact;
  const N = window.CONTENT.nav;
  return (
    <section className="section dark" id="contact">
      <div className="contact wrap">
        <p className="eyebrow r-up" style={{ marginBottom: 18 }}>{t(C.eyebrow, lang)}</p>
        <h2 className="contact__h r-up" style={{ whiteSpace: "pre-line" }}>{t(C.cta, lang)}</h2>
        <a className="contact__mail r-up" href={"mailto:" + C.mail}>
          {C.mail}<Arrow className="ar" />
        </a>

        <div className="footer">
          <div className="footer__col">
            <div className="footer__brand">Marcus<br />Martins</div>
          </div>
          <div className="footer__col">
            <h5>{t(C.say, lang)}</h5>
            <a href={"mailto:" + C.mail}>{C.mail}</a>
            <p>{C.phone}</p>
          </div>
          <div className="footer__col">
            <h5>{t(C.links, lang)}</h5>
            <a href="https://www.linkedin.com/in/marcusdesigner/" target="_blank" rel="noreferrer">LinkedIn ↗</a>
            <a href="https://drive.google.com/drive/folders/1_N8DxN5efVmFfhIeP_FvornGDYN33BJC?usp=sharing" target="_blank" rel="noreferrer">{t(N.resume, lang)} ↗</a>
          </div>
          <div className="footer__col">
            <h5>{t(C.pages, lang)}</h5>
            <a href="#work">{t(N.work, lang)}</a>
            <a href="#about">{t(N.about, lang)}</a>
            <a href="#top">Top ↑</a>
          </div>
        </div>

        <div className="footer__bottom">
          <span>© 2026 Marcus Martins — Latam</span>
          <span>Product Designer · UX / UI</span>
        </div>
      </div>
    </section>);

}

Object.assign(window, { Hero, Statement, Work, About, Contact, Arrow, Ticker });