/* global React */

function Marquee() {
  const items = ["Rosin-Tested", "Den-Bred", "Single-Phenotype", "Cold-Cured", "Limited Drops", "Hand-Selected", "Lab-Verified Terps"];
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t, i) => (
          <span key={i} className="marquee-item street">
            {t}<span className="marquee-bee">✸</span>
          </span>
        ))}
      </div>
    </div>
  );
}

const PILLARS = [
  { k: "01", t: "Bred in the den", d: "Every line is mother-selected over multiple runs — no shortcuts, no untested crosses. Slow genetics, stable phenos." },
  { k: "02", t: "Pressed & proven", d: "We rosin-test stock before it ships. Yield, color and terpene panels published with each release." },
  { k: "03", t: "Counted, not flooded", d: "Reserve drops are numbered and capped. When the jar's empty, the line rests for the next season." },
];

function Pillars() {
  return (
    <section className="pillars">
      <div className="pillars-head">
        <span className="eyebrow">Why the den</span>
        <h2>Luxury isn't loud.<br/>It's <span className="text-honey">cured right.</span></h2>
      </div>
      <div className="pillars-grid">
        {PILLARS.map(p => (
          <article key={p.k} className="pcard">
            <span className="pcard-num street">{p.k}</span>
            <h3>{p.t}</h3>
            <p>{p.d}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function DropBand() {
  return (
    <section className="dropband">
      <div className="dropband-inner">
        <div className="dropband-glow" />
        <span className="eyebrow">Next reserve drop</span>
        <h2 className="dropband-title">The <span className="text-honey">Amber Den</span> release lands soon.</h2>
        <p className="lead">Twelve numbered packs. Cold-cured, rosin-graded, sealed in the den. Join the list to get first claim.</p>
        <form className="dropband-form" onSubmit={(e)=>e.preventDefault()}>
          <input className="field" type="email" placeholder="you@cultivar.com" aria-label="Email" />
          <button className="btn btn--gold btn--lg" type="submit">Notify me</button>
        </form>
        <span className="caption">No spam. Drop alerts &amp; germination notes only.</span>
      </div>
    </section>
  );
}

window.Marquee = Marquee;
window.Pillars = Pillars;
window.DropBand = DropBand;