/* ============================================================
   ABOUT — Weyba Tish & Elsa's story
   ============================================================ */
function PageHeader({ eyebrow, title, sub, amharic }) {
  return (
    <section className="page-header">
      <div className="wrap-narrow" style={{ textAlign: 'center' }}>
        {amharic && <div className="amharic" style={{ fontSize: 22, marginBottom: 14 }}>{amharic}</div>}
        <span className="eyebrow">{eyebrow}</span>
        <h1 className="display">{title}</h1>
        {sub && <p>{sub}</p>}
        <div className="divider-mark" style={{ marginTop: 30 }}><DiamondRow /></div>
      </div>
    </section>
  );
}

function About({ go }) {
  useReveal();
  return (
    <div className="page">
      <PageHeader
        eyebrow="Our story"
        amharic="ወይባ ጢስ"
        title={<>The tradition of <span className="serif-it" style={{ color: 'var(--clay)' }}>Weyba&nbsp;Tish</span></>}
        sub="An Ethiopian Yoni smoke ritual, used by generations of women to cleanse, relax, restore the body and promote overall well-being."
      />

      {/* Founder feature */}
      <section className="about-founder wrap">
        <div className="about-founder-art reveal">
          <Placeholder tone="olive" label="Elsa — founder" style={{ aspectRatio: '3/4', borderRadius: 'var(--r-lg)' }} />
          <div className="about-founder-tag">
            <span className="eyebrow gold">Founder</span>
            <strong className="display">Elsa</strong>
          </div>
        </div>
        <div className="about-founder-copy reveal" style={{ transitionDelay: '120ms' }}>
          <h2 className="display">An entrepreneur with a passion for natural beauty &amp; wellness</h2>
          <p className="lead">
            I’m Elsa, founder of E&nbsp;Glow Beauty &amp; Weyba&nbsp;Tish&nbsp;Spa — with a passion for natural
            beauty, wellness, and preserving traditional Ethiopian healing practices.
          </p>
          <p>
            Growing up, I was introduced to Weyba&nbsp;Tish, an Ethiopian Yoni smoke ritual that has
            been used by generations of women to cleanse, relax, restore the body and promote overall
            well-being. This tradition is deeply connected to Ethiopian culture, and it has inspired
            my vision for a wellness business that blends ancient healing with a modern spa experience.
          </p>
          <p>
            Through E&nbsp;Glow Beauty &amp; Weyba&nbsp;Tish&nbsp;Spa, I aim to introduce this unique ritual to
            a broader audience while creating a culturally authentic, luxurious and educational
            experience — alongside a line of organic skincare made with shea butter, mango butter,
            herbal oils and botanical extracts.
          </p>
        </div>
      </section>

      {/* What is the ritual */}
      <section className="about-ritual">
        <div className="wrap">
          <div className="section-head reveal in">
            <span className="eyebrow gold">The ritual</span>
            <h2 className="display" style={{ color: 'var(--paper)' }}>What is Weyba Tish?</h2>
            <p style={{ color: 'rgba(246,238,226,.7)' }}>
              A traditional herbal steam ceremony — warmth, aromatic smoke and deep rest, guiding the
              body back to balance.
            </p>
          </div>
          <div className="about-ritual-grid">
            {[
              ['Cleanse', 'Aromatic herbal smoke purifies and refreshes, a time-honoured act of renewal.'],
              ['Relax', 'Warmth and stillness ease tension and quiet a busy mind.'],
              ['Restore', 'Traditional herbs support the body’s natural rhythms and recovery.'],
              ['Well-being', 'A holistic ritual that nurtures body, spirit and a sense of belonging.'],
            ].map(([t, d], i) => (
              <div className="about-ritual-card reveal" key={t} style={{ transitionDelay: `${i * 80}ms` }}>
                <LeafGlyph size={28} />
                <h4 className="display">{t}</h4>
                <p>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Values / why qualified */}
      <section className="about-values wrap">
        <div className="about-values-copy reveal">
          <span className="eyebrow">Why this, why now</span>
          <h2 className="display">Heritage meets the modern wellness movement</h2>
          <p>
            My personal connection to the tradition, combined with my commitment to wellness and
            entrepreneurship, is what makes this business uniquely mine. I understand both the cultural
            significance of Weyba&nbsp;Tish and the growing demand for holistic self-care.
          </p>
          <div className="about-values-list">
            {[
              ['Culturally authentic', 'Rooted in genuine Ethiopian practice and respect.'],
              ['Luxurious', 'A calm, elevated, sensory spa experience.'],
              ['Educational', 'We share the meaning behind every ritual.'],
              ['Organic', 'Natural ingredients your skin recognises.'],
            ].map(([t, d]) => (
              <div className="about-value" key={t}>
                <span className="diamond fill" />
                <div><strong>{t}</strong><span>{d}</span></div>
              </div>
            ))}
          </div>
        </div>
        <div className="about-values-art reveal" style={{ transitionDelay: '120ms' }}>
          <Placeholder tone="clay" label="Herbal ingredients" style={{ aspectRatio: '3/4', borderRadius: 'var(--r-lg)' }} />
        </div>
      </section>

      <CTABand go={go}
        eyebrow="Begin your journey"
        title={<>Experience the ritual <span className="serif-it">for yourself</span></>}
        btn="Book an appointment" target="book" />
    </div>
  );
}

/* Shared CTA band (light, clay) */
function CTABand({ go, eyebrow, title, btn, target, secondary }) {
  return (
    <section className="cta-band">
      <div className="wrap-narrow" style={{ textAlign: 'center' }}>
        <span className="eyebrow gold" style={{ display: 'block', marginBottom: 18 }}>{eyebrow}</span>
        <h2 className="display">{title}</h2>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', marginTop: 34, flexWrap: 'wrap' }}>
          <button className="btn btn-clay" onClick={() => go(target)}>{btn} <span className="arrow">→</span></button>
          {secondary && <button className="btn btn-ghost" onClick={() => go(secondary[1])}>{secondary[0]}</button>}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { About, PageHeader, CTABand });