// SHOP. coming soon. 3 product placeholders + email capture.

function Shop() {
  const [email, setEmail] = useState('');
  const [sent, setSent] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setSent(true);
  };
  return (
    <section className="section shop scales" id="shop">
      <div className="container">
        <Reveal as="div" className="shop__head">
          <Eyebrow>The Shop</Eyebrow>
          <h2 className="h-section">
            Sacred Creations.
            <span className="gold">Coming Soon.</span>
          </h2>
          <p className="sub-italic" style={{ color: '#E07B2A' }}>
            Created with intention, symbolism, and energy woven into every piece.
          </p>
        </Reveal>

        <Reveal as="div" className="shop__grid" stagger>
          <article className="p-card">
            <span className="p-card__badge">Coming Soon</span>
            <div className="p-card__art p-card__art--tee">
              <svg width="110" height="120" viewBox="0 0 110 120" fill="none">
                <path d="M30 10 L20 22 L10 30 L18 42 L28 36 V108 H82 V36 L92 42 L100 30 L90 22 L80 10 H70 C70 18 60 24 55 24 C50 24 40 18 40 10 Z" fill="#5C2A00" stroke="#C9951A" strokeWidth="1"/>
                <g transform="translate(55 60)" fill="none" stroke="#C9951A" strokeWidth="0.9">
                  <circle r="14" opacity="0.7"/>
                  <circle r="9" opacity="0.5"/>
                  <circle r="4" fill="#FFE9B0" stroke="none"/>
                </g>
              </svg>
            </div>
            <h3>The Cosmic Healer Tee</h3>
            <p>Wearable remembrance. Hand-printed on organic cotton.</p>
          </article>

          <article className="p-card">
            <span className="p-card__badge">Coming Soon</span>
            <div className="p-card__art p-card__art--art">
              <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
                <rect x="10" y="10" width="100" height="100" fill="#3D0000" stroke="#C9951A"/>
                <g transform="translate(60 60)" fill="none" stroke="#C9951A">
                  <circle r="38" opacity="0.45"/>
                  <circle r="28" opacity="0.55"/>
                  <circle r="18" opacity="0.75"/>
                  <circle r="6" fill="#FFE9B0" stroke="none"/>
                  {[0,45,90,135,180,225,270,315].map(a=>{const r=a*Math.PI/180; return <line key={a} x1={Math.cos(r)*10} y1={Math.sin(r)*10} x2={Math.cos(r)*40} y2={Math.sin(r)*40}/>})}
                </g>
              </svg>
            </div>
            <h3>Sacred Artwork Prints</h3>
            <p>Limited prints gold-ink line work on warm parchment.</p>
          </article>

          <article className="p-card">
            <span className="p-card__badge">Coming Soon</span>
            <div className="p-card__art p-card__art--book">
              <svg width="100" height="120" viewBox="0 0 100 120" fill="none">
                <rect x="10" y="10" width="80" height="100" rx="2" fill="#1f6b3a" stroke="#C9951A"/>
                <g transform="translate(50 60)" fill="#FFE9B0">
                  <circle r="3"/>
                  {[-22,-12,12,22].map((y,i)=><circle key={i} cy={y} r="1.4"/>)}
                  {[-22,-12,12,22].map((x,i)=><circle key={i} cx={x} r="1.4"/>)}
                </g>
                <text x="50" y="100" textAnchor="middle" fill="#FFE9B0" fontFamily="Cormorant Garamond" fontStyle="italic" fontSize="10">Little Dragon</text>
              </svg>
            </div>
            <h3>Children's Book Series</h3>
            <p>Illustrated stories for the children who already remember.</p>
          </article>
        </Reveal>

        <Reveal as="div" className="notify" delay={120}>
          <h3>Be the first to know when the shop opens.</h3>
          {sent ? (
            <p className="notify__sent">You're on the list. Sacred things are coming.</p>
          ) : (
            <form className="notify__form" onSubmit={submit}>
              <input
                type="email"
                className="notify__input"
                placeholder="your.email@example.com"
                value={email}
                onChange={(e)=>setEmail(e.target.value)}
                required
              />
              <Button type="submit" size="sm">Notify Me</Button>
            </form>
          )}
        </Reveal>
      </div>
    </section>
  );
}

window.Shop = Shop;