import { Link } from 'react-router-dom';
import { ArrowRight } from 'lucide-react';

const untukSiapa = [
  'Siapa saja yang merindukan cara hidup lebih utuh',
  'Anak-anak dan orang tua yang ingin belajar dan mewariskan lebih dari materi',
  'Komunitas yang ingin tumbuh bersama',
  'Pengrajin, petani, dan tukang masak — pemegang kearifan yang layak dihormati',
  'Pelaku usaha & institusi yang mencari cara kerja yang lebih berdampak',
  'Pemerintah yang mencari model nyata ketahanan pangan, sandang, dan budaya',
];

const krisis = [
  { icon: '🕊️', title: 'Krisis Spiritual', desc: 'Keterputusan dari makna hidup.' },
  { icon: '🤝', title: 'Krisis Sosial', desc: 'Keterputusan dari sesama.' },
  { icon: '🌿', title: 'Krisis Ekologis', desc: 'Keterputusan dari alam.' },
];

const nilaiInti = [
  { icon: '🧠', title: 'Kesadaran sebagai Titik Berangkat', desc: 'Tidak ada aktivitas tanpa kehadiran penuh.' },
  { icon: '🌎', title: 'Relasi Manusia–Alam yang Hidup', desc: 'Alam sebagai mitra, bukan sumber daya.' },
  { icon: '🤲', title: 'Gotong Royong & Ekonomi Berkeadilan', desc: 'Nilai didistribusikan adil ke semua yang terlibat.' },
  { icon: '♻️', title: 'Regeneratif, Bukan Sekadar Konsep', desc: 'Meninggalkan segalanya lebih baik dari sebelumnya.' },
];

export default function Tentang() {
  return (
    <div className="page-top-pad">
      {/* Hero */}
      <section
        style={{
          background: 'linear-gradient(150deg, var(--forest-950) 0%, var(--forest-900) 60%, #1E3A2A 100%)',
          padding: '80px 0 96px',
          position: 'relative',
          overflow: 'hidden',
        }}
      >
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 80% at 60% 50%, rgba(74,124,89,.15) 0%, transparent 60%)' }} />
        <div className="container" style={{ position: 'relative', zIndex: 1, maxWidth: 760 }}>
          <p className="eyebrow eyebrow--light" style={{ marginBottom: 16 }}>Tentang Kami</p>
          <h1 style={{ color: '#fff', marginBottom: 20 }}>Anindha, tanpa cela.<br /><em style={{ fontStyle: 'italic', color: 'var(--earth-300)' }}>Loka, ruang dunia.</em></h1>
          <p style={{ fontSize: '1.15rem', color: 'rgba(255,255,255,.7)', lineHeight: 1.8 }}>
            Anindhaloka adalah ruang hidup gotong royong yang menghidupkan keterpanggilan untuk menghadirkan kerahayuan dalam kehidupan sehari-hari — melalui laku berkesadaran dalam pangan, sandang, dan olah diri, yang dijalani dengan semangat ingin tahu, pembelajaran, dan kreativitas.
          </p>
        </div>
      </section>

      {/* Siapa Kami & Peran Kami */}
      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <div className="grid-2" style={{ gap: 48, alignItems: 'start' }}>
            <div>
              <p className="eyebrow" style={{ marginBottom: 12 }}>Siapa Anindhaloka</p>
              <h2 style={{ marginBottom: 16 }}>Tiga pendekatan yang saling menopang</h2>
              <p style={{ lineHeight: 1.85, color: 'var(--text-500)', marginBottom: 16 }}>
                Anindhaloka adalah ruang hidup gotong royong yang menghidupkan keterpanggilan untuk menghadirkan kerahayuan dalam kehidupan sehari-hari — melalui laku berkesadaran dalam pangan, sandang, dan olah diri, yang dijalani dengan semangat ingin tahu, pembelajaran, dan kreativitas: rasa ingin tahu yang mendorong riset, pembelajaran yang mencerahkan, dan kreativitas sebagai cara merespons kehidupan dengan hadir utuh sadar penuh.
              </p>
              <p style={{ lineHeight: 1.85, color: 'var(--text-500)', fontStyle: 'italic' }}>
                Anindha — dari Sanskerta <em>anindya</em>, tanpa cela, mulia. Loka — dunia, ruang, tempat.
              </p>
            </div>
            <div>
              <p className="eyebrow" style={{ marginBottom: 12 }}>Peran Kami</p>
              <h2 style={{ marginBottom: 16 }}>Menyatukan kembali manusia, alam, dan diri</h2>
              <p style={{ lineHeight: 1.85, color: 'var(--text-500)' }}>
                Anindhaloka menghadirkan cara hidup yang menyatukan kembali manusia dengan alam, dengan sesama, dan dengan dirinya sendiri — di mana makanan tumbuh dari tanah yang dirawat, pakaian dibuat dengan tangan yang sadar, dan ketenangan batin menjadi hak setiap orang.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Untuk Siapa */}
      <section className="section" style={{ background: 'var(--warm-white)' }}>
        <div className="container" style={{ maxWidth: 820 }}>
          <div className="section__header">
            <p className="eyebrow">Untuk Siapa Anindhaloka Hadir</p>
            <h2>Rumah bagi siapa saja yang selaras nilai</h2>
          </div>
          <div className="grid-2" style={{ gap: '14px 32px' }}>
            {untukSiapa.map((item, i) => (
              <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', padding: '14px 0', borderBottom: '1px solid var(--earth-100)' }}>
                <span style={{ color: 'var(--forest-600)', fontFamily: 'var(--font-heading)', fontWeight: 700, flexShrink: 0 }}>0{i + 1}</span>
                <p style={{ color: 'var(--text-500)', lineHeight: 1.6, margin: 0 }}>{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Mengapa Lahir */}
      <section
        className="section"
        style={{ background: 'linear-gradient(150deg, var(--forest-950) 0%, var(--forest-900) 60%, #1E3A2A 100%)' }}
      >
        <div className="container">
          <div className="section__header">
            <p className="eyebrow eyebrow--light">Mengapa Anindhaloka Lahir</p>
            <h2 style={{ color: 'rgba(255,255,255,.95)' }}>Dari kesadaran akan tiga krisis yang saling terkait</h2>
            <p style={{ color: 'rgba(255,255,255,.65)' }}>
              Anindhaloka percaya perubahan sejati dimulai dari dalam — dari kesadaran yang tumbuh dalam diri, bukan dari atas ke bawah.
            </p>
          </div>
          <div className="grid-3">
            {krisis.map((k, i) => (
              <div key={i} style={{ padding: '28px 24px', background: 'rgba(255,255,255,.05)', borderRadius: 'var(--r-lg)', border: '1px solid rgba(255,255,255,.08)' }}>
                <div style={{ fontSize: '1.75rem', marginBottom: 12 }}>{k.icon}</div>
                <h4 style={{ marginBottom: 8, color: '#fff' }}>{k.title}</h4>
                <p style={{ fontSize: '.9rem', color: 'rgba(255,255,255,.65)', lineHeight: 1.7 }}>{k.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Filosofi & Nilai Inti */}
      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <div className="section__header">
            <p className="eyebrow">Filosofi & Nilai Inti</p>
            <h2>Empat nilai yang menjadi akar</h2>
          </div>
          <div className="grid-4">
            {nilaiInti.map((n, i) => (
              <div key={i} style={{ textAlign: 'center', padding: '28px 16px' }}>
                <div style={{ fontSize: '2.2rem', marginBottom: 12 }}>{n.icon}</div>
                <h4 style={{ fontSize: '1.05rem', marginBottom: 8, color: 'var(--text-900)' }}>{n.title}</h4>
                <p style={{ fontSize: '.85rem', color: 'var(--text-300)', lineHeight: 1.6 }}>{n.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section cta-section">
        <div className="container">
          <div className="cta-section__content">
            <p className="eyebrow eyebrow--light" style={{ marginBottom: 16 }}>Bergabunglah</p>
            <h2 className="cta-section__title">Jadilah bagian dari cerita ini</h2>
            <p className="cta-section__desc">
              Anindhaloka tidak akan ada tanpa komunitasnya. Setiap orang yang bergabung membawa energi baru dan memperkuat ekosistem yang kita bangun bersama.
            </p>
            <div className="cta-section__actions">
              <Link to="/temannin" className="btn btn--amber btn--lg">
                Daftar Sebagai Member <ArrowRight size={16} />
              </Link>
              <Link to="/kontak" className="btn btn--outline-light btn--lg">
                Hubungi Kami
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}