// ============================================================
// HEADER + HERO + MANIFESTO + FOOTER
// ============================================================

const { useState } = React;

function Header({ t, lang, onLang, onCta }) {
  return (
    <header className="masthead">
      <div className="page masthead-inner">
        <a href="#top" className="brand">
          <div className="brand-mark">AV</div>
          <div className="brand-text">
            <div className="name">Andrey Viana</div>
            <div className="role">{t.hero.kicker}</div>
          </div>
        </a>

        <nav className="nav">
          <a href="#manifesto">{t.nav.manifesto}</a>
          <a href="#services">{t.nav.services}</a>
          <a href="#stack">{t.nav.stack}</a>
          <a href="#work">{t.nav.work}</a>
          <a href="#process">{t.nav.process}</a>
          <a href="#contact">{t.nav.contact}</a>
        </nav>

        <div className="header-cta">
          <LangSwitch lang={lang} onLang={onLang} />
          <a href="#contact" className="btn btn-primary" onClick={onCta}>
            {t.nav.cta}
            <Icons.arrow />
          </a>
        </div>
      </div>
    </header>
  );
}

function LangSwitch({ lang, onLang, ariaLabel }) {
  return (
    <div
      className="lang-switch"
      role="group"
      aria-label={ariaLabel || 'Language'}
    >
      <button
        type="button"
        className={'lang-opt' + (lang === 'pt' ? ' is-active' : '')}
        onClick={() => onLang && onLang('pt')}
        aria-pressed={lang === 'pt'}
      >PT</button>
      <span className="lang-sep" aria-hidden="true">/</span>
      <button
        type="button"
        className={'lang-opt' + (lang === 'en' ? ' is-active' : '')}
        onClick={() => onLang && onLang('en')}
        aria-pressed={lang === 'en'}
      >EN</button>
    </div>
  );
}

function Hero({ t }) {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="page">
        <div className="hero-grid">
          <div className="hero-main">
            <div className="hero-eyebrow">
              <span className="overline">{t.hero.eyebrow}</span>
            </div>

            <h1 className="hero-title">
              <span className="row">{t.hero.titleA}</span>
              <span className="row"><em>{t.hero.titleB}</em></span>
            </h1>

            <p className="lead hero-tagline">
              {t.hero.lead}
            </p>

            <div className="hero-cta">
              <a href="#contact" className="btn btn-primary">
                {t.hero.ctaPrimary}
                <Icons.arrow />
              </a>
              <a href="#work" className="btn btn-ghost">
                {t.hero.ctaGhost}
                <Icons.arrow />
              </a>
            </div>

            <div className="hero-marginalia">
              {t.hero.stats.map((s, i) => (
                <div className="marginalia-item" key={i}>
                  <span className="num">{s.num}</span>
                  <span className="lbl">{s.lbl}</span>
                </div>
              ))}
            </div>
          </div>

          <div className="hero-portrait">
            <div className="frame">
              <div className="tag">
                <span className="pulse" />
                {t.hero.portrait.tag}
              </div>
              <img src="assets/portrait.png" alt="Andrey Viana" />
            </div>
            <div className="caption-strip">
              <div>
                <div className="lbl">{t.hero.portrait.profile.lbl}</div>
                <div className="val">{t.hero.portrait.profile.val}</div>
              </div>
              <div>
                <div className="lbl">{t.hero.portrait.scope.lbl}</div>
                <div className="val">{t.hero.portrait.scope.val}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function SectionHead({ num, label, title, kicker }) {
  return (
    <div className="section-head">
      <div className="meta">
        <span className="num">— {num} / 06</span>
        <span className="label">{label}</span>
      </div>
      <div>
        <h2 className="section-title">{title}</h2>
        {kicker && <p className="lead" style={{ marginTop: '20px', maxWidth: '60ch' }}>{kicker}</p>}
      </div>
    </div>
  );
}

function Manifesto({ t }) {
  const m = t.manifesto;
  return (
    <section className="section" id="manifesto" data-screen-label="02 Manifesto">
      <div className="page">
        <SectionHead num={m.num} label={m.label} title={m.title} kicker={m.kicker} />
        <div className="manifesto-grid">
          {m.items.map((it, i) => (
            <div className="manifesto-item" key={i}>
              <span className="num">— {it.num}</span>
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer({ t, lang, onLang }) {
  const f = t.footer;
  return (
    <footer className="footer">
      <div className="page">
        <div className="footer-grid">
          <div>
            <div className="brand">
              <div className="brand-mark">AV</div>
              <div className="brand-text">
                <div className="name">Andrey Viana</div>
                <div className="role">{t.hero.kicker}</div>
              </div>
            </div>
            <p className="colophon">{f.colophon}</p>
          </div>
          {f.cols.map((col, i) => (
            <div key={i}>
              <h6>{col.h}</h6>
              <ul>
                {col.items.map((it, j) => <li key={j}><a href="#">{it}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="footer-bottom">
          <span>{f.copy}</span>
          <LangSwitch lang={lang} onLang={onLang} ariaLabel={t.tweaks.lang} />
          <span>{f.ed}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Header, Hero, SectionHead, Manifesto, Footer, LangSwitch });