/* global React, PaperTexture */

function AboutPage({ navigate }) {
  return (
    <main className="fade-in about-page">
      {/* Hero */}
      <section style={{
        paddingBlock: 'clamp(64px,10vw,120px)',
        background: 'var(--brand-navy)',
        position: 'relative',
        overflow: 'hidden',
      }}>
        <div className="shell" style={{position:'relative', zIndex:2}}>
          <span className="eyebrow" style={{color:'rgba(255,255,255,0.5)', marginBottom:16, display:'block'}}>「 About 」</span>
          <h1 style={{
            fontFamily:'var(--font-display)',
            fontSize:'clamp(40px,8vw,96px)',
            fontWeight:300,
            color:'#fff',
            lineHeight:0.95,
            margin:'0 0 24px',
          }}>
            Kertas yang tepat<br/>
            <em style={{color:'var(--brand-yellow)'}}>mengubah segalanya.</em>
          </h1>
          <p style={{color:'rgba(255,255,255,0.7)', fontSize:'clamp(15px,2vw,18px)', maxWidth:'56ch', lineHeight:1.7, margin:0}}>
            INDIE Paper adalah specialty paper gallery di Jakarta — bagian dari PT. Indie Kreasi Media, sister company PixelIndie Print Shop.
          </p>
        </div>
        {/* Background texture */}
        <div style={{position:'absolute', inset:0, zIndex:1, opacity:0.06}}>
          <PaperTexture tone="#F4EFE3" grain="felt" />
        </div>
      </section>

      {/* Story */}
      <section style={{paddingBlock:'clamp(48px,8vw,96px)', background:'var(--paper-bg)'}}>
        <div className="shell" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:'clamp(32px,6vw,80px)', alignItems:'start'}}>
          <div>
            <span className="eyebrow eyebrow-ink" style={{marginBottom:16, display:'block'}}>「 Our Story 」</span>
            <h2 style={{fontSize:'clamp(28px,4vw,48px)', lineHeight:1.1, marginBottom:24}}>
              Dibangun untuk<br/><em>desainer dan kreator.</em>
            </h2>
            <p style={{color:'var(--ink-soft)', lineHeight:1.8, marginBottom:16}}>
              Kami percaya bahwa pilihan kertas adalah keputusan kreatif — bukan sekadar spesifikasi teknis. Setiap desain layak dicetak di atas kertas yang benar-benar mendukung visinya.
            </p>
            <p style={{color:'var(--ink-soft)', lineHeight:1.8, marginBottom:16}}>
              INDIE Paper hadir untuk memudahkan desainer, studio kreatif, dan brand di Indonesia mengakses kertas premium dunia — tanpa harus beli dalam jumlah besar, tanpa ribet.
            </p>
            <p style={{color:'var(--ink-soft)', lineHeight:1.8}}>
              Semua kertas kami pre-cut A3+, siap pakai, minimum 10 lembar. Dari Mohawk Amerika hingga Conqueror Inggris — dikirim dari Jakarta ke seluruh Indonesia.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:16}}>
            {[
              { n:'302+', l:'Produk tersedia', d:'Dari 8 kategori berbeda — fancy, creative, standard, eco, dan lebih banyak lagi.' },
              { n:'10', l:'Minimum order', d:'Tidak perlu beli rim. Order mulai 10 lembar, cocok untuk sampling dan proyek kecil.' },
              { n:'1–2', l:'Hari pengiriman', d:'Stok tersedia di Jakarta. Jabodetabek 1–2 hari kerja, luar kota 3–5 hari.' },
            ].map(s => (
              <div key={s.n} style={{padding:'24px', background:'var(--paper-cream)', border:'1px solid var(--paper-card-edge)'}}>
                <div style={{fontFamily:'var(--font-display)', fontSize:48, fontWeight:300, color:'var(--terracotta)', lineHeight:1}}>{s.n}</div>
                <div style={{fontWeight:600, fontSize:14, color:'var(--ink)', margin:'8px 0 6px'}}>{s.l}</div>
                <div style={{fontSize:13, color:'var(--ink-soft)', lineHeight:1.6}}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Brands */}
      <section style={{paddingBlock:'clamp(48px,8vw,80px)', background:'var(--paper-cream)', borderTop:'1px solid var(--paper-card-edge)'}}>
        <div className="shell">
          <span className="eyebrow eyebrow-ink" style={{marginBottom:16, display:'block'}}>「 Brands we carry 」</span>
          <h2 style={{fontSize:'clamp(24px,3.5vw,40px)', marginBottom:32}}>Brand yang kami<br/><em>kurasi dengan teliti.</em></h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(auto-fit, minmax(200px, 1fr))', gap:16}}>
            {[
              { name:'Mohawk', origin:'USA', desc:'Pabrik kertas premium independen terbesar di Amerika Utara.' },
              { name:'Conqueror', origin:'UK', desc:'Standar emas kertas korespondensi mewah selama 100+ tahun.' },
              { name:'Fedrigoni', origin:'Italy', desc:'130+ tahun keunggulan kertas Italia — dari Arcoprint hingga Sirio Pearl.' },
              { name:'Antalis', origin:'Europe', desc:'Distributor kertas specialty terkemuka dari Eropa.' },
              { name:'Gmund', origin:'Germany', desc:'Kertas artisanal dari Bavaria — craft dan presisi tinggi.' },
              { name:'Superb Bamboo', origin:'Indonesia', desc:'Kertas eco dari bamboo fiber — FSC certified, ramah lingkungan.' },
            ].map(b => (
              <div key={b.name} style={{padding:'20px', background:'var(--paper-card)', border:'1px solid var(--paper-card-edge)'}}>
                <div style={{fontSize:15, fontWeight:600, color:'var(--ink)', marginBottom:4}}>{b.name}</div>
                <div style={{fontSize:11, fontFamily:'var(--font-mono)', color:'var(--ink-meta)', marginBottom:8, letterSpacing:'0.08em'}}>{b.origin}</div>
                <div style={{fontSize:12, color:'var(--ink-soft)', lineHeight:1.6}}>{b.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Part of INDIE Group */}
      <section style={{paddingBlock:'clamp(40px,6vw,64px)', background:'var(--paper-bg)', borderTop:'1px solid var(--paper-card-edge)'}}>
        <div className="shell" style={{display:'flex', alignItems:'center', gap:48, flexWrap:'wrap'}}>
          <div style={{flex:1, minWidth:280}}>
            <span className="eyebrow eyebrow-ink" style={{marginBottom:12, display:'block'}}>「 INDIE Group 」</span>
            <h3 style={{fontSize:'clamp(20px,3vw,32px)', marginBottom:16}}>Bagian dari ekosistem<br/><em>kreatif INDIE.</em></h3>
            <p style={{color:'var(--ink-soft)', lineHeight:1.8, fontSize:14}}>
              INDIE Paper adalah unit bisnis PT. Indie Kreasi Media, bagian dari INDIE Group — holding company kreatif di Jakarta yang juga menaungi PixelIndie Print Shop, INDIE Space co-working, dan INDIE Music School.
            </p>
          </div>
          <div style={{display:'flex', flexDirection:'column', gap:12}}>
            {[
              { name:'PixelIndie', desc:'Print shop sister company', url:'https://pixelindie.com' },
              { name:'INDIE Space', desc:'Co-working & creative hub', url:'#' },
              { name:'INDIE Music School', desc:'Music education', url:'#' },
            ].map(s => (
              <div key={s.name} style={{padding:'14px 20px', border:'1px solid var(--paper-card-edge)', background:'var(--paper-cream)', minWidth:240}}>
                <div style={{fontWeight:600, fontSize:13, color:'var(--ink)'}}>{s.name}</div>
                <div style={{fontSize:12, color:'var(--ink-meta)'}}>{s.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{paddingBlock:'clamp(48px,8vw,80px)', background:'var(--paper-cream)', borderTop:'1px solid var(--paper-card-edge)', textAlign:'center'}}>
        <div className="shell" style={{maxWidth:560}}>
          <h2 style={{fontSize:'clamp(28px,5vw,48px)', marginBottom:16}}>Siap menemukan kertas<br/><em>yang tepat?</em></h2>
          <p style={{color:'var(--ink-soft)', marginBottom:32, lineHeight:1.7}}>Browse 302+ kertas premium atau request sample kit gratis — kami kirim ke studio kamu.</p>
          <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
            <button className="btn btn-primary btn-lg" onClick={() => navigate('/gallery')}>Browse Gallery →</button>
            <button className="btn btn-ghost btn-lg" onClick={() => navigate('/sample-request')}>Request Sample Kit</button>
          </div>
        </div>
      </section>
    </main>
  );
}

window.AboutPage = AboutPage;