// Castelverdi — Product detail, Lookbook, About, Craft, Contact

const Product = ({ id, go, addToCart, openCart }) => {
  useReveal();
  const p = PRODUCTS.find(x => x.id === id) || PRODUCTS[0];
  const [angle, setAngle] = React.useState(0);
  const [qty, setQty] = React.useState(1);

  return (
    <div className="page">
      <div className="container" style={{ padding: '32px 36px 16px' }}>
        <nav style={{ fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>
          <button onClick={() => go('home')} style={{ background: 'none', border: 'none', color: 'inherit', font: 'inherit', cursor: 'pointer', letterSpacing: 'inherit', textTransform: 'inherit' }}>Home</button>
          <span style={{ margin: '0 10px' }}>/</span>
          <button onClick={() => go('shop')} style={{ background: 'none', border: 'none', color: 'inherit', font: 'inherit', cursor: 'pointer', letterSpacing: 'inherit', textTransform: 'inherit' }}>{p.cat}</button>
          <span style={{ margin: '0 10px' }}>/</span>
          <span style={{ color: 'var(--ink)' }}>№ {p.id.slice(1)}</span>
        </nav>
      </div>

      <div className="container" style={{ padding: '20px 36px 100px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80 }}>
        {/* Gallery */}
        <div>
          <div style={{ aspectRatio: '4/5', marginBottom: 16, position: 'relative' }}>
            <Placeholder icon={PRODUCT_ICONS[p.id]} variant={`pd${angle}`} label={`View ${angle + 1} / 4`} />
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
            {[0,1,2,3].map(i => (
              <div key={i} onClick={() => setAngle(i)} style={{ aspectRatio: '1/1', cursor: 'pointer', outline: angle === i ? '1px solid var(--ink)' : 'none', outlineOffset: 4 }}>
                <Placeholder icon={PRODUCT_ICONS[p.id]} variant={`pt${i}`} />
              </div>
            ))}
          </div>
        </div>

        {/* Details */}
        <div style={{ position: 'sticky', top: 100, alignSelf: 'start' }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>{p.cat} · {p.year} · {p.edition}</div>
          <h1 className="h1" style={{ marginBottom: 6 }}>
            <span className="italic">{p.name}</span>
          </h1>
          <div style={{ fontSize: 16, color: 'var(--ink-3)', marginBottom: 28, fontStyle: 'italic', fontFamily: 'Cormorant Garamond, serif' }}>{p.nameEn}</div>

          <div style={{ fontSize: 22, fontFamily: 'Cormorant Garamond, serif', marginBottom: 32, color: 'var(--ink)' }}>
            {formatMAD(p.price)}
          </div>

          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', marginBottom: 36, paddingBottom: 36, borderBottom: '1px solid var(--line)' }}>
            {p.desc}
          </p>

          {/* Specs */}
          <dl style={{ display: 'grid', gridTemplateColumns: '140px 1fr', gap: '14px 24px', marginBottom: 40 }}>
            <dt className="eyebrow">Material</dt>
            <dd style={{ fontSize: 14, color: 'var(--ink)' }}>{p.material}</dd>
            <dt className="eyebrow">Height</dt>
            <dd style={{ fontSize: 14, color: 'var(--ink)' }}>{p.height}</dd>
            <dt className="eyebrow">Reference</dt>
            <dd style={{ fontSize: 14, color: 'var(--ink)' }}>After a {p.year} original</dd>
            <dt className="eyebrow">Edition</dt>
            <dd style={{ fontSize: 14, color: 'var(--ink)' }}>{p.edition}</dd>
          </dl>

          {/* Qty + CTA */}
          <div style={{ display: 'flex', gap: 16, alignItems: 'stretch', marginBottom: 24 }}>
            <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--line)' }}>
              <button onClick={() => setQty(Math.max(1, qty-1))} style={{ background: 'none', border: 'none', padding: '12px 16px', cursor: 'pointer', color: 'var(--ink-2)', fontFamily: 'inherit' }}>−</button>
              <span style={{ padding: '0 16px', fontSize: 14, minWidth: 20, textAlign: 'center' }}>{qty}</span>
              <button onClick={() => setQty(qty+1)} style={{ background: 'none', border: 'none', padding: '12px 16px', cursor: 'pointer', color: 'var(--ink-2)', fontFamily: 'inherit' }}>+</button>
            </div>
            <button className="btn filled" style={{ flex: 1, justifyContent: 'center' }} onClick={() => { addToCart(p.id, qty); openCart(); }}>Add to collection</button>
          </div>
          <button className="btn" style={{ width: '100%', justifyContent: 'center' }} onClick={() => go('contact')}>Inquire about this piece</button>

          {/* Notes */}
          <div style={{ marginTop: 40, paddingTop: 28, borderTop: '1px solid var(--line)', fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.7 }}>
            <div style={{ marginBottom: 6 }}>✦ Ships from our Casablanca atelier</div>
            <div style={{ marginBottom: 6 }}>✦ 2–4 weeks lead time · finished to order</div>
            <div>✦ Each piece individually numbered</div>
          </div>
        </div>
      </div>

      {/* Related */}
      <section style={{ background: 'var(--bg-2)', padding: '100px 0', borderTop: '1px solid var(--line)' }}>
        <div className="container">
          <div className="eyebrow reveal" style={{ marginBottom: 32 }}>You may also find</div>
          <div className="grid reveal" style={{ gridTemplateColumns: 'repeat(4, 1fr)', gap: 32 }}>
            {PRODUCTS.filter(x => x.id !== p.id).slice(0, 4).map((rp, i) => (
              <div key={rp.id} className="product-card" onClick={() => { go('product', rp.id); window.scrollTo(0,0); }}>
                <div className="img-wrap"><Placeholder icon={PRODUCT_ICONS[rp.id]} variant={`r${i}`} /></div>
                <div className="p-name">{rp.name}</div>
                <div className="p-meta">{rp.cat}</div>
                <div className="p-price">{formatMAD(rp.price)}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

const Lookbook = ({ go }) => {
  useReveal();
  return (
    <div className="page">
      <div className="container" style={{ padding: '80px 36px 60px' }}>
        <div className="eyebrow" style={{ marginBottom: 18 }}>Lookbook · Editorial archive</div>
        <h1 className="display" style={{ maxWidth: 1000, marginBottom: 32 }}>
          Rooms, <span className="italic">quietly</span><br/>
          inhabited.
        </h1>
        <p style={{ maxWidth: 560, fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.7 }}>
          Interior studies shot in villas, libraries and private gardens across the Mediterranean. Each edition, a small film.
        </p>
      </div>

      <div style={{ borderTop: '1px solid var(--line)' }}>
        {LOOKBOOK.map((l, i) => (
          <section key={l.id} className="reveal" style={{
            padding: '80px 0',
            borderBottom: '1px solid var(--line)',
            background: i % 2 === 0 ? 'var(--bg)' : 'var(--bg-2)',
          }}>
            <div className="container" style={{ display: 'grid', gridTemplateColumns: i % 2 === 0 ? '1fr 1.3fr' : '1.3fr 1fr', gap: 60, alignItems: 'center' }}>
              <div style={{ order: i % 2 === 0 ? 0 : 1 }}>
                <div className="eyebrow" style={{ marginBottom: 18 }}>{l.season} · {l.year}</div>
                <h2 className="h1" style={{ marginBottom: 12 }}><span className="italic">{l.title}</span></h2>
                <div className="h3 muted" style={{ marginBottom: 28, fontStyle: 'italic' }}>{l.subtitle}</div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)', marginBottom: 28, maxWidth: 440 }}>
                  Photographed in an eighteenth-century palazzo on the Via Giulia. Featuring the Medici urn, Corinthian capital, and a private selection of cherubs from the atelier archive.
                </p>
                <button className="btn-ghost">Read the editorial →</button>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gridTemplateRows: 'repeat(2, 180px)', gap: 12, order: i % 2 === 0 ? 1 : 0 }}>
                <div style={{ gridRow: 'span 2' }}><Placeholder icon={['urn','head','column'][i]} variant={`lb${i}a`} /></div>
                <div><Placeholder icon={['capital','amphora','creature'][i]} variant={`lb${i}b`} /></div>
                <div><Placeholder icon={['creature','bowl','mask'][i]} variant={`lb${i}c`} /></div>
              </div>
            </div>
          </section>
        ))}
      </div>
    </div>
  );
};

const About = ({ go }) => {
  useReveal();
  return (
    <div className="page">
      <section style={{ padding: '100px 0 60px', borderBottom: '1px solid var(--line)' }}>
        <div className="container-narrow">
          <div className="eyebrow reveal" style={{ marginBottom: 24 }}>L'Atelier · Since MMXXIV</div>
          <h1 className="display reveal" style={{ marginBottom: 40 }}>
            A small house of<br/><span className="italic">decorative</span> objects.
          </h1>
        </div>
      </section>

      <section style={{ padding: '80px 0' }}>
        <div className="container-narrow reveal" style={{ fontSize: 19, lineHeight: 1.75, color: 'var(--ink-2)' }}>
          <p style={{ marginBottom: 28 }}>
            Castelverdi began with a single cherub — a weathered figure found in the garden of a villa outside Verona, its stone features softened by two centuries of rain. It suggested a question: why should such objects be the province only of museums and rare antiquaries?
          </p>
          <p style={{ marginBottom: 28 }}>
            Our atelier studies classical forms — busts, urns, capitals, creatures — and produces them in small, considered editions. We work in stone resin, a composite that receives patina and finishing as faithfully as marble or limestone itself. Every piece is cast, sanded, and hand-patinated in our studio.
          </p>
          <p>
            We do not claim to make antiques. We make objects with the character of antiquity — pieces that feel found, that grow more at home with each season, that take their place in a library or on a mantelpiece as though they had always been there.
          </p>
        </div>
      </section>

      <section style={{ padding: '40px 0 120px' }}>
        <div className="container-narrow reveal">
          <div style={{ aspectRatio: '16/9', marginBottom: 60 }}>
            <Placeholder icon="head" variant="about1" label="The atelier, Casablanca" />
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, paddingTop: 40, borderTop: '1px solid var(--line)' }}>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Founded</div>
              <div className="h2">MMXXIV</div>
              <p className="muted" style={{ fontSize: 14, marginTop: 8 }}>In Casablanca, with an eye toward Florence.</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Studio</div>
              <div className="h2"><span className="italic">Quartier Gauthier</span></div>
              <p className="muted" style={{ fontSize: 14, marginTop: 8 }}>By appointment, rue de Bordeaux.</p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Output</div>
              <div className="h2">~XL <span className="italic muted" style={{ fontSize: 22 }}>per year</span></div>
              <p className="muted" style={{ fontSize: 14, marginTop: 8 }}>Everything we produce, hand-finished.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};

const Craft = ({ go }) => {
  useReveal();
  const steps = [
    { n: 'I', title: 'Studio e ricerca', en: 'Study & research', text: 'Each piece begins with a source — a fragment photographed in a museum, a plate from a 19th-century catalog, a detail in a fresco. We sketch, measure, and model.' },
    { n: 'II', title: 'Il modello', en: 'The master', text: 'A single master is sculpted and refined over several weeks, every surface considered. This is the piece from which all editions descend.' },
    { n: 'III', title: 'La fusione', en: 'The casting', text: 'From the master, we produce a limited edition in stone resin — a composite with the density and receptivity of stone, cast in our atelier.' },
    { n: 'IV', title: 'Patina', en: 'Finishing', text: 'Each piece is sanded, patinated, and aged by hand. Verdigris, bronze, travertine, alabaster — finishes developed over months and applied over days.' },
    { n: 'V', title: 'Numerazione', en: 'Numbering', text: 'Finally, each piece is signed and numbered on its base. It leaves the atelier with a short handwritten note on the piece it descends from.' },
  ];
  return (
    <div className="page">
      <section style={{ padding: '100px 0 40px', borderBottom: '1px solid var(--line)' }}>
        <div className="container-narrow">
          <div className="eyebrow reveal" style={{ marginBottom: 24 }}>Il Savoir-Faire</div>
          <h1 className="display reveal" style={{ marginBottom: 28 }}>
            <span className="italic">Five stages,</span><br/>from fragment to piece.
          </h1>
          <p className="reveal" style={{ fontSize: 17, color: 'var(--ink-2)', maxWidth: 640, lineHeight: 1.7 }}>
            Our production follows a slow rhythm. A single piece may take six to twelve weeks from sketch to numbered object.
          </p>
        </div>
      </section>

      <section style={{ padding: '80px 0 120px' }}>
        <div className="container-narrow">
          {steps.map((s, i) => (
            <div key={s.n} className="reveal" style={{
              display: 'grid',
              gridTemplateColumns: '120px 1fr 1fr',
              gap: 48,
              padding: '48px 0',
              borderBottom: i < steps.length - 1 ? '1px solid var(--line)' : 'none',
              alignItems: 'start',
            }}>
              <div className="serif italic" style={{ fontSize: 56, color: 'var(--ink-3)', lineHeight: 1 }}>{s.n}</div>
              <div>
                <h2 className="h2" style={{ marginBottom: 4 }}><span className="italic">{s.title}</span></h2>
                <div className="eyebrow" style={{ marginBottom: 18 }}>{s.en}</div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--ink-2)' }}>{s.text}</p>
              </div>
              <div style={{ aspectRatio: '4/5' }}>
                <Placeholder icon={['urn','head','capital','creature','column'][i]} variant={`craft${i}`} label={`Stage ${s.n}`} />
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};

const Contact = ({ go }) => {
  useReveal();
  const [sent, setSent] = React.useState(false);
  return (
    <div className="page">
      <div className="container" style={{ padding: '100px 36px 60px' }}>
        <div className="eyebrow reveal" style={{ marginBottom: 24 }}>Contatti · Bespoke inquiries</div>
        <h1 className="display reveal" style={{ maxWidth: 1100, marginBottom: 32 }}>
          <span className="italic">Tell us</span> what you<br/>have in mind.
        </h1>
      </div>

      <div className="container" style={{ padding: '20px 36px 120px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80 }}>
        <div className="reveal">
          {sent ? (
            <div style={{ padding: 60, border: '1px solid var(--line)', textAlign: 'center' }}>
              <div className="serif italic" style={{ fontSize: 48, marginBottom: 16 }}>Grazie.</div>
              <p className="muted">We'll write back within two working days.</p>
            </div>
          ) : (
            <form onSubmit={e => { e.preventDefault(); setSent(true); }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginBottom: 32 }}>
                <div>
                  <label className="label">Name</label>
                  <input className="input" placeholder="Your name" />
                </div>
                <div>
                  <label className="label">Email</label>
                  <input className="input" type="email" placeholder="you@domain.com" />
                </div>
              </div>
              <div style={{ marginBottom: 32 }}>
                <label className="label">Nature of inquiry</label>
                <select className="select">
                  <option>A specific piece from the collection</option>
                  <option>A bespoke commission</option>
                  <option>Trade / interior design</option>
                  <option>Press & editorial</option>
                  <option>Something else</option>
                </select>
              </div>
              <div style={{ marginBottom: 40 }}>
                <label className="label">Your message</label>
                <textarea className="textarea" rows="6" placeholder="Tell us about the piece, the room, the occasion…" style={{ resize: 'vertical' }}></textarea>
              </div>
              <button type="submit" className="btn filled">Send inquiry</button>
            </form>
          )}
        </div>
        <aside className="reveal" style={{ background: 'var(--bg-2)', padding: 40, border: '1px solid var(--line)', alignSelf: 'start' }}>
          <div className="eyebrow" style={{ marginBottom: 14 }}>The atelier</div>
          <h3 className="h2" style={{ marginBottom: 24 }}><span className="italic">Casablanca</span></h3>
          <div style={{ fontSize: 14, lineHeight: 1.8, color: 'var(--ink-2)' }}>
            <div>14, rue de Bordeaux</div>
            <div>Quartier Gauthier</div>
            <div>Casablanca 20060 · Maroc</div>
            <div style={{ marginTop: 20 }}>atelier@castelverdi.ma</div>
            <div>+212 522 00 00 00</div>
          </div>
          <div style={{ marginTop: 36, paddingTop: 28, borderTop: '1px solid var(--line)' }}>
            <div className="eyebrow" style={{ marginBottom: 10 }}>Visits</div>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.7 }}>
              By appointment, Tuesday through Saturday. Private viewings of the current rotation arranged on request.
            </p>
          </div>
        </aside>
      </div>
    </div>
  );
};

Object.assign(window, { Product, Lookbook, About, Craft, Contact });
