// hero.jsx — cinematic hero section + signature strip

const HERO_PRACTICES = [
  "Himalayan Breath Restoration",
  "Japanese Stillness Ritual",
  "Ayurvedic Gut Wisdom",
  "Taoist Emotional Release",
  "Zen Nervous System Reset",
  "Shaolin Morning Discipline",
  "Sacred Evening Reset",
  "Temple Silence Practice",
  "Monk Sleep Ritual",
  "Taoist Energy Alignment",
  "Buddhist Mind Detox",
  "Ancient Breath Ceremony",
  "Japanese Longevity Ritual",
  "Sacred Gut Renewal",
  "Deep Inner Stillness",
];

const Hero = ({ onStart, onLearn }) => (
  <section className="hero" id="top">
    <div className="hero__candles" aria-hidden="true"></div>

    <div className="hero__top">
      <ZenmunisMark size={42} />
      <div className="label hero__overline" style={{ marginTop: 14 }}>
        Ancient Wisdom · Modern Healing
      </div>
      <Divider width={100} />
    </div>

    <div className="hero__grid">
      <div className="hero__copy">
        <span className="label" style={{ color: "var(--gold-deep)" }}>
          A Teacher · A Practice · A Returning
        </span>
        <h1 className="hero__title">
          Come back<br/>
          <em>to yourself.</em>
        </h1>
        <p className="hero__sub">
          My friend — you did not find this by accident.
          One practice per night. Five minutes a day.
          Drawn from Himalayan, Japanese, Ayurvedic
          and Taoist traditions. Begin tonight.
        </p>

        <div className="hero__actions">
          <PrimaryButton onClick={onStart} size="lg">Begin the Practice →</PrimaryButton>
          <GhostButton onClick={onLearn} size="lg">Read the First Page</GhostButton>
        </div>

        <div className="hero__trust-line">
          One-Time Payment · Instant Access · Go At Your Own Pace
        </div>
      </div>

      <div className="hero__portrait">
        <div className="hero__aura"></div>
        <video
          className="hero__img hero__video"
          src="assets/hero.mp4"
          autoPlay
          muted
          loop
          playsInline
        ></video>
        <div className="hero__caption">
          <span className="hero__caption-label">Tonight's Practice</span>
          <div className="hero__caption-stage" aria-live="polite">
            {HERO_PRACTICES.map((p, i) => (
              <div
                key={i}
                className="hero__caption-title"
                style={{ animationDelay: `${i * 3.5}s` }}
              >
                {p}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ---------- Strip / signature line beneath hero ----------
const STRIP_ITEMS = [
  "Himalayan Breath Restoration",
  "Japanese Stillness Ritual",
  "Ayurvedic Gut Wisdom",
  "Taoist Emotional Release",
  "Zen Nervous System Reset",
  "Shaolin Morning Discipline",
  "Sacred Evening Reset",
  "Temple Silence Practice",
  "Monk Sleep Ritual",
  "Taoist Energy Alignment",
  "Buddhist Mind Detox",
  "Ancient Breath Ceremony",
  "Japanese Longevity Ritual",
  "Sacred Gut Renewal",
  "Deep Inner Stillness",
];

const SignatureStrip = () => {
  // Render the list TWICE for a seamless infinite scroll.
  const renderTrack = (key) => (
    <div className="strip__track" key={key} aria-hidden={key === "b"}>
      {STRIP_ITEMS.map((label, i) => (
        <span className="strip__item" key={key + i}>
          <Diamond /> {label}
        </span>
      ))}
    </div>
  );
  return (
    <section className="strip" aria-label="Traditions in practice">
      <div className="strip__viewport">
        {renderTrack("a")}
        {renderTrack("b")}
      </div>
    </section>
  );
};

Object.assign(window, { Hero, SignatureStrip });