/* ============================================================
   HOME — two directions
   ============================================================ */

/* Featured products shared between directions */
function FeaturedProducts({ go, dark = false }) {
  const picks = PRODUCTS.slice(0, 3);
  return (
    <div className="feat-grid">
      {picks.map((p, i) => (
        <button key={p.id} className={`feat-card reveal ${dark ? 'on-dark' : ''}`} style={{ transitionDelay: `${i * 90}ms` }} onClick={() => go('products')}>
          <Placeholder tone={p.tone} label={p.name} style={{ aspectRatio: '4/5', borderRadius: 'var(--r-md)' }} />
          <div className="feat-meta">
            <span className="feat-cat">{p.cat}</span>
            <h4>{p.name}</h4>
            <span className="feat-price">${p.price}</span>
          </div>
        </button>
      ))}
    </div>
  );
}

/* ============================================================
   DIRECTION 01 — EDITORIAL
   ============================================================ */
function HomeEditorial({ go }) {
  useReveal();
  return (
    <div className="page home-ed">
      {/* HERO */}
      <section className="ed-hero wrap">
        <div className="ed-hero-copy">
          <span className="eyebrow reveal in">Ethiopian healing tradition</span>
          <h1 className="display reveal in" style={{ transitionDelay: '80ms' }}>
            Ancient ritual,<br /><span className="serif-it" style={{ color: 'var(--clay)' }}>modern glow.</span>
          </h1>
          <p className="ed-hero-lead reveal in" style={{ transitionDelay: '160ms' }}>
            Weyba&nbsp;Tish is a centuries-old Ethiopian smoke ritual passed through generations of women —
            to cleanse, relax and restore. We bring it to you alongside a line of organic,
            botanical skincare.
          </p>
          <div className="ed-hero-cta reveal in" style={{ transitionDelay: '240ms' }}>
            <button className="btn btn-clay" onClick={() => go('book')}>Book the ritual <span className="arrow">→</span></button>
            <button className="btn btn-ghost" onClick={() => go('products')}>Shop the line</button>
          </div>
          <div className="ed-hero-stats reveal in" style={{ transitionDelay: '320ms' }}>
            <div><strong>100%</strong><span>Organic botanicals</span></div>
            <div className="vr" />
            <div><strong>Generations</strong><span>of tradition</span></div>
            <div className="vr" />
            <div><strong>By hand</strong><span>Small batch</span></div>
          </div>
        </div>
        <div className="ed-hero-art reveal in" style={{ transitionDelay: '120ms' }}>
          <div className="ed-hero-frame">
            <Placeholder tone="clay" label="Hero — the ritual" glyph={true} style={{ height: '100%', borderRadius: 'var(--r-lg)' }} />
          </div>
          <div className="ed-hero-badge">
            <LeafGlyph size={20} />
            <span>Shea · Mango<br />Herbal oils</span>
          </div>
          <div className="ed-hero-tibeb"><div className="tibeb" /></div>
        </div>
      </section>

      {/* MARQUEE / values strip */}
      <section className="ed-strip">
        <div className="ed-strip-track">
          {[...Array(2)].map((_, k) => (
            <div className="ed-strip-row" key={k}>
              {['Cleanse', 'Restore', 'Relax', 'Glow', 'Cleanse', 'Restore', 'Relax', 'Glow'].map((w, i) => (
                <React.Fragment key={i}>
                  <span className="display">{w}</span>
                  <span className="ed-strip-dot">✦</span>
                </React.Fragment>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* STORY */}
      <section className="ed-story wrap">
        <div className="ed-story-art reveal">
          <Placeholder tone="olive" label="Elsa — founder" style={{ aspectRatio: '4/5', borderRadius: 'var(--r-lg)' }} />
        </div>
        <div className="ed-story-copy reveal" style={{ transitionDelay: '120ms' }}>
          <span className="eyebrow">Meet Elsa</span>
          <h2 className="display">A vision rooted<br />in heritage</h2>
          <p>
            “Growing up, I was introduced to Weyba&nbsp;Tish — a ritual used by generations of
            women to cleanse, relax and restore. It is deeply woven into Ethiopian culture, and it
            inspired everything I am building.”
          </p>
          <p>
            Through E&nbsp;Glow Beauty &amp; Weyba&nbsp;Tish&nbsp;Spa, Elsa brings this tradition to a wider
            audience — a culturally authentic, luxurious and educational experience, paired with
            organic skincare made from shea, mango butter and botanical extracts.
          </p>
          <button className="link-underline" onClick={() => go('about')}>Read her full story →</button>
        </div>
      </section>

      {/* PRODUCTS */}
      <section className="ed-products wrap">
        <div className="section-head reveal">
          <span className="eyebrow">The E Glow Beauty line</span>
          <h2 className="display">Made by hand, with intention</h2>
          <p>Small-batch skincare formulated with natural ingredients — nothing your skin doesn’t recognise.</p>
        </div>
        <FeaturedProducts go={go} />
        <div style={{ textAlign: 'center', marginTop: 56 }} className="reveal">
          <button className="btn btn-dark" onClick={() => go('products')}>View all products <span className="arrow">→</span></button>
        </div>
      </section>

      {/* RITUAL CTA band */}
      <RitualBand go={go} />
    </div>
  );
}

/* Shared ritual explainer band */
function RitualBand({ go }) {
  const steps = [
    ['01', 'Consultation', 'We learn your body and your intention for the session.'],
    ['02', 'Herbal Steam', 'A blend of traditional herbs is gently warmed beneath you.'],
    ['03', 'The Cleanse', 'Aromatic smoke cleanses, relaxes and restores.'],
    ['04', 'Restoration', 'Wrapped in warmth, you rest and return renewed.'],
  ];
  return (
    <section className="ritual-band">
      <div className="wrap">
        <div className="section-head reveal in" style={{ marginBottom: 56 }}>
          <span className="eyebrow gold">The Weyba Tish ritual</span>
          <h2 className="display" style={{ color: 'var(--paper)' }}>Four movements toward stillness</h2>
        </div>
        <div className="ritual-steps">
          {steps.map(([n, t, d], i) => (
            <div className="ritual-step reveal" key={n} style={{ transitionDelay: `${i * 90}ms` }}>
              <span className="ritual-num display">{n}</span>
              <h4>{t}</h4>
              <p>{d}</p>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 64 }} className="reveal">
          <button className="btn btn-gold-out" onClick={() => go('book')}>Reserve your session <span className="arrow">→</span></button>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   DIRECTION 02 — SANCTUARY (dark, immersive)
   ============================================================ */
function HomeSanctuary({ go }) {
  useReveal();
  return (
    <div className="page home-sanc">
      {/* HERO full-bleed */}
      <section className="sanc-hero">
        <Placeholder tone="dark" label="" glyph={false} className="sanc-hero-bg" style={{ position: 'absolute', inset: 0 }} />
        <div className="sanc-hero-veil" />
        <div className="sanc-hero-pattern" />
        <div className="sanc-hero-inner wrap">
          <div className="divider-mark reveal in" style={{ color: 'var(--gold-soft)' }}>
            <span className="amharic" style={{ fontSize: 20 }}>ወይባ ጢስ</span>
          </div>
          <h1 className="display reveal in" style={{ transitionDelay: '90ms' }}>
            Enter the <span className="serif-it" style={{ color: 'var(--gold-soft)' }}>sanctuary</span>
          </h1>
          <p className="reveal in" style={{ transitionDelay: '170ms' }}>
            An Ethiopian smoke ritual, generations in the making. Step out of the noise and into
            warmth, smoke and stillness — and leave glowing.
          </p>
          <div className="sanc-hero-cta reveal in" style={{ transitionDelay: '250ms' }}>
            <button className="btn btn-clay" onClick={() => go('book')}>Begin the ritual <span className="arrow">→</span></button>
            <button className="btn btn-gold-out" onClick={() => go('about')}>Discover Weyba Tish</button>
          </div>
        </div>
        <div className="sanc-scroll">scroll<span /></div>
      </section>

      {/* INTRO statement on dark */}
      <section className="sanc-statement">
        <div className="wrap-narrow reveal">
          <span className="eyebrow gold" style={{ display: 'block', textAlign: 'center', marginBottom: 28 }}>Our philosophy</span>
          <p className="sanc-big display">
            Beauty is not applied. It is <span className="serif-it" style={{ color: 'var(--gold-soft)' }}>restored</span> —
            from heritage, from herbs, from rest.
          </p>
        </div>
      </section>

      {/* SERVICES on dark */}
      <section className="sanc-services">
        <div className="wrap">
          <div className="sanc-services-head reveal">
            <div>
              <span className="eyebrow gold">Spa rituals</span>
              <h2 className="display" style={{ color: 'var(--paper)', margin: '14px 0 0' }}>Choose your sanctuary</h2>
            </div>
            <button className="link-underline" style={{ color: 'var(--gold-soft)' }} onClick={() => go('book')}>All services →</button>
          </div>
          <div className="sanc-service-list">
            {SERVICES.map((s, i) => (
              <button key={s.id} className="sanc-service reveal" style={{ transitionDelay: `${i * 70}ms` }} onClick={() => go('book')}>
                <span className="sanc-service-idx">0{i + 1}</span>
                <span className="sanc-service-name display">{s.name}</span>
                <span className="sanc-service-dur">{s.duration}</span>
                <span className="sanc-service-price">${s.price}</span>
                <span className="sanc-service-arrow">→</span>
              </button>
            ))}
          </div>
        </div>
      </section>

      {/* PRODUCTS on light break */}
      <section className="sanc-products">
        <div className="wrap">
          <div className="section-head reveal">
            <span className="eyebrow">E Glow Beauty</span>
            <h2 className="display">Carry the glow home</h2>
            <p>Organic, small-batch skincare — the ritual continued in your daily routine.</p>
          </div>
          <FeaturedProducts go={go} />
          <div style={{ textAlign: 'center', marginTop: 56 }} className="reveal">
            <button className="btn btn-clay" onClick={() => go('products')}>Explore the collection <span className="arrow">→</span></button>
          </div>
        </div>
      </section>

      {/* FOUNDER quote band */}
      <section className="sanc-founder">
        <div className="wrap sanc-founder-inner">
          <div className="sanc-founder-art reveal">
            <Placeholder tone="cocoa" label="Elsa — founder" style={{ aspectRatio: '1/1', borderRadius: '50%' }} />
          </div>
          <div className="sanc-founder-copy reveal" style={{ transitionDelay: '120ms' }}>
            <span className="amharic" style={{ fontSize: 28 }}>“</span>
            <p className="display">
              My personal connection to this tradition, with my commitment to wellness, is what
              makes E&nbsp;Glow Beauty uniquely ours.
            </p>
            <span className="sanc-founder-name">Elsa — Founder, E Glow Beauty &amp; Weyba Tish Spa</span>
            <button className="link-underline" style={{ marginTop: 24, color: 'var(--gold-soft)' }} onClick={() => go('about')}>Her story →</button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { HomeEditorial, HomeSanctuary, FeaturedProducts, RitualBand });