// CONTACTO — closing plate, inspired by page 9: big logo, minimal, lots of negative space.
function Contacto() {
  return (
    <section id="contacto" data-screen-label="08 Contacto" style={{
      position: 'relative', padding: '160px 48px 60px',
      background: 'var(--grey-paper)',
      minHeight: '100vh',
      display: 'flex', flexDirection: 'column', justifyContent: 'space-between'
    }}>
      <PageNumber n={8} label="CIERRE" />

      {/* Top row — contact details, editorial */}
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
        borderBottom: '1px solid var(--ink)', paddingBottom: 18, marginTop: 34, flexWrap: 'wrap', gap: 20
      }}>
        <span className="eyebrow" style={{ color: 'var(--red)' }}>§ 07 · Contacto</span>
        <span className="eyebrow" style={{ opacity: .55 }}>Pl. 09 — Cierre</span>
      </div>

      {/* Center: giant logo + phrase */}
      <div style={{
        padding: '60px 0', textAlign: 'center',
        display: 'flex', flexDirection: 'column', gap: 50, alignItems: 'center'
      }}>
        <div className="eyebrow" style={{ color: 'var(--red)' }}>
          El modo de identificar seres, cosas o conceptos abstractos.
        </div>
        <NomenMark size="min(90vw, 1200px)" src="assets/logo/nomen-wordmark-closing.png" />
        <p style={{
          fontFamily: 'Georgia, serif', fontStyle: 'italic',
          fontSize: 'clamp(22px, 3vw, 32px)', margin: 0,
          maxWidth: 600, textWrap: 'balance'
        }}>
          &ldquo; Quiero que mi diseño sepa identificar todas y cada una de las cosas existentes. &rdquo;
        </p>

        <a
          href="https://joaquialbornoz20191b.myportfolio.com/work"
          target="_blank"
          rel="noreferrer"
          className="btn btn-red"
          style={{
            background: 'var(--red)', color: '#fff', borderColor: 'var(--red)',
            textDecoration: 'none'
          }}
        >
          Ver más trabajos en Behance
          <span className="arrow" aria-hidden>↗</span>
        </a>
      </div>

      {/* Bottom details grid */}
      <div>
        <div className="c-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
          paddingTop: 24, borderTop: '1px solid var(--ink)'
        }}>
          <style>{`
            @media (max-width: 760px){ .c-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 440px){ .c-grid { grid-template-columns: 1fr !important; } }
          `}</style>
          <Contact k="Joaquina" v="Albornoz" />
          <Contact k="Rol" v="Gestora de estéticas · Trend forecasting" />
          <Contact k="Email" v="joaquialbornoz2021@outlook.es" link="mailto:joaquialbornoz2021@outlook.es"/>
          <Contact k="Instagram" v="@nombre________lab" link="https://instagram.com/nombre________lab"/>
          <Contact k="Behance" v="/joaquialbornoz" link="https://joaquialbornoz20191b.myportfolio.com/work"/>
          <Contact k="Teléfono" v="+54 11 3366 0185" />
          <Contact k="Dirección" v="Núñez · Buenos Aires · Argentina" />
          <Contact k="Idiomas" v="Español nativo · Inglés avanzado" />
          <Contact k="Disponibilidad" v="2026 — Abierta a briefs" />
        </div>

        {/* Last foot strip */}
        <div style={{
          marginTop: 32, paddingTop: 14, borderTop: '1px solid rgba(10,10,10,.35)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 14
        }}>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
            <FiveBars width={68} color="var(--red)" />
            <span className="eyebrow" style={{ opacity: .55 }}>NOMEN · sistema personal · 2026</span>
          </div>
          <span className="eyebrow" style={{ opacity: .55 }}>
            Portfolio NOMEN × Albornoz Joaquina
          </span>
        </div>
      </div>
    </section>
  );
}

function Contact({ k, v, link }) {
  const Tag = link ? 'a' : 'div';
  return (
    <Tag href={link} target={link ? '_blank' : undefined} rel="noreferrer" style={{
      display: 'flex', flexDirection: 'column', gap: 4,
      borderLeft: '2px solid var(--red)', paddingLeft: 12,
      textDecoration: 'none', color: 'var(--ink)'
    }}>
      <span className="eyebrow" style={{ opacity: .55, fontSize: 10 }}>{k}</span>
      <span className="titular" style={{ fontSize: 18, fontWeight: 500 }}>{v}</span>
    </Tag>
  );
}

Object.assign(window, { Contacto });