/* about.jsx — Studio story, principles, team (dark) */

function AboutPage({ onNavigate }) {
  const { t, lang } = useLang();
  const { TEAM, PARTNERS } = window.JMC_DATA;

  return (
    <div className="dc-page-enter" data-screen-label="About">
      {/* Hero — text + image */}
      <section style={{ padding: '160px 0 80px', background: 'var(--canvas)' }}>
        <div className="dc-container">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 64 }}>
            <div>
              <div className="dc-eyebrow">{t.about.eyebrow}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
              <h1 style={{ fontSize: 'clamp(40px, 5.5vw, 72px)', fontWeight: 700, lineHeight: 1.02,
                            margin: 0, letterSpacing: '-1px' }}>
                {t.about.title}
              </h1>
              <p style={{ fontSize: 20, fontWeight: 300, lineHeight: 1.55,
                           color: 'var(--body)', margin: 0, maxWidth: 760 }}>
                {t.about.intro}
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Full-bleed image */}
      <section>
        <div style={{ position: 'relative', width: '100%', aspectRatio: '21/9',
                      overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0,
                        backgroundImage: `url("${window.RES('assets/portfolio/bess-03.png')}")`,
                        backgroundSize: 'cover', backgroundPosition: 'center' }} />
          <div style={{ position: 'absolute', inset: 0,
                        background: 'linear-gradient(to top, rgba(10,10,10,0.7) 0%, transparent 40%)' }} />
          <span style={{ position: 'absolute', left: 40, bottom: 24,
                          fontSize: 10, fontWeight: 700, letterSpacing: '2px',
                          textTransform: 'uppercase', color: 'rgba(255,255,255,0.65)' }}>
            Meridian BESS · Sunset Approach · UE5 Path Traced
          </span>
        </div>
      </section>

      {/* Story columns */}
      <section className="dc-section" style={{ background: 'var(--canvas)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={t.about.storyEyebrow}
              title={t.about.storyTitle}
              maxWidth={780}
            />
          </DcReveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 56 }}>
            {t.about.story.map((c, i) => (
              <DcReveal key={c.year} delay={i * 100}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                  <div style={{ fontSize: 14, fontWeight: 700, letterSpacing: '2px',
                                color: 'var(--accent)' }}>{c.year}</div>
                  <h4 style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.2, margin: 0 }}>
                    {c.title}
                  </h4>
                  <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.65,
                               color: 'var(--body)', margin: 0 }}>{c.body}</p>
                </div>
              </DcReveal>
            ))}
          </div>
        </div>
      </section>

      {/* Principles */}
      <section className="dc-section" style={{ background: 'var(--surface-soft)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={t.about.principlesEyebrow}
              title={t.about.principlesTitle}
              maxWidth={640}
            />
          </DcReveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
                         borderTop: '1px solid var(--hairline)',
                         borderLeft: '1px solid var(--hairline)' }}>
            {t.about.principles.map(([title, body]) => (
              <div key={title} style={{
                padding: 40,
                borderRight: '1px solid var(--hairline)',
                borderBottom: '1px solid var(--hairline)',
                background: 'var(--canvas)',
                display: 'flex', flexDirection: 'column', gap: 16,
                minHeight: 200,
              }}>
                <h4 style={{ fontSize: 24, fontWeight: 700, lineHeight: 1.2, margin: 0 }}>
                  {title}
                </h4>
                <p style={{ fontSize: 15, fontWeight: 300, lineHeight: 1.65,
                             color: 'var(--body)', margin: 0 }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="dc-section" style={{ background: 'var(--canvas)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={t.about.teamEyebrow}
              title={t.about.teamTitle}
              maxWidth={640}
              rightSlot={<DcTextLink onClick={() => onNavigate('contact')}>{t.about.teamCta}</DcTextLink>}
            />
          </DcReveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {TEAM.map((m, i) => (
              <DcReveal key={m.name} delay={(i % 3) * 80}>
                <TeamCard member={m} />
              </DcReveal>
            ))}
          </div>
        </div>
      </section>

      <DcSpecRow specs={[
        { value: '8', label: lang === 'es' ? 'Miembros' : 'Team members' },
        { value: '3', label: lang === 'es' ? 'Continentes' : 'Continents served' },
        { value: '96', label: 'RTX 6000 Ada' },
        { value: '2.4 PB', label: lang === 'es' ? 'Storage on-prem' : 'On-prem storage' },
      ]} />

      {/* Partners */}
      <section className="dc-section" style={{ background: 'var(--surface-soft)' }}>
        <div className="dc-container">
          <DcReveal>
            <DcSectionHeader
              eyebrow={t.about.partnersEyebrow}
              title={t.about.partnersTitle}
              maxWidth={640}
            />
          </DcReveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)',
                         borderTop: '1px solid var(--hairline)' }}>
            {PARTNERS.map(p => (
              <div key={p} style={{
                padding: '36px 16px',
                borderRight: '1px solid var(--hairline)',
                borderBottom: '1px solid var(--hairline)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 11, fontWeight: 700, letterSpacing: '2px',
                textTransform: 'uppercase', color: 'var(--muted)',
                textAlign: 'center', minHeight: 110,
                background: 'var(--canvas)',
              }}>
                {p}
              </div>
            ))}
          </div>
        </div>
      </section>

      <DcCTABand
        eyebrow={t.about.cta.eyebrow}
        title={t.about.cta.title}
        body={t.about.cta.body}
        primaryLabel={t.about.cta.primary}
        secondaryLabel={t.about.cta.secondary}
        onPrimary={() => onNavigate('contact')}
        onSecondary={() => onNavigate('portfolio')}
        image="assets/portfolio/bess-01.png"
      />
    </div>
  );
}

function TeamCard({ member }) {
  const { lang } = useLang();
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{
        aspectRatio: '4/5',
        background: 'var(--surface-card)',
        border: '1px solid var(--hairline)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        {/* portrait placeholder — dark abstract */}
        <div style={{
          position: 'absolute', inset: 0,
          background: `
            radial-gradient(ellipse 60% 40% at 50% 30%, #2a2a30 0%, transparent 60%),
            linear-gradient(to bottom, #16181c 0%, #1a1d22 60%, #0e1014 100%)
          `,
        }} />
        <div style={{ position: 'absolute', inset: 0,
                      background: 'radial-gradient(circle 80px at 50% 30%, rgba(255,255,255,0.06), transparent 70%)' }} />
        <div style={{ position: 'absolute', top: 20, left: 20,
                      fontSize: 96, fontWeight: 700, color: 'rgba(255,255,255,0.06)',
                      letterSpacing: '-3px', lineHeight: 1 }}>
          {member.initials}
        </div>
        <div style={{ position: 'absolute', bottom: 16, left: 20,
                      fontSize: 10, fontWeight: 700, letterSpacing: '2px',
                      textTransform: 'uppercase', color: 'var(--muted)' }}>
          {lang === 'es' ? 'Retrato' : 'Portrait'}
        </div>
      </div>
      <div>
        <h5 style={{ fontSize: 20, fontWeight: 700, lineHeight: 1.25, margin: 0 }}>
          {member.name}
        </h5>
        <div style={{ fontSize: 13, fontWeight: 400, color: 'var(--accent)',
                       letterSpacing: '0.5px', marginTop: 6 }}>
          {member.role[lang]}
        </div>
        <p style={{ fontSize: 14, fontWeight: 300, lineHeight: 1.55,
                     color: 'var(--body)', margin: '10px 0 0' }}>
          {member.bio[lang]}
        </p>
      </div>
    </div>
  );
}

window.AboutPage = AboutPage;