// Castelverdi — Homepage & Shop

const Crest = ({ size = 80 }) => (
  <div className="crest" style={{ width: size, height: size, display: 'inline-flex', color: 'var(--ink)' }}>
    <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="1.2">
      <circle cx="50" cy="50" r="46" strokeWidth="1.5"/>
      <circle cx="50" cy="50" r="38" strokeWidth="0.6" opacity="0.4"/>
      {/* Lemon at top */}
      <ellipse cx="50" cy="22" rx="7" ry="9" fill="var(--lemon)" stroke="currentColor" strokeWidth="1"/>
      {/* Leaves */}
      <path d="M 20 50 Q 25 40 38 42 Q 30 50 25 58 Z" fill="currentColor"/>
      <path d="M 80 50 Q 75 40 62 42 Q 70 50 75 58 Z" fill="currentColor"/>
      <path d="M 50 90 Q 42 82 44 72 Q 50 78 56 72 Q 58 82 50 90 Z" fill="currentColor"/>
      {/* CV monogram */}
      <text x="50" y="62" textAnchor="middle" fontFamily="Cormorant Garamond, serif" fontStyle="italic" fontSize="22" fill="currentColor" stroke="none" fontWeight="500">CV</text>
    </svg>
  </div>
);

const OrnateRule = () => (
  <div className="ornate-rule">
    <svg width="24" height="24" viewBox="0 0 40 40"><ellipse cx="20" cy="20" rx="9" ry="11" fill="var(--lemon)" stroke="var(--ink)" strokeWidth="1.5"/></svg>
  </div>
);

const Home = ({ go, addToCart }) => {
  useReveal();
  const featured = PRODUCTS.slice(0, 4);
  const hero = PRODUCTS[0];

  return (
    <div className="page">
      {/* HERO */}
      <section style={{ minHeight: 'calc(100vh - 72px)', position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderBottom: '2px solid var(--ink)' }}>
        <div style={{ padding: '70px 60px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', position: 'relative' }}>
          {/* Floating lemon */}
          <div className="reveal" style={{ position: 'absolute', top: 40, right: 0, width: 90, height: 130, opacity: 0.85, pointerEvents: 'none' }}>
            <LemonSprig />
          </div>

          <div className="reveal">
            <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginBottom: 36 }}>
              <Crest size={56} />
              <div>
                <div className="eyebrow" style={{ marginBottom: 2 }}>Casablanca · Costiera Amalfitana</div>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 14, color: 'var(--ink-2)' }}>Fondata MMXXIV</div>
              </div>
            </div>
            <h1 className="display" style={{ marginBottom: 32 }}>
              Ceramiche<br/>
              <span className="italic" style={{ color: 'var(--lemon)', WebkitTextStroke: '1.5px var(--ink)' }}>dipinte</span><br/>
              <span className="italic">a mano.</span>
            </h1>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 30 }}>
              <div style={{ width: 40, height: 2, background: 'var(--lemon)' }}></div>
              <div className="eyebrow">Estate MMXXVI — Collezione Limoni</div>
            </div>
            <p style={{ maxWidth: 460, color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.7, marginBottom: 44 }}>
              Hand-painted ceramics in the Mediterranean tradition — pitchers, bowls, platters, vases. Every piece drawn freehand in cobalt and lemon, glazed and fired in our atelier. No two alike.
            </p>
            <div style={{ display: 'flex', gap: 16 }}>
              <button className="btn filled" onClick={() => go('shop')}>Enter the collection</button>
              <button className="btn" onClick={() => go('craft')}>The craft</button>
            </div>
          </div>

          <div className="reveal" style={{ display: 'flex', gap: 48, marginTop: 56, paddingTop: 36, borderTop: '1.5px solid var(--ink)', fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--ink-2)' }}>
            <div>
              <div className="serif italic" style={{ fontSize: 34, color: 'var(--ink)', lineHeight: 1, marginBottom: 4 }}>MMXXIV</div>
              Established
            </div>
            <div>
              <div className="serif italic" style={{ fontSize: 34, color: 'var(--ink)', lineHeight: 1, marginBottom: 4 }}>XLVII</div>
              Pieces in rotation
            </div>
            <div>
              <div className="serif italic" style={{ fontSize: 34, color: 'var(--ink)', lineHeight: 1, marginBottom: 4 }}>100<span style={{ fontSize: 20 }}>%</span></div>
              Painted by hand
            </div>
          </div>
        </div>

        {/* Hero display panel */}
        <div style={{ position: 'relative', background: 'var(--bg-2)', borderLeft: '2px solid var(--ink)', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          {/* Scattered decorative lemons & leaves */}
          <div style={{ position: 'absolute', top: '8%', left: '10%', width: 60, height: 80, transform: 'rotate(-20deg)', opacity: 0.6 }}><LemonSprig /></div>
          <div style={{ position: 'absolute', top: '15%', right: '8%', width: 50, height: 70, transform: 'rotate(35deg)', opacity: 0.5 }}><LemonSprig /></div>
          <div style={{ position: 'absolute', bottom: '10%', left: '6%', width: 44, height: 62, transform: 'rotate(20deg)', opacity: 0.55 }}><LemonSprig /></div>
          <div style={{ position: 'absolute', bottom: '8%', right: '10%', width: 56, height: 78, transform: 'rotate(-40deg)', opacity: 0.6 }}><LemonSprig /></div>

          {/* Central hero product */}
          <div style={{ width: '68%', height: '80%', position: 'relative', zIndex: 1 }}>
            <Placeholder icon={PRODUCT_ICONS[hero.id]} variant="hero" scatter={false} />
          </div>

          {/* Feature card */}
          <div className="offset-shadow" style={{ position: 'absolute', bottom: 40, left: 40, background: 'var(--bg)', border: '2px solid var(--ink)', padding: '18px 22px', maxWidth: 280 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
              <span className="serif italic" style={{ fontSize: 20, lineHeight: 1, color: 'var(--ink)' }}>№{hero.id.slice(1)}</span>
              <span className="eyebrow">The featured piece</span>
            </div>
            <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 26, lineHeight: 1.1, marginBottom: 8 }}>{hero.name}</div>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 12 }}>Amalfitan form · {hero.edition}</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingTop: 12, borderTop: '1.5px solid var(--ink)' }}>
              <span className="serif italic" style={{ fontSize: 20, color: 'var(--ink)' }}>{formatMAD(hero.price)}</span>
              <button className="btn-ghost" onClick={() => go('product', hero.id)}>View piece →</button>
            </div>
          </div>

          <div style={{ position: 'absolute', top: 32, right: 32, writingMode: 'vertical-rl', transform: 'rotate(180deg)', fontSize: 10, letterSpacing: '0.4em', textTransform: 'uppercase', color: 'var(--ink)', fontWeight: 500 }}>
            🍋 Collezione Limoni 🍋
          </div>
        </div>
      </section>

      {/* Marquee */}
      <div className="marquee">
        <div className="marquee-track">
          <span>Hand-painted ceramics</span>
          <span>Cast and glazed in Casablanca</span>
          <span>Italian Mediterranean tradition</span>
          <span>No two pieces alike</span>
          <span>Shipped worldwide</span>
          <span>Hand-painted ceramics</span>
          <span>Cast and glazed in Casablanca</span>
          <span>Italian Mediterranean tradition</span>
        </div>
      </div>

      {/* Featured */}
      <section className="container" style={{ padding: '120px 36px' }}>
        <div className="reveal text-center" style={{ marginBottom: 72 }}>
          <OrnateRule />
          <div className="eyebrow" style={{ marginBottom: 20, color: 'var(--ink)' }}>La Selezione · Estate MMXXVI</div>
          <h2 className="h1" style={{ maxWidth: 880, margin: '0 auto' }}>
            A <span className="italic" style={{ color: 'var(--lemon)', WebkitTextStroke: '1px var(--ink)' }}>small</span> selection<br/>from the kiln this week.
          </h2>
        </div>
        <div className="grid reveal" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 40 }}>
          {featured.map((p, i) => (
            <div key={p.id} className="product-card" onClick={() => go('product', p.id)}>
              <div className="img-wrap">
                <Placeholder icon={PRODUCT_ICONS[p.id]} variant={`h${i}`} label={`№ ${p.id.slice(1)}`} />
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2 }}>
                <span className="serif italic" style={{ fontSize: 14, color: 'var(--ink-2)' }}>№{p.id.slice(1)}</span>
                <div className="p-name" style={{ marginBottom: 0 }}>{p.name}</div>
              </div>
              <div className="p-meta">{p.cat} · {p.year}</div>
              <div className="p-price">{formatMAD(p.price)}</div>
            </div>
          ))}
        </div>
        <div className="text-center reveal" style={{ marginTop: 60 }}>
          <button className="btn" onClick={() => go('shop')}>View all XII pieces →</button>
        </div>
      </section>

      {/* Heritage split */}
      <section style={{ background: 'var(--ink)', color: 'var(--bg)', padding: '140px 0', position: 'relative', overflow: 'hidden' }}>
        {/* Scattered lemons watermark */}
        <div aria-hidden="true" style={{ position: 'absolute', top: 60, right: 60, width: 120, height: 170, opacity: 0.3 }}><LemonSprig /></div>
        <div aria-hidden="true" style={{ position: 'absolute', bottom: 60, left: 80, width: 100, height: 140, opacity: 0.25, transform: 'rotate(30deg)' }}><LemonSprig /></div>

        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 80, alignItems: 'center', position: 'relative' }}>
          <div className="reveal" style={{ position: 'relative' }}>
            <div className="offset-shadow" style={{ aspectRatio: '4/5', background: 'var(--bg)', padding: 12, border: '2px solid var(--lemon)' }}>
              <Placeholder icon="amphora" variant="ed1" />
            </div>
          </div>
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 20, color: 'var(--lemon)' }}>✦ Heritage</div>
            <h2 className="h1" style={{ marginBottom: 36, color: 'var(--bg)' }}>
              <span className="italic" style={{ color: 'var(--lemon)' }}>Ogni pezzo</span>,<br/>
              una storia<br/>dipinta a mano.
            </h2>
            <p className="drop-cap" style={{ fontSize: 18, lineHeight: 1.75, marginBottom: 24, maxWidth: 540, color: 'var(--bg-3)' }}>
              Our pieces draw on the hand-painted pottery of the Mediterranean — the cobalt-and-lemon vessels of Amalfi, the flowered platters of Deruta, the simple forms of a Calabrian trattoria.
            </p>
            <p style={{ fontSize: 18, lineHeight: 1.75, marginBottom: 40, maxWidth: 540, fontStyle: 'italic', fontFamily: 'Cormorant Garamond, serif', color: 'var(--bg)' }}>
              We draw freehand, we glaze, we fire. No decals, no transfers, no two pieces alike.
            </p>
            <button className="btn" style={{ borderColor: 'var(--lemon)', color: 'var(--lemon)' }} onClick={() => go('about')}>Read the atelier's story →</button>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section className="container" style={{ padding: '120px 36px' }}>
        <div className="reveal text-center" style={{ marginBottom: 56 }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>✦ Categorie ✦</div>
          <h2 className="h2"><span className="italic">Browse by form.</span></h2>
        </div>
        <div className="grid reveal" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { name: 'Caraffe', en: 'Pitchers & jugs', icon: 'pitcher', n: 'I' },
            { name: 'Vasi', en: 'Vases', icon: 'vase-tall', n: 'II' },
            { name: 'Ciotole', en: 'Bowls', icon: 'bowl', n: 'III' },
            { name: 'Piatti', en: 'Plates & platters', icon: 'platter', n: 'IV' },
          ].map((c, i) => (
            <div key={i} onClick={() => go('shop')} style={{ cursor: 'pointer', border: '2px solid var(--ink)', background: 'var(--bg)', padding: 24, transition: 'all 300ms', position: 'relative' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '10px 10px 0 var(--lemon)'; e.currentTarget.style.transform = 'translate(-4px, -4px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'none'; }}>
              <div style={{ position: 'absolute', top: 16, right: 20, fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 22, color: 'var(--ink)' }}>{c.n}</div>
              <div style={{ aspectRatio: '1/1', marginBottom: 20 }}>
                <Placeholder icon={c.icon} variant={`cat${i}`} />
              </div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontStyle: 'italic', fontSize: 26, lineHeight: 1.1 }}>{c.name}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-2)', letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 6 }}>{c.en}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Craft teaser */}
      <section style={{ padding: '120px 0', background: 'var(--bg-2)', borderTop: '2px solid var(--ink)', borderBottom: '2px solid var(--ink)', position: 'relative', overflow: 'hidden' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32, alignItems: 'stretch' }}>
          <div className="reveal" style={{ aspectRatio: '3/4', marginTop: 40 }}>
            <Placeholder icon="pitcher" variant="cr1" />
          </div>
          <div className="reveal" style={{ padding: '60px 20px', textAlign: 'center', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
            <div className="eyebrow" style={{ marginBottom: 20 }}>✦ Il Savoir-Faire ✦</div>
            <h2 className="h1" style={{ marginBottom: 28 }}>
              <span className="italic">From clay</span><br/>to kiln, in<br/><span className="italic" style={{ color: 'var(--lemon)', WebkitTextStroke: '1px var(--ink)' }}>five stages.</span>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', marginBottom: 32 }}>
              Throw, dry, paint, glaze, fire. Three to five weeks per piece.
            </p>
            <div>
              <button className="btn filled" onClick={() => go('craft')}>The craft →</button>
            </div>
          </div>
          <div className="reveal" style={{ aspectRatio: '3/4', marginBottom: 40 }}>
            <Placeholder icon="platter" variant="cr2" />
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section style={{ background: 'var(--bg)', padding: '120px 0', position: 'relative' }}>
        <div className="container-narrow text-center reveal" style={{ position: 'relative' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
            <div style={{ width: 48, height: 2, background: 'var(--ink)' }}></div>
            <div className="eyebrow">La Corrispondenza</div>
            <div style={{ width: 48, height: 2, background: 'var(--ink)' }}></div>
          </div>
          <h2 className="h1" style={{ marginBottom: 28 }}>
            <span className="italic">Quiet letters,</span> twice a season.
          </h2>
          <p style={{ color: 'var(--ink-2)', marginBottom: 44, fontSize: 17, maxWidth: 540, margin: '0 auto 44px', lineHeight: 1.7 }}>
            New pieces, studio notes, and private previews before each firing.
          </p>
          <form onSubmit={e => e.preventDefault()} style={{ display: 'flex', gap: 0, maxWidth: 480, margin: '0 auto', border: '2px solid var(--ink)' }}>
            <input className="input" placeholder="Your address" style={{ padding: '14px 16px', borderBottom: 'none', flex: 1 }} />
            <button type="submit" className="btn filled" style={{ border: 'none', padding: '14px 24px' }}>Subscribe →</button>
          </form>
        </div>
      </section>
    </div>
  );
};

const Shop = ({ go }) => {
  useReveal();
  const [cat, setCat] = React.useState('All');
  const cats = ['All', ...new Set(PRODUCTS.map(p => p.cat))];
  const [sort, setSort] = React.useState('Featured');
  let list = cat === 'All' ? PRODUCTS : PRODUCTS.filter(p => p.cat === cat);
  if (sort === 'Price ↑') list = [...list].sort((a,b) => a.price - b.price);
  if (sort === 'Price ↓') list = [...list].sort((a,b) => b.price - a.price);

  return (
    <div className="page">
      <div className="container text-center" style={{ padding: '100px 36px 56px', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 80, left: '10%', width: 80, height: 110, opacity: 0.4, transform: 'rotate(-20deg)' }}><LemonSprig /></div>
        <div style={{ position: 'absolute', top: 120, right: '12%', width: 70, height: 100, opacity: 0.4, transform: 'rotate(25deg)' }}><LemonSprig /></div>

        <Crest size={64} />
        <div className="eyebrow" style={{ margin: '20px 0 18px' }}>La Collezione · {list.length} pieces</div>
        <h1 className="display" style={{ marginBottom: 24 }}>
          The collection,<br/><span className="italic" style={{ color: 'var(--lemon)', WebkitTextStroke: '1.5px var(--ink)' }}>in full.</span>
        </h1>
        <p style={{ maxWidth: 560, margin: '0 auto', color: 'var(--ink-2)', fontSize: 17, lineHeight: 1.7 }}>
          Each piece is thrown, painted, glazed and fired by hand. Editions are small and slow — what leaves the kiln is what there is.
        </p>
      </div>

      <div style={{ borderTop: '2px solid var(--ink)', borderBottom: '2px solid var(--ink)', background: 'var(--bg-2)' }}>
        <div className="container" style={{ padding: '18px 36px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap' }}>
            {cats.map(c => (
              <button key={c} onClick={() => setCat(c)} style={{
                background: cat === c ? 'var(--ink)' : 'transparent',
                color: cat === c ? 'var(--bg)' : 'var(--ink-2)',
                border: '1.5px solid ' + (cat === c ? 'var(--ink)' : 'var(--ink-3)'),
                padding: '8px 16px', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                cursor: 'pointer', fontFamily: 'inherit', transition: 'all 180ms',
              }}>{c}</button>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
            <span className="eyebrow">Sort</span>
            <select value={sort} onChange={e => setSort(e.target.value)} style={{
              background: 'transparent', border: '1.5px solid var(--ink)', padding: '8px 16px',
              fontFamily: 'inherit', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--ink)', cursor: 'pointer',
            }}>
              <option>Featured</option><option>Price ↑</option><option>Price ↓</option>
            </select>
          </div>
        </div>
      </div>

      <section className="container" style={{ padding: '60px 36px 120px' }}>
        <div className="grid" style={{ gridTemplateColumns: 'repeat(3, 1fr)', gap: 48, rowGap: 72 }}>
          {list.map((p, i) => (
            <div key={p.id} className="product-card reveal" onClick={() => go('product', p.id)}>
              <div className="img-wrap">
                <Placeholder icon={PRODUCT_ICONS[p.id]} variant={`s${i}`} label={`№ ${p.id.slice(1)}`} />
                {(p.edition.includes('15') || p.edition.includes('10')) && (
                  <div style={{ position: 'absolute', top: 14, left: 14, background: 'var(--lemon)', border: '1.5px solid var(--ink)', padding: '4px 10px', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--ink)', zIndex: 2, fontWeight: 600 }}>
                    ✦ Rare
                  </div>
                )}
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                    <span className="serif italic" style={{ fontSize: 14, color: 'var(--ink-2)' }}>№{p.id.slice(1)}</span>
                    <div className="p-name">{p.name}</div>
                  </div>
                  <div className="p-meta">{p.cat} · {p.year}</div>
                </div>
                <div className="p-price">{formatMAD(p.price)}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { Home, Shop, Crest, OrnateRule });
