// About page — reads from window.__C (content.json)

const _ah = () => window.c('about.hero', {});
const _amis = () => window.c('about.mission', {});
const _avis = () => window.c('about.vision', {});
const _aval = () => window.c('about.values', {});
const _atim = () => window.c('about.timeline', {});
const _atea = () => window.c('about.team', {});
const _asus = () => window.c('about.sustainability', {});
const _ates = () => window.c('about.testimonials', {});
const _acert = () => window.c('about.certifications', []);

function AboutHero() {
  const h = _ah();
  return (
    <section className="section" style={{ paddingTop: 'clamp(56px, 7vw, 112px)', paddingBottom: 'clamp(48px, 6vw, 96px)' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 24 }}>{h.eyebrow}</div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 8vw, 160px)', maxWidth: '14ch' }}>
          {h.headline}
        </h1>
        <div className="grid-12 about-intro" style={{ marginTop: 64, alignItems: 'start', columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 6' }} className="about-intro-l">
            <p style={{ fontSize: 'clamp(17px, 1.6vw, 24px)', lineHeight: 1.4, color: 'var(--muted)' }}>
              {h.intro_left}
            </p>
          </div>
          <div style={{ gridColumn: 'span 6' }} className="about-intro-r">
            <p style={{ fontSize: 17, color: 'var(--muted)', fontWeight: "400" }}>
              {h.intro_right}
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function MissionVision() {
  const mis = _amis();
  const vis = _avis();
  return (
    <section className="section" style={{ background: 'var(--cobalt)', color: 'var(--white)', position: 'relative', overflow: 'hidden' }}>
      <HouseDeco color="white" opacity={0.08} count="medium" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-12 mv-grid" style={{ alignItems: 'start', rowGap: 64, columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 5' }} className="mv-l">
            <Reveal>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 16 }}>{mis.eyebrow}</div>
              <h2 style={{ maxWidth: '10ch', fontSize: 'clamp(32px, 4.5vw, 80px)' }}>
                {mis.headline}
              </h2>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 7' }} className="mv-r">
            <Reveal delay={120}>
              <p style={{ fontSize: 'clamp(17px, 1.5vw, 22px)', lineHeight: 1.55, color: 'rgba(255,255,255,0.92)' }}>
                {mis.body}
              </p>
            </Reveal>
          </div>

          <div style={{ gridColumn: 'span 5' }} className="mv-l">
            <Reveal delay={200}>
              <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.6)', marginBottom: 16 }}>{vis.eyebrow}</div>
              <h2 style={{ maxWidth: '10ch', fontSize: 'clamp(32px, 4.5vw, 80px)' }}>
                {vis.headline}
              </h2>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 7' }} className="mv-r">
            <Reveal delay={320}>
              <p style={{ fontSize: 'clamp(17px, 1.5vw, 22px)', lineHeight: 1.55, color: 'rgba(255,255,255,0.92)' }}>
                {vis.body}
              </p>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

function Values() {
  const v = _aval();
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 7' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{v.eyebrow}</div>
              <h2>{v.headline}</h2>
            </Reveal>
          </div>
        </div>
        <div className="grid-12 values-grid">
          {(v.items || []).map((it, i) =>
          <Reveal key={it.id} delay={i * 80} style={{ gridColumn: 'span 6' }} className="values-cell">
              <div style={{ padding: '40px 0', borderTop: '1px solid var(--line)', display: 'flex', gap: 24, alignItems: 'flex-start' }} className="values-row">
                <div className="mono" style={{ fontSize: 14, color: 'var(--muted)', letterSpacing: '0.1em', minWidth: 40 }}>{it.id}</div>
                <div>
                  <h3 style={{ fontSize: 'clamp(22px, 2.2vw, 36px)' }}>{it.title}</h3>
                  <p style={{ marginTop: 16, color: 'var(--muted)', fontSize: 17, lineHeight: 1.55 }}>{it.body}</p>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function CompanyTimeline() {
  const t = _atim();
  return (
    <section className="section" style={{ background: 'var(--surface)', color: 'var(--surface-fg)' }}>
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t.eyebrow}</div>
              <h2>{t.headline}</h2>
            </Reveal>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {(t.events || []).map((e, i) =>
          <Reveal key={i} delay={i * 60}>
              <div className="timeline-row" style={{ padding: '32px 0', borderTop: '1px solid var(--line)', alignItems: 'baseline' }}>
                <div className="mono timeline-year" style={{ fontSize: 'clamp(28px, 3vw, 48px)', fontWeight: 500, color: 'var(--accent)', letterSpacing: '-0.03em' }}>{e.year}</div>
                <h3 className="timeline-title" style={{ fontSize: 'clamp(20px, 2vw, 28px)' }}>{e.title}</h3>
                <p className="timeline-body" style={{ color: 'var(--muted)', fontSize: 16, lineHeight: 1.55 }}>{e.body}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function Leadership() {
  const t = _atea();
  const members = t.members || [];
  const ceo = members[0];

  // Single-CEO featured layout
  if (members.length === 1 && ceo) {
    return (
      <section className="section">
        <div className="container">
          <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
            <div style={{ gridColumn: 'span 8' }}>
              <Reveal>
                <div className="eyebrow" style={{ marginBottom: 16 }}>{t.eyebrow}</div>
                <h2>{t.headline}</h2>
              </Reveal>
            </div>
          </div>

          <div className="grid-12 ceo-feature" style={{ alignItems: 'stretch', columnGap: 'clamp(32px, 5vw, 80px)' }}>
            <div style={{ gridColumn: 'span 5' }} className="ceo-img">
              <Reveal>
                <div style={{ background: 'var(--cobalt)', position: 'relative', aspectRatio: '4/5', overflow: 'hidden' }}>
                  <Img
                    src={ceo.image}
                    label={`${ceo.name} portrait`}
                    style={{ height: '100%', aspectRatio: 'auto', background: 'var(--cobalt)' }}
                    cobalt />
                  
                </div>
              </Reveal>
            </div>
            <div style={{ gridColumn: 'span 7', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32 }} className="ceo-text">
              <Reveal delay={120}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--muted)', letterSpacing: '0.12em', textTransform: 'uppercase' }}>{ceo.tag || 'Leadership'}</div>
                <h3 style={{ marginTop: 16, fontSize: 'clamp(28px, 3.5vw, 48px)', letterSpacing: '-0.03em' }}>{ceo.name}</h3>
                <div style={{ color: 'var(--accent)', fontSize: 17, marginTop: 8, fontWeight: 500 }}>{ceo.role}</div>
                {ceo.bio &&
                <p style={{ marginTop: 32, color: 'var(--muted)', fontSize: 'clamp(16px, 1.3vw, 18px)', lineHeight: 1.6, margin: "32px 0px 0px" }}>
                    {ceo.bio}
                  </p>
                }
              </Reveal>
              <Reveal delay={200}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, paddingTop: 24, borderTop: '1px solid var(--line)' }}>
                  <HouseSymbol size={20} color="var(--accent)" />
                  <span className="eyebrow" style={{ margin: 0 }}>PT Solusi Multiguna Prima</span>
                </div>
              </Reveal>
            </div>
          </div>
        </div>
      </section>);

  }

  // Fallback: multi-member grid (legacy)
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t.eyebrow}</div>
              <h2>{t.headline}</h2>
            </Reveal>
          </div>
        </div>
        <div className="team-grid">
          {members.map((p, i) =>
          <Reveal key={i} delay={i * 80} className="team-cell">
              <Img src={p.image} label={`${p.tag} portrait`} ratio="4/5" cobalt={i === 0} />
              <h4 style={{ marginTop: 16, fontSize: 22, fontWeight: 500, letterSpacing: '-0.02em' }}>{p.name}</h4>
              <div style={{ color: 'var(--muted)', fontSize: 14, marginTop: 4 }}>{p.role}</div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function Sustainability() {
  const s = _asus();
  return (
    <section className="section" style={{ background: 'var(--midnight)', color: 'var(--rice)', position: 'relative', overflow: 'hidden' }}>
      <HouseDeco color="var(--dodger)" opacity={0.06} count="medium" />
      <div className="container" style={{ position: 'relative' }}>
        <div className="grid-12 sustain-grid" style={{ alignItems: 'center', columnGap: 'clamp(32px, 5vw, 80px)' }}>
          <div style={{ gridColumn: 'span 5' }} className="sustain-l">
            <Reveal>
              <div className="eyebrow" style={{ color: 'rgba(238,234,218,0.6)', marginBottom: 16 }}>{s.eyebrow}</div>
              <h2 style={{ color: 'var(--rice)' }}>{s.headline}</h2>
              <p style={{ marginTop: 32, color: 'rgba(238,234,218,0.78)', fontSize: 'clamp(17px, 1.4vw, 19px)', lineHeight: 1.55 }}>
                {s.body}
              </p>
            </Reveal>
          </div>
          <div style={{ gridColumn: 'span 7' }} className="sustain-r">
            <Reveal delay={120}>
              <div className="sustain-stats">
                {(s.stats || []).map((st, i) =>
                <div key={i} className="sustain-stat" style={{ borderTop: '1px solid rgba(238,234,218,0.18)', padding: '32px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
                    <div style={{ fontSize: 'clamp(32px, 4vw, 64px)', fontWeight: 500, letterSpacing: '-0.055em', color: 'var(--dodger)' }}>{st.num}</div>
                    <div style={{ color: 'rgba(238,234,218,0.7)', fontSize: 14, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{st.label}</div>
                  </div>
                )}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

function Testimonials() {
  const t = _ates();
  return (
    <section className="section">
      <div className="container">
        <div className="grid-12 sec-head" style={{ alignItems: 'end', marginBottom: 64 }}>
          <div style={{ gridColumn: 'span 8' }}>
            <Reveal>
              <div className="eyebrow" style={{ marginBottom: 16 }}>{t.eyebrow}</div>
              <h2>{t.headline}</h2>
            </Reveal>
          </div>
        </div>
        <div className="grid-12 testim-grid">
          {(t.items || []).map((q, i) =>
          <Reveal key={i} delay={i * 100} style={{ gridColumn: 'span 4' }} className="testim-cell">
              <div style={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', gap: 32, padding: '32px 0', borderTop: '2px solid var(--accent)' }}>
                <p style={{ fontSize: 'clamp(17px, 1.5vw, 22px)', lineHeight: 1.4, letterSpacing: '-0.01em' }}>
                  "{q.quote}"
                </p>
                <div style={{ color: 'var(--muted)', fontSize: 13, textTransform: 'uppercase', letterSpacing: '0.1em' }}>
                  {q.who}
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function Certifications() {
  const certs = _acert();
  return (
    <section style={{ background: 'var(--surface)', color: 'var(--surface-fg)', padding: '64px 0' }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 32, textAlign: 'center' }}>Tested · Certified · Trusted</div>
        <Marquee items={certs} />
      </div>
    </section>);

}

function AboutPage({ setRoute, tweaks }) {
  return (
    <div className={`page page-fade house-overlay--${tweaks.houseOverlay}`}>
      <AboutHero />
      <MissionVision />
      <Values />
      <CompanyTimeline />
      <Leadership />
      <Sustainability />
      <Testimonials />
      <Certifications />
    </div>);

}

Object.assign(window, { AboutPage });