/* Home + Story + Impact pages */

function Home({ onNav, onOpenCarpet }) {
  const featuredCarpets = window.ZULEYA.CARPETS.slice(0, 6);
  const [heroIdx, setHeroIdx] = useState(0);
  const heroImages = [
    'media/zuleya-product-bagram.webp',
    'media/zuleya-product-aldar.webp',
    'media/zuleya-product-garden-of-ones-own.webp',
    'media/zuleya-product-alhambra.webp'
  ];
  useEffect(() => {
    const t = setInterval(() => setHeroIdx(i => (i + 1) % heroImages.length), 5800);
    return () => clearInterval(t);
  }, []);

  return (
    <React.Fragment>
      {/* HERO */}
      <section className="hero">
        {heroImages.map((src, i) => (
          <div key={src} className="hero-bg"
               style={{ backgroundImage: `url(${src})`, opacity: i === heroIdx ? 0.85 : 0 }} />
        ))}
        <div className="hero-grad"></div>

        <div className="hero-meta-top">
          <div>Mazar-i-Sharif · Afghanistan · Loom 04</div>
          <div className="sep">/</div>
          <div>Showroom · Dubai Design District · open today 10:00 – 22:00</div>
          <div className="sep">/</div>
          <div>Est. 2010</div>
        </div>

        <div className="hero-content">
          <div className="container">
            <Eyebrow dark>An enterprise of the Fatima Bint Mohamed Bin Zayed Initiative</Eyebrow>
            <h1 className="h-hero" style={{ color: 'var(--ivory)', marginTop: 32, maxWidth: 1200 }}>
              Hand-knotted in <em className="italic" style={{ color: '#E5C879' }}>Mazar-i-Sharif.</em><br/>
              Drawn for the rooms of <em className="italic" style={{ color: '#E5C879' }}>Dubai.</em>
            </h1>
            <p className="lead" style={{ color: '#D9CFBF', maxWidth: 620, marginTop: 36 }}>
              Zuleya is the carpet house of FBMI — the initiative founded by His Highness Sheikh Mohamed bin Zayed Al Nahyan
              to put a loom in the hand of an Afghan artisan and put the carpet, signed, in a room in Dubai.
            </p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={() => onNav('collections')}>
                Browse the collections <span className="arrow">→</span>
              </button>
              <button className="btn btn-ghost-light" onClick={() => onNav('story')}>
                The story behind a Zuleya
              </button>
            </div>

            <div className="hero-tail">
              <div>
                <div className="quote serif">
                  “A Zuleya commission is the closest thing in the region to a museum carpet — drawn for the room, signed.”
                  <span className="src">— Studio KKD · interior architects, Dubai</span>
                </div>
              </div>
              <div className="hero-stat">
                <div className="num serif">8,210</div>
                <div className="lbl">Afghan artisans employed across our looms</div>
              </div>
              <div className="hero-stat">
                <div className="num serif">14 yrs</div>
                <div className="lbl">Since FBMI was founded in 2010</div>
              </div>
              <div className="hero-stat">
                <div className="num serif">5</div>
                <div className="lbl">State gifts delivered, incl. Pope Francis</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* INTRO / MISSION */}
      <section className="section ivory">
        <div className="container">
          <div className="split wide-left" style={{ gap: 120 }}>
            <div>
              <Eyebrow>One initiative · one carpet house</Eyebrow>
              <h2 className="h-section serif" style={{ marginTop: 28, maxWidth: 720 }}>
                A non-profit weave that runs end-to-end —
                from a herder’s fleece in Balkh to a carpet rolled out in a room in Dubai Design District.
              </h2>
            </div>
            <div>
              <p className="lead" style={{ fontSize: 17, marginBottom: 24 }}>
                Founded in 2010 under the patronage of HH Sheikha Fatima bint Mubarak,
                FBMI buys wool from Afghan nomads, employs more than eight thousand women at a single loom city in
                Mazar-i-Sharif, and sells the finished carpets in Dubai under the name <em className="italic">Zuleya</em>.
              </p>
              <p className="lead" style={{ fontSize: 17 }}>
                Every dirham of margin returns to the looms. The carpet you buy from us in d3 was, four months ago,
                a fleece in Balkh and the wage of a woman in Mazar-i-Sharif.
              </p>
              <div style={{ marginTop: 32 }}>
                <button className="btn-link" onClick={() => onNav('story')}>The full story →</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURED CARPETS */}
      <section className="section bone">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
            <div>
              <Eyebrow>The current collection</Eyebrow>
              <h2 className="h-section serif" style={{ marginTop: 24, maxWidth: 560 }}>
                Sixteen pieces on the floor in d3 — and several thousand more on looms.
              </h2>
            </div>
            <button className="btn-link" onClick={() => onNav('collections')}>All carpets →</button>
          </div>

          <div className="carpet-grid">
            {featuredCarpets.map(c => <CarpetCard key={c.id} c={c} onOpen={onOpenCarpet} />)}
          </div>
        </div>
      </section>

      {/* FEATURED CARPET (TOLERANCE) */}
      <section style={{ padding: 0 }}>
        <div className="container" style={{ padding: 0, maxWidth: '100%' }}>
          <div className="carpet-feature">
            <div className="img" style={{ backgroundImage: 'url(media/zuleya-product-alafia.webp)' }}></div>
            <div className="txt">
              <Eyebrow dark>The Tolerance collection</Eyebrow>
              <h2 className="h-section serif" style={{ color: 'var(--ivory)', marginTop: 28 }}>
                The drawing the UAE gifted to Pope Francis, now woven for your room.
              </h2>
              <p style={{ color: '#BFB29C', fontSize: 16, lineHeight: 1.65, marginTop: 24, maxWidth: 480 }}>
                In 2016, His Highness Sheikh Mohamed bin Zayed Al Nahyan gifted His Holiness Pope Francis a hand-knotted carpet
                from this loom. The drawing is now a small collection — six new sizes, the same hands, the same wool.
              </p>
              <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button className="btn btn-primary" onClick={() => onNav('collections')}>See the Tolerance pieces <span className="arrow">→</span></button>
                <button className="btn btn-ghost-light" onClick={() => onNav('bespoke')}>Commission your own</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS PREVIEW */}
      <section className="section ivory">
        <div className="container">
          <div style={{ maxWidth: 780, marginBottom: 80 }}>
            <Eyebrow>How a Zuleya is made</Eyebrow>
            <h2 className="h-section serif" style={{ marginTop: 24 }}>
              Wool from the herder. Yarn from the spindle. Drawing from the studio. Knot from the hand.
            </h2>
          </div>
          <div className="craft-steps">
            {window.ZULEYA.PROCESS_STEPS.map(s => (
              <div key={s.num} className="craft-step">
                <div className="num">{s.num}</div>
                <h3>{s.title}</h3>
                <p>{s.body}</p>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 64, textAlign: 'center' }}>
            <button className="btn btn-ghost-dark" onClick={() => onNav('craftsmanship')}>
              Walk the loom <span className="arrow">→</span>
            </button>
          </div>
        </div>
      </section>

      {/* DIPLOMACY */}
      <DiplomacyBand onNav={onNav} />

      {/* PROJECTS PREVIEW */}
      <section className="section noir">
        <div className="container">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64, flexWrap: 'wrap', gap: 24 }}>
            <div>
              <Eyebrow dark>Recent projects</Eyebrow>
              <h2 className="h-section serif" style={{ color: 'var(--ivory)', marginTop: 24, maxWidth: 700 }}>
                Resorts, palaces and private commissions across the Gulf.
              </h2>
            </div>
            <button className="btn-link light" onClick={() => onNav('projects')}>All projects →</button>
          </div>
          <div>
            {window.ZULEYA.PROJECTS.slice(0, 3).map(p => (
              <div key={p.id} className="project-card" onClick={() => onNav('projects')}>
                <div className="pimg" style={{ backgroundImage: `url(${p.img})` }}></div>
                <div>
                  <div className="meta-row">
                    <span>{p.year}</span>
                    <span>{p.sqm}</span>
                  </div>
                  <h3 className="serif">{p.name}</h3>
                  <p>{p.blurb}</p>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--gold-2)', letterSpacing: '0.16em' }}>
                    SCOPE · {p.scope.toUpperCase()}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* IMPACT STRIP */}
      <section className="section-sm ivory" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="impact-strip">
            <div className="impact-stat">
              <Eyebrow>Looms</Eyebrow>
              <div className="num serif">8,210</div>
              <div className="lbl">Afghan artisans employed in Mazar-i-Sharif</div>
            </div>
            <div className="impact-stat">
              <Eyebrow>Women</Eyebrow>
              <div className="num serif">82%</div>
              <div className="lbl">Of FBMI artisans are women</div>
            </div>
            <div className="impact-stat">
              <Eyebrow>Wool</Eyebrow>
              <div className="num serif">100%</div>
              <div className="lbl">Highland wool, bought direct from Afghan herders</div>
            </div>
            <div className="impact-stat">
              <Eyebrow>Carpets</Eyebrow>
              <div className="num serif">26,400</div>
              <div className="lbl">Hand-knotted, signed and delivered since 2010</div>
            </div>
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

function Story({ onNav }) {
  return (
    <React.Fragment>
      <PageHeader
        eyebrow="The Story · 2010 — today"
        title={<span>A carpet that is, at the same time, a wage in Balkh and a heirloom in Dubai.</span>}
        lead="The Fatima Bint Mohamed Bin Zayed Initiative was founded in 2010 under the patronage of HH Sheikha Fatima bint Mubarak. Its single mission is to make Afghan women weavers economically self-sufficient — and to bring the carpet they weave to a buyer in the UAE."
      />

      <section className="section-sm ivory" style={{ paddingTop: 0 }}>
        <div className="container">
          <img src="media/media-01-fbmi-slider-main-img.webp"
               style={{ width: '100%', aspectRatio: '21/9', objectFit: 'cover' }} />
        </div>
      </section>

      <section className="section ivory">
        <div className="container">
          <div className="split">
            <div>
              <Eyebrow>2010 — the founding</Eyebrow>
              <h2 className="h-section serif" style={{ marginTop: 24 }}>
                A loom in Balkh. A wage in cash. A woman in charge of a household.
              </h2>
            </div>
            <div>
              <p className="lead" style={{ fontSize: 17, marginBottom: 24 }}>
                The Fatima Bint Mohamed Bin Zayed Initiative is a joint venture between the United Arab Emirates
                and Afghanistan — founded under the patronage of <em className="italic">Umm al Emarat</em>,
                HH Sheikha Fatima bint Mubarak, Mother of the Nation.
              </p>
              <p className="lead" style={{ fontSize: 17 }}>
                Fourteen years on, the initiative is the largest single employer of Afghan women in the country.
                More than eight thousand are at our looms in Mazar-i-Sharif. The carpet you see in our showroom in d3
                was, six months ago, a fleece in Balkh and the income that sent a child in Mazar-i-Sharif to school.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section bone">
        <div className="container">
          <div className="split">
            <div>
              <img src="media/media-05-1.webp" style={{ width: '100%', aspectRatio: '4/5', objectFit: 'cover' }} />
              <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 12, letterSpacing: '0.14em' }}>
                FIG. 01 — RAW FLEECE, BALKH PROVINCE
              </div>
            </div>
            <div>
              <Eyebrow>The model</Eyebrow>
              <h3 className="h-section serif" style={{ marginTop: 24, marginBottom: 28 }}>
                End-to-end. No middlemen.
              </h3>
              <p className="lead" style={{ fontSize: 17, marginBottom: 20 }}>
                FBMI is one of very few carpet houses that owns its entire value chain.
                We buy fleece direct from Afghan herders. We spin it. We dye it with plants.
                We draw the cartoon. We weave the carpet. We sell it ourselves in Dubai.
              </p>
              <p className="lead" style={{ fontSize: 17 }}>
                That means the herder gets paid the right price for the wool, the spinner is on the payroll,
                the weaver is a full employee with a wage, healthcare and childcare — and the margin between
                wool and shelf returns to the same artisans who made it.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="section noir">
        <div className="container">
          <Eyebrow dark>The patrons</Eyebrow>
          <h2 className="h-section serif" style={{ color: 'var(--ivory)', marginTop: 28, marginBottom: 64, maxWidth: 900 }}>
            Founded under the patronage of HH Sheikha Fatima bint Mubarak — and championed by HH Sheikh Mohamed bin Zayed Al Nahyan.
          </h2>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, borderTop: '1px solid var(--line-dark)' }}>
            {[
              { y: '2010', t: 'Initiative founded under the patronage of HH Sheikha Fatima bint Mubarak.' },
              { y: '2012', t: 'First Zuleya retail showroom opens in Dubai.' },
              { y: '2014', t: 'Workforce in Mazar-i-Sharif passes 3,000 artisans.' },
              { y: '2016', t: 'HH Sheikh MBZ gifts the Tolerance Carpet to His Holiness Pope Francis.' },
              { y: '2019', t: 'Workforce passes 7,000. Healthcare and schooling programmes launched.' },
              { y: '2023', t: 'Showroom relocates to Dubai Design District, building 2.' }
            ].map(m => (
              <div key={m.y} style={{ padding: '32px 0', borderBottom: '1px solid var(--line-dark)' }}>
                <div className="serif" style={{ fontSize: 56, color: 'var(--gold-2)', lineHeight: 0.9 }}>{m.y}</div>
                <div style={{ color: '#BFB29C', fontSize: 15, lineHeight: 1.5, marginTop: 16 }}>{m.t}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

function Impact({ onNav }) {
  return (
    <React.Fragment>
      <PageHeader
        eyebrow="Impact · Tolerance · Diplomacy"
        title={<span>What a carpet does, between the herder and the room.</span>}
        lead="A Zuleya is a heirloom — and also a wage, a school fee, a clinic visit, a state gift to a head of state. Fourteen years of evidence below."
      />

      <section className="section-sm ivory" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="impact-strip">
            <div className="impact-stat"><div className="num serif">8,210</div><div className="lbl">Artisans employed</div></div>
            <div className="impact-stat"><div className="num serif">82%</div><div className="lbl">Women in the workforce</div></div>
            <div className="impact-stat"><div className="num serif">1,840</div><div className="lbl">Children of artisans in schooling</div></div>
            <div className="impact-stat"><div className="num serif">26,400</div><div className="lbl">Carpets hand-knotted since 2010</div></div>
          </div>
        </div>
      </section>

      <section className="section ivory">
        <div className="container">
          <div style={{ maxWidth: 720, marginBottom: 56 }}>
            <Eyebrow>Diplomacy</Eyebrow>
            <h2 className="h-section serif" style={{ marginTop: 24 }}>
              The Tolerance carpet, and the state gifts that followed.
            </h2>
          </div>
          <div style={{ borderTop: '1px solid var(--line)' }}>
            {window.ZULEYA.GIFTS.map(g => (
              <div key={g.year + g.who} style={{
                display: 'grid', gridTemplateColumns: '120px 1fr 1.2fr',
                padding: '28px 0', borderBottom: '1px solid var(--line)', gap: 24, alignItems: 'baseline'
              }}>
                <div className="serif" style={{ fontSize: 32, color: 'var(--gold)' }}>{g.year}</div>
                <div style={{ fontSize: 15 }}>{g.who}</div>
                <div style={{ fontSize: 14, color: 'var(--muted)' }}>{g.what}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <DiplomacyBand onNav={onNav} />

      <section className="section bone">
        <div className="container">
          <Eyebrow>Where the value goes</Eyebrow>
          <h2 className="h-section serif" style={{ marginTop: 24, marginBottom: 56, maxWidth: 720 }}>
            For every AED you spend on a Zuleya carpet:
          </h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {[
              { p: 'AED 0.42', l: 'Artisan wages — direct to women weavers, spinners, dyers' },
              { p: 'AED 0.18', l: 'Wool, dye and raw materials sourced inside Afghanistan' },
              { p: 'AED 0.16', l: 'Healthcare, childcare and schooling for artisans’ families' },
              { p: 'AED 0.24', l: 'Showroom, logistics, design studio and overheads' }
            ].map(s => (
              <div key={s.p}>
                <div className="serif" style={{ fontSize: 48, color: 'var(--ink)', lineHeight: 1 }}>{s.p}</div>
                <div style={{ fontSize: 13, color: 'var(--muted)', lineHeight: 1.5, marginTop: 16 }}>{s.l}</div>
              </div>
            ))}
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 48, letterSpacing: '0.14em' }}>
            FBMI IS A REGISTERED UAE NON-PROFIT · ALL MARGIN RETURNS TO THE LOOMS
          </div>
        </div>
      </section>

      <CtaBand onNav={onNav} />
    </React.Fragment>
  );
}

Object.assign(window, { Home, Story, Impact });