// Collect.jsx — how collecting works, inquiry form, FAQ
const Collect = ({ onNav, presetWork }) => {
  const { Reveal, InquiryForm, STUDIO } = window;
  const steps = [
    { n:'01', t:'Tell us what speaks to you', d:'Send a note about the piece — or the feeling you’re after. No account, no deposit, nothing to figure out first.' },
    { n:'02', t:'We talk it through', d:'Drury replies personally — availability, scale on your wall, framing, and a fair shipping quote for originals.' },
    { n:'03', t:'It arrives, carefully', d:'Originals are packed and tracked; larger works are crated. You only commit once everything is clear.' },
  ];
  const faqs = [
    { q:'How do I buy an original?', a:'Use the inquiry form below or email the studio directly. Originals are one-of-a-kind, so we confirm availability, then arrange framing and shipping before payment. Prints, where offered, check out securely on-site.' },
    { q:'What does shipping cost?', a:'Prints ship in 1–7 business days via the most cost-effective carrier, with tracking. Originals and limited editions ship in 3–9 business days, priced by weight. Pieces longer than 40 in. or over 30 in. on the short side may require crating or freight — we’ll quote those before you commit.' },
    { q:'Do you ship internationally?', a:'Yes. International and expedited shipping are charged at full cost, and we’ll provide a quote for large or overseas orders. Duties and taxes for international destinations are the buyer’s responsibility.' },
    { q:'What is your return policy?', a:'All sales are final. Every piece is packed with great care — but if a work arrives damaged, keep all packaging and email the studio with your order number and we’ll make it right.' },
    { q:'Can I commission something related?', a:'Often, yes. If a series has sold out or you have a wall in mind, write to the studio and we can talk about a related piece.' },
    { q:'How do I keep up with new work?', a:'Join the studio list at the bottom of any page for first access to new pieces and collector previews, or follow along on Instagram and Facebook.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <div>
      <section className="band-ink" style={{padding:'88px 0 72px'}}>
        <div className="wrap">
          <div className="kicker-row" style={{marginBottom:20}}>
            <span className="flare-dot"></span><span className="eyebrow on-dark">Collect</span>
          </div>
          <h1 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                      fontSize:'clamp(38px,6vw,84px)', letterSpacing:'-0.025em', lineHeight:0.96, maxWidth:880}}>
            Owning one of these is simpler than it looks.
          </h1>
          <p className="lead on-dark" style={{marginTop:24, maxWidth:560}}>
            You don’t need to know anything about the art world. Tell the studio what you’re drawn to —
            we’ll handle the rest, and nothing is decided until you’re sure.
          </p>
        </div>
      </section>

      {/* steps */}
      <section className="section band-veil" style={{'--sp':'80px'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:1,
                       background:'var(--ink-line)', border:'1px solid var(--ink-line)'}}>
            {steps.map(s => (
              <Reveal key={s.n} className="band-veil" style={{padding:'40px 36px'}}>
                <div className="meta" style={{color:'var(--flare)', marginBottom:18}}>{s.n}</div>
                <h3 style={{fontFamily:'var(--font-display)', fontWeight:700, fontSize:20,
                            letterSpacing:'-0.01em', marginBottom:12}}>{s.t}</h3>
                <p className="body dim" style={{fontSize:15}}>{s.d}</p>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* inquiry form */}
      <section className="section band-ink" style={{'--sp':'88px'}}>
        <div className="wrap" style={{display:'grid', gridTemplateColumns:'0.85fr 1.15fr', gap:72, alignItems:'start'}}>
          <div>
            <div className="kicker-row" style={{marginBottom:18}}>
              <span className="flare-dot"></span><span className="eyebrow on-dark">Inquiries &amp; press</span>
            </div>
            <h2 style={{fontFamily:'var(--font-display)', fontWeight:900, color:'var(--veil)',
                        fontSize:'clamp(24px,2.6vw,34px)', letterSpacing:'-0.015em', marginBottom:20}}>
              Write to the studio
            </h2>
            <p className="body on-dark" style={{marginBottom:24}}>
              Every message reaches Drury directly. Whether you’re ready to collect or just curious about
              a piece, this is the place to start.
            </p>
            <div className="meta on-dark" style={{lineHeight:2}}>
              <div>{STUDIO.email}</div>
              <div>{STUDIO.studio}</div>
              <div>Instagram {STUDIO.instagram}</div>
            </div>
          </div>
          <div>
            {presetWork && (
              <div style={{display:'flex', alignItems:'center', gap:14, marginBottom:22,
                           padding:'14px 16px', border:'1px solid var(--ink-line)'}}>
                {presetWork.img
                  ? <img src={presetWork.img} alt="" style={{width:54, height:54, objectFit:'cover'}}/>
                  : <div style={{width:54, height:54, background:'var(--flare)'}}/>}
                <div>
                  <div style={{fontFamily:'var(--font-display)', fontWeight:600, color:'var(--veil)', fontSize:13, letterSpacing:'0.04em', textTransform:'uppercase'}}>{presetWork.title}</div>
                  <div className="meta on-dark">{presetWork.size} · {window.fmtPrice(presetWork)}</div>
                </div>
              </div>
            )}
            <InquiryForm presetWork={presetWork} />
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section band-veil" style={{'--sp':'88px'}}>
        <div className="wrap">
          <div style={{display:'grid', gridTemplateColumns:'260px 1fr', gap:64, alignItems:'start'}}>
            <div>
              <div className="eyebrow" style={{marginBottom:14}}>Good to know</div>
              <h2 style={{fontFamily:'var(--font-display)', fontWeight:900, fontSize:'clamp(24px,2.6vw,34px)',
                          letterSpacing:'-0.015em'}}>Shipping &amp; FAQ</h2>
            </div>
            <div className="faq">
              {faqs.map((f, i) => (
                <div className="faq-item" key={i}>
                  <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span className="qt">{f.q}</span>
                    <span className="qi">{open === i ? '–' : '+'}</span>
                  </button>
                  <div className="faq-a" style={{maxHeight: open === i ? 320 : 0}}>
                    <div className="inner"><p className="body dim">{f.a}</p></div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};
Object.assign(window, { Collect });