import { Link } from 'react-router-dom';
import { ArrowRight, ArrowDown } from 'lucide-react';
import { motion } from 'framer-motion';
import modules from '../data/modules';
import IDGWheel from '../components/IDGWheel';
import EcosystemIcon from '../components/EcosystemIcons';
import ArcDivider from '../components/ArcDivider';
import Reveal from '../components/Reveal';
import TiltCard from '../components/TiltCard';
import CountUp from '../components/CountUp';

const EASE_ORGANIC = [0.22, 1, 0.36, 1] as const;

const values = [
  { icon: '🧠', title: 'Kesadaran', desc: 'Setiap tindakan dilandasi kehadiran penuh dan niat yang jernih.' },
  { icon: '🌿', title: 'Hubungan dengan Alam', desc: 'Menghormati dan memulihkan hubungan kita dengan dunia alami.' },
  { icon: '🤲', title: 'Gotong Royong', desc: 'Kekuatan komunitas adalah fondasi dari setiap perubahan nyata.' },
  { icon: '♻️', title: 'Keberlanjutan', desc: 'Memilih jalan yang merawat, bukan menguras, sumber daya bumi.' },
  { icon: '🌱', title: 'Regeneratif', desc: 'Melampaui keberlanjutan—memulihkan dan menghidupkan kembali.' },
  { icon: '⚖️', title: 'Keadilan Sosial', desc: 'Ekonomi dan ekologi yang adil bagi semua makhluk hidup.' },
  { icon: '💚', title: 'Komunitas', desc: 'Bersama kita tumbuh lebih kuat, lebih bijak, lebih utuh.' },
  { icon: '✨', title: 'Keindahan', desc: 'Merayakan keindahan dalam kesederhanaan dan keaslian.' },
];

const jalurList = [
  {
    id: 'pangan',
    icon: '🌾',
    title: 'Pangan Berkesadaran',
    subtitle: 'Merawat Tanah, Menumbuhkan Kehidupan',
    color: '#4F6B3A',
    steps: ['Budidaya', 'Panen & Pasca Panen', 'Gastronomi & Kuliner', 'Destinasi & Pengalaman'],
    quote: 'Merawat tanah adalah merawat diri.',
  },
  {
    id: 'sandang',
    icon: '🧵',
    title: 'Sandang Berkesadaran',
    subtitle: 'Menghidupkan Serat, Menenun Masa Depan',
    color: '#D4552B',
    steps: ['Serat', 'Benang & Kain', 'Pewarnaan', 'Produk Jadi'],
    quote: 'Menenun masa depan adalah memilih dunia seperti apa yang ingin kita wariskan.',
  },
  {
    id: 'olah-diri',
    icon: '🧘',
    title: 'Olah-Diri Berkesadaran',
    subtitle: 'Merawat Diri, Merawat Dunia',
    color: '#93583A',
    steps: ['Badan Kasar', 'Badan Halus', 'Badan Penyebab'],
    quote: 'Manusia yang utuh adalah manusia yang mampu merawat dunia di sekitarnya.',
  },
];

const FEATURED_IDX = [0, 4];

const heroContainer = {
  hidden: {},
  show: { transition: { staggerChildren: 0.14, delayChildren: 0.1 } },
};
const heroItem = {
  hidden: { opacity: 0, y: 26 },
  show: { opacity: 1, y: 0, transition: { duration: 0.75, ease: EASE_ORGANIC } },
};

export default function Home() {
  return (
    <>
      {/* Hero */}
      <section className="hero">
        <div className="hero__decor" />
        <motion.div
          className="container hero__content"
          initial="hidden"
          animate="show"
          variants={heroContainer}
        >
          <motion.p className="eyebrow eyebrow--amber" style={{ marginBottom: 20 }} variants={heroItem}>
            Rumah Gotong Royong
          </motion.p>
          <motion.h1 className="hero__title" variants={heroItem}>
            Anindha. Loka.<br />
            <em>Dua kata, satu niat.</em>
          </motion.h1>
          <motion.p className="hero__subtitle" variants={heroItem}>
            Ruang hidup gotong royong untuk menghadirkan kerahayuan dalam kehidupan sehari-hari — melalui pangan, sandang, dan olah diri yang berkesadaran.
          </motion.p>
          <motion.div className="hero__actions" variants={heroItem}>
            <a href="#ekosistem" className="btn btn--amber btn--lg">
              Jelajahi Ekosistem <ArrowDown size={16} />
            </a>
            <Link to="/tentang" className="btn btn--outline-light btn--lg">
              Kenali Anindhaloka
            </Link>
          </motion.div>
        </motion.div>
        <div className="hero__scroll">
          <div className="hero__scroll-line" />
          <span>Gulir</span>
        </div>
      </section>

      {/* Definisi clip-path lengkung halus (bezier) untuk foto About — objectBoundingBox supaya tetap responsif */}
      <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
        <defs>
          <clipPath id="about-wave-clip" clipPathUnits="objectBoundingBox">
            <path d="M0,0.032 C0.1667,0.072 0.3333,0 0.5,0.024 C0.6667,0.048 0.8333,0.008 1,0.036 L1,1 L0,1 Z" />
          </clipPath>
        </defs>
      </svg>

      {/* About — foto sendiri yang bergelombang di atas, bukan divider warna terpisah */}
      <section
        className="section about-section"
        style={{
          position: 'relative',
          marginTop: -70,
          paddingTop: 150,
          backgroundImage: 'linear-gradient(180deg, rgba(58,36,48,.92) 0%, rgba(47,29,36,.88) 20%, rgba(30,18,22,.85) 55%, rgba(30,18,22,.9) 100%), url(/assets/images/Anindhaloka.jpg)',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          clipPath: 'url(#about-wave-clip)',
        }}
      >
        <div className="container">
          <div className="about-split">
            <Reveal className="about-split__text">
              <p className="eyebrow eyebrow--amber" style={{ marginBottom: 16 }}>Tentang Anindhaloka</p>
              <h2 style={{ marginBottom: 20, color: '#fff' }}>Ruang yang mulia, dibangun dengan kesadaran</h2>
              <p style={{ color: 'rgba(255,255,255,.75)' }}>
                Anindhaloka adalah ruang yang mulia — bukan karena megah, tapi karena setiap sudutnya dibangun dengan kesadaran: bahwa cara kita hidup menentukan dunia yang kita wariskan. Lahir di jantung Jakarta, kami mengajak siapa saja untuk menjalani hidup dengan cara yang lebih selaras.
              </p>
              <p style={{ color: 'rgba(255,255,255,.75)' }}>
                Kami 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 style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 28 }}>
                <Link to="/tentang" className="btn btn--outline-light">
                  Kenali Kami <ArrowRight size={16} />
                </Link>
                <Link to="/bergabung" className="btn btn--amber">
                  Bergabung
                </Link>
              </div>
            </Reveal>
            <Reveal delay={0.15} className="about-split__visual" style={{ justifyContent: 'center', alignItems: 'center' }}>
              <IDGWheel light />
            </Reveal>
          </div>
          <div className="about-stats">
            <div className="about-stat">
              <CountUp to={60} suffix="+" className="about-stat__num" />
              <span className="about-stat__label">Jenama Lokal Bergabung</span>
            </div>
            <div className="about-stat">
              <CountUp to={50} suffix="+" className="about-stat__num" />
              <span className="about-stat__label">Kegiatan Edukasi Terselenggara</span>
            </div>
            <div className="about-stat">
              <CountUp to={2000} suffix="+" className="about-stat__num" />
              <span className="about-stat__label">Kunjungan TemanNIN</span>
            </div>
          </div>
        </div>
      </section>
      <ArcDivider fill="var(--cream)" />

      {/* Tiga Jalan Bertumbuh Bersama */}
      <section className="section" style={{ background: 'var(--cream)' }}>
        <div className="container">
          <div className="section__header">
            <p className="eyebrow">Tiga Jalan Bertumbuh Bersama</p>
            <h2>Satu perjalanan, tiga laku berkesadaran</h2>
            <p>Pangan, sandang, dan olah diri — tiga jalur praktik yang saling menopang dalam kehidupan sehari-hari.</p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 64 }}>
            {jalurList.map((j, i) => (
              <Reveal key={j.id} delay={i * 0.08}>
                <div
                  id={j.id}
                  style={{
                    display: 'flex',
                    flexDirection: i % 2 === 1 ? 'row-reverse' : 'row',
                    alignItems: 'center',
                    gap: 40,
                    flexWrap: 'wrap',
                    scrollMarginTop: 100,
                  }}
                >
                  <div style={{ flex: '0 0 auto', position: 'relative', width: 148, height: 148 }}>
                    <span
                      style={{
                        position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: 'var(--font-mono)', fontSize: '5.5rem', fontWeight: 700, color: j.color, opacity: 0.13,
                        lineHeight: 1,
                      }}
                    >
                      0{i + 1}
                    </span>
                    <span style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '3.2rem' }}>
                      {j.icon}
                    </span>
                  </div>

                  <div style={{ flex: '1 1 380px', minWidth: 280, textAlign: i % 2 === 1 ? 'right' : 'left' }}>
                    <p className="eyebrow" style={{ color: j.color, marginBottom: 8 }}>{j.subtitle}</p>
                    <h3 style={{ marginBottom: 16 }}>{j.title}</h3>
                    <div style={{
                      display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 20,
                      justifyContent: i % 2 === 1 ? 'flex-end' : 'flex-start',
                    }}>
                      {j.steps.map((s, k) => (
                        <span key={k} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                          <span
                            className="badge"
                            style={{ background: `${j.color}18`, color: j.color, fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: '.72rem' }}
                          >
                            {s}
                          </span>
                          {k < j.steps.length - 1 && <ArrowRight size={12} style={{ color: 'var(--text-100)' }} />}
                        </span>
                      ))}
                    </div>
                    <blockquote
                      style={{
                        fontFamily: 'var(--font-heading)', fontSize: '1.2rem', fontStyle: 'italic',
                        color: 'var(--text-700)', margin: 0,
                        borderLeft: i % 2 === 1 ? 'none' : `3px solid ${j.color}`,
                        borderRight: i % 2 === 1 ? `3px solid ${j.color}` : 'none',
                        paddingLeft: i % 2 === 1 ? 0 : 16,
                        paddingRight: i % 2 === 1 ? 16 : 0,
                      }}
                    >
                      “{j.quote}”
                    </blockquote>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <ArcDivider fill="var(--warm-white)" />

      {/* Ecosystem Modules */}
      <section className="section ecosystem-section" id="ekosistem">
        <div className="container">
          <div className="section__header">
            <p className="eyebrow">Ekosistem Kami</p>
            <h2>Delapan wahana, satu perjalanan</h2>
            <p>Setiap modul adalah dunia tersendiri, namun saling terjalin dalam satu visi: kehidupan yang lebih sadar, adil, dan indah.</p>
          </div>
          <div className="ecosystem-mosaic">
            {modules.map((m, i) => {
              const featured = FEATURED_IDX.includes(i);
              return (
                <Reveal
                  key={m.id}
                  delay={(i % 4) * 0.06}
                  className={featured ? 'ecosystem-mosaic__item--featured' : undefined}
                  style={{ height: '100%' }}
                >
                  <TiltCard style={{ height: '100%' }}>
                    <Link to={m.path} style={{ textDecoration: 'none', display: 'block', height: '100%' }}>
                      <div className="card card--module" style={{ height: '100%' }}>

                        {/* ── Cover ── */}
                        <div
                          className={`card__cover${featured ? ' card__cover--tall' : ''}`}
                          style={{ background: `linear-gradient(140deg, ${m.gradientFrom} 0%, ${m.gradientTo} 55%, ${m.color} 100%)` }}
                        >
                          <div className="card__cover-blob" style={{ width: 140, height: 140, top: -40, right: -30, background: m.color, opacity: .28 }} />
                          <div className="card__cover-blob" style={{ width: 90, height: 90, bottom: -20, left: 16, background: 'rgba(255,255,255,.08)' }} />
                          <div className="card__cover-blob" style={{ width: 60, height: 60, top: 20, left: 20, background: 'rgba(255,255,255,.06)' }} />

                          {m.logoImage ? (
                            <div className="card__cover-logo-badge">
                              <img src={m.logoImage} alt={m.name} style={{ height: featured ? 68 : 50 }} />
                            </div>
                          ) : (
                            <span className="card__cover-emoji">
                              <EcosystemIcon id={m.id} size={featured ? 60 : 46} withBackdrop={false} />
                            </span>
                          )}

                          <div className="card__cover-tag">{m.tagline}</div>
                        </div>

                        {/* ── Content ── */}
                        <div className="card__body">
                          <h3 className="card__title">{m.name}</h3>
                          <p className="card__desc">{m.description}</p>
                        </div>
                        <div className="card__footer">
                          <span className="card__link" style={{ color: m.color }}>
                            Pelajari lebih <ArrowRight size={14} />
                          </span>
                        </div>

                      </div>
                    </Link>
                  </TiltCard>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
      <ArcDivider fill="var(--maroon-900)" />

      {/* Values */}
      <section className="section values-section">
        <div className="container">
          <div className="section__header">
            <p className="eyebrow eyebrow--light">Nilai-nilai Kami</p>
            <h2 style={{ color: 'rgba(255,255,255,.95)' }}>Yang menghidupkan setiap langkah</h2>
            <p>Nilai bukan sekadar kata-kata. Ini adalah cara kami berpikir, berkarya, dan berhubungan dengan dunia.</p>
          </div>
          <div className="grid-4">
            {values.map((v, i) => (
              <Reveal key={i} delay={(i % 4) * 0.06}>
                <div className="value-card">
                  <div className="value-card__icon">{v.icon}</div>
                  <h4 className="value-card__title">{v.title}</h4>
                  <p className="value-card__desc">{v.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
      <ArcDivider fill="var(--cream)" />

      {/* Community Quote */}
      <section className="section" style={{ background: 'var(--cream)' }}>
        <Reveal className="container" style={{ maxWidth: 720, textAlign: 'center' }}>
          <span style={{ fontSize: '3rem', display: 'block', marginBottom: 24 }}>🌾</span>
          <blockquote style={{ fontFamily: 'var(--font-heading)', fontSize: 'clamp(1.4rem, 3vw, 2rem)', fontStyle: 'italic', color: 'var(--text-900)', lineHeight: 1.5, marginBottom: 24 }}>
            "Kita tidak mewarisi bumi dari nenek moyang kita, kita meminjamnya dari anak cucu kita."
          </blockquote>
          <p style={{ color: 'var(--text-300)', fontSize: '.9rem' }}>— Pepatah bijak yang menginspirasi gerakan kami</p>
        </Reveal>
      </section>
      <ArcDivider fill="var(--maroon-900)" />

      {/* CTA */}
      <section className="section cta-section">
        <div className="container">
          <div className="cta-section__content">
            <p className="eyebrow eyebrow--light" style={{ marginBottom: 16 }}>Mulai Perjalananmu</p>
            <h2 className="cta-section__title">Jadilah bagian dari komunitas perubahan</h2>
            <p className="cta-section__desc">
              Bergabunglah dengan ratusan individu, pengrajin, dan pelaku perubahan yang bersama-sama membangun ekosistem hidup yang lebih bermakna.
            </p>
            <div className="cta-section__actions">
              <Link to="/bergabung" className="btn btn--amber btn--lg">
                Daftar Sekarang <ArrowRight size={16} />
              </Link>
              <Link to="/tentang" className="btn btn--outline-light btn--lg">
                Pelajari Lebih
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}