// ── About Page ────────────────────────────────────────────────────────────────

const AboutPage = ({ setPage }) => (
  <div style={{ background: '#F5F7FA', minHeight: '100vh', paddingTop: 80 }}>
    <AboutHero />
    <StorySection />
    <ValuesSection />
    <FullPortfolioSection />
    <AboutCTA setPage={setPage} />
  </div>
);

// ── Hero ──────────────────────────────────────────────────────────────────────

const AboutHero = () => (
  <section style={{ padding: 'clamp(4rem,8vh,7rem) clamp(1.5rem,8vw,8rem) clamp(3rem,6vh,5rem)' }}>
    <Reveal>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.8rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2D8CFF', marginBottom: '1.25rem' }}>Tentang Smartek X</p>
    </Reveal>
    <Reveal delay={80}>
      <h1 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(2.5rem,6vw,5rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', lineHeight: 1.1, marginBottom: '1.5rem', maxWidth: 780 }}>
        9 tahun membangun teknologi.<br />Kini hadir dengan semangat baru.
      </h1>
    </Reveal>
    <Reveal delay={160}>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 'clamp(1rem,1.5vw,1.2rem)', color: '#475569', lineHeight: 1.75, maxWidth: 620 }}>
        Smartek X adalah evolusi dari PT Smartek Sistem Kreasi Alpha — perusahaan teknologi yang telah beroperasi sejak 2015. Kami bukan startup baru. Kami adalah tim yang telah teruji, kini diperbarui dengan semangat, metodologi, dan positioning yang lebih tajam.
      </p>
    </Reveal>
  </section>
);

// ── Story ─────────────────────────────────────────────────────────────────────

const StorySection = () => {
  const milestones = [
    { year: '2015', title: 'Didirikan di Bandung', desc: 'PT Smartek Sistem Kreasi Alpha berdiri. Fokus awal: custom software development untuk klien lokal.' },
    { year: '2017', title: 'First Enterprise Client', desc: 'Masuk ke proyek enterprise pertama dengan Adira Finance — rebuild total ekosistem digital dicicilaja dari monolith ke microservices.' },
    { year: '2019', title: 'Ekspansi Regional', desc: 'Proyek internasional pertama: Sarawak Product Pavilion, Malaysia. Platform e-commerce + IoT + Voice Assistant.' },
    { year: '2021', title: 'Government & BUMN', desc: 'Kepercayaan dari Jasa Marga (Travoy) dan Ombudsman RI memperkuat track record di sektor publik.' },
    { year: '2026', title: 'Smartek X', desc: 'Repositioning sebagai Business-First Technology Partner. Dua lini jelas: Essentials untuk UMKM, Enterprise untuk transformasi besar.' },
  ];

  return (
    <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background: '#F4F6FA' }}>
      <Reveal>
        <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,3.5vw,2.5rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', lineHeight: 1.2, marginBottom: '3.5rem' }}>Perjalanan kami</h2>
      </Reveal>
      <div style={{ position: 'relative' }}>
        {/* Vertical line */}
        <div style={{ position: 'absolute', left: 'clamp(2.5rem,6vw,5rem)', top: 0, bottom: 0, width: 1, background: 'linear-gradient(to bottom, #2D8CFF, #B3D4FF)', opacity: 0.3 }} />
        <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem' }}>
          {milestones.map((m, i) => (
            <Reveal key={m.year} delay={i * 80}>
              <div style={{ display: 'flex', gap: 'clamp(2rem,6vw,5rem)', alignItems: 'flex-start', paddingLeft: 0 }}>
                {/* Year */}
                <div style={{ flexShrink: 0, width: 'clamp(3.5rem,8vw,6rem)', textAlign: 'right', paddingTop: 4 }}>
                  <span style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '0.85rem', fontWeight: 800, color: i === milestones.length - 1 ? '#2D8CFF' : '#94A3B8' }}>{m.year}</span>
                </div>
                {/* Dot */}
                <div style={{ flexShrink: 0, width: 12, height: 12, borderRadius: '50%', background: i === milestones.length - 1 ? '#2D8CFF' : '#CBD5E1', border: '2px solid #fff', boxShadow: i === milestones.length - 1 ? '0 0 0 4px rgba(45,140,255,0.2)' : 'none', marginTop: 5 }} />
                {/* Content */}
                <div>
                  <h3 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.1rem', fontWeight: 700, color: '#0D1117', marginBottom: '0.4rem', letterSpacing: '-0.02em' }}>{m.title}</h3>
                  <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.9rem', color: '#64748B', lineHeight: 1.65 }}>{m.desc}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

// ── Values ────────────────────────────────────────────────────────────────────

const ValuesSection = () => {
  const values = [
    { title: 'Business Outcome First', desc: 'Setiap keputusan teknis harus bisa dijelaskan dalam bahasa bisnis. Kami tidak mengimplementasikan teknologi karena "canggih" — tapi karena ia menyelesaikan masalah nyata.' },
    { title: 'Radical Efficiency', desc: 'Dengan AI tools yang tepat, 2 orang yang right bisa deliver apa yang dulu butuh tim 8–10 orang. Ini bukan klaim — ini cara kami beroperasi setiap hari.' },
    { title: 'Honest Partnership', desc: 'Kami tidak oversell, tidak overclaim, tidak overpromise. Jika Smartek X bukan solusi yang tepat untuk Anda, kami akan bilang terus terang.' },
    { title: 'Prove, Don\'t Claim', desc: 'Setiap klaim yang kami buat didukung oleh bukti yang bisa dicek. Portfolio kami nyata. Klien kami nyata. Angka yang kami sebut bisa diverifikasi.' },
  ];

  return (
    <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background: '#0D1117' }}>
      <Reveal>
        <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,3.5vw,2.5rem)', fontWeight: 800, color: '#F8FAFC', letterSpacing: '-0.03em', marginBottom: '3rem' }}>Nilai yang kami pegang</h2>
      </Reveal>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: '1.5rem' }}>
        {values.map((v, i) => (
          <Reveal key={v.title} delay={i * 80}>
            <div style={{ background: '#131A24', borderRadius: 20, padding: '2rem', border: '1px solid rgba(255,255,255,0.04)', transition: 'background 0.2s' }}
            onMouseEnter={e => e.currentTarget.style.background = '#1C2B3E'}
            onMouseLeave={e => e.currentTarget.style.background = '#131A24'}
            >
              <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(45,140,255,0.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: '1.25rem' }}>
                <span style={{ color: '#7AB8FF', fontSize: '1rem' }}>{'✦'}</span>
              </div>
              <h3 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.1rem', fontWeight: 700, color: '#F8FAFC', marginBottom: '0.75rem', letterSpacing: '-0.02em' }}>{v.title}</h3>
              <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.88rem', color: '#94A3B8', lineHeight: 1.7 }}>{v.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
};

// ── Full Portfolio ─────────────────────────────────────────────────────────────

const FullPortfolioSection = () => (
  <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)' }}>
    <div style={{ marginBottom: '3rem' }}>
      <Reveal>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.8rem', fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: '#2D8CFF', marginBottom: '1rem' }}>Portfolio Nyata</p>
      </Reveal>
      <Reveal delay={80}>
        <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,3.5vw,2.5rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', lineHeight: 1.2 }}>
          Bukan case study fiktif.<br />Ini proyek yang benar-benar kami kerjakan.
        </h2>
      </Reveal>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))', gap: '1.25rem' }}>
      {PORTFOLIO.map((p, i) => (
        <Reveal key={p.id} delay={i * 60}>
          <div style={{
            background: '#fff', borderRadius: 20, padding: '2rem',
            border: '1px solid #F1F5F9', boxShadow: '0 2px 12px rgba(0,0,0,0.04)',
            transition: 'transform 0.25s, box-shadow 0.25s',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.boxShadow = '0 10px 32px rgba(0,0,0,0.08)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = '0 2px 12px rgba(0,0,0,0.04)'; }}
          >
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.25rem' }}>
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
                {p.tags.slice(0, 2).map(t => (
                  <span key={t} style={{ background: `${p.accent}10`, color: p.accent, fontSize: '0.7rem', fontWeight: 600, padding: '2px 8px', borderRadius: 100, fontFamily: 'Inter, sans-serif' }}>{t}</span>
                ))}
              </div>
              <div style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.1rem', fontWeight: 800, color: p.accent }}>{p.metric}</div>
            </div>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.7rem', fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#94A3B8', marginBottom: '0.3rem' }}>{p.client}</p>
            <h3 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: '1.1rem', fontWeight: 700, color: '#0D1117', marginBottom: '0.65rem', letterSpacing: '-0.02em' }}>{p.project}</h3>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.85rem', color: '#64748B', lineHeight: 1.65 }}>{p.desc}</p>
            <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '0.75rem', color: '#94A3B8', marginTop: '1rem' }}>{p.category}</p>
          </div>
        </Reveal>
      ))}
    </div>
  </section>
);

// ── About CTA ─────────────────────────────────────────────────────────────────

const AboutCTA = ({ setPage }) => (
  <section style={{ padding: 'clamp(4rem,8vh,6rem) clamp(1.5rem,8vw,8rem)', background: '#F4F6FA', borderTop: '1px solid #F1F5F9' }}>
    <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'space-between', alignItems: 'center', gap: '2rem' }}>
      <Reveal>
        <div>
          <h2 style={{ fontFamily: 'Bricolage Grotesque, Inter, sans-serif', fontSize: 'clamp(1.75rem,3.5vw,2.5rem)', fontWeight: 800, color: '#0D1117', letterSpacing: '-0.03em', marginBottom: '0.75rem' }}>
            Siap bekerja sama?
          </h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: '1rem', color: '#64748B' }}>
            Mulai percakapan — tanpa komitmen, tanpa pitch deck.
          </p>
        </div>
      </Reveal>
      <Reveal delay={120} direction="right">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
          <button onClick={() => setPage('contact')} style={{ background: '#E8FF47', color: '#0D1117', border: 'none', borderRadius: 12, padding: '13px 28px', fontSize: '0.95rem', fontWeight: 600, cursor: 'pointer', fontFamily: 'Inter, sans-serif', boxShadow: '0 4px 16px rgba(45,140,255,0.3)' }}>
            Kontak Kami
          </button>
          <a href="https://wa.me/6281211008850?text=Halo%20Smartek%20X%2C%20saya%20ingin%20berdiskusi%20tentang%20kolaborasi." target="_blank" rel="noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: '#fff', color: '#1C2B3E', border: '1.5px solid #E2E8F0', borderRadius: 12, padding: '12px 22px', fontSize: '0.95rem', fontWeight: 600, fontFamily: 'Inter, sans-serif', textDecoration: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.05)' }}>
            <svg width="17" height="17" viewBox="0 0 24 24" fill="#25D366"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/><path d="M12 0C5.373 0 0 5.373 0 12c0 2.118.549 4.107 1.51 5.831L0 24l6.335-1.487A11.945 11.945 0 0012 24c6.627 0 12-5.373 12-12S18.627 0 12 0zm0 21.818a9.8 9.8 0 01-5.03-1.385l-.36-.214-3.762.883.932-3.654-.235-.376A9.79 9.79 0 012.182 12C2.182 6.57 6.57 2.182 12 2.182S21.818 6.57 21.818 12 17.43 21.818 12 21.818z"/></svg>
            WhatsApp
          </a>
        </div>
      </Reveal>
    </div>
  </section>
);

Object.assign(window, { AboutPage });
