// Showcase.jsx — Maison Gifts
// Process (How It Works) · Featured Collections (filterable) · CTA band.

// ── Process ──────────────────────────────────────────────────
const Process = () => {
  const c = useContent();
  return (
    <section id="process" style={{ background: 'var(--cream-deep)', padding: 'var(--space-32) var(--space-8)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <Reveal style={{ maxWidth: 720, marginBottom: 'var(--space-16)' }}>
          <Overline>{c.process.overline}</Overline>
          <h2 style={{
            fontFamily: 'var(--font-display)', fontWeight: 500, color: 'var(--navy-ink)',
            fontSize: 'clamp(34px,4vw,54px)', lineHeight: 1.08, letterSpacing: '-0.01em', margin: '20px 0 0'
          }}>{c.process.title}</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 18, lineHeight: 1.7, color: 'var(--text-2)', margin: '16px 0 0' }}>{c.process.sub}</p>
        </Reveal>

        <div className="mg-proc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }}>
          {c.process.steps.map((s, i) =>
          <Reveal key={i} delay={i * 80} style={{ position: 'relative' }}>
              <div style={{ paddingRight: 18, position: 'relative' }}>
                {/* connector line */}
                {i < c.process.steps.length - 1 &&
              <div className="mg-proc-line" aria-hidden="true" style={{
                position: 'absolute', top: 23, left: 48, right: -10, height: 1,
                background: 'repeating-linear-gradient(90deg, var(--grey) 0 4px, transparent 4px 9px)', opacity: 0.5
              }}></div>
              }
                <span style={{
                width: 48, height: 48, borderRadius: 'var(--radius-full)', flexShrink: 0,
                background: 'var(--navy)', color: '#F6F1E6',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, position: 'relative', zIndex: 1
              }}>{i + 1}</span>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 20, color: 'var(--navy-ink)', margin: '20px 0 0', lineHeight: 1.25 }}>{s.name}</h3>
                <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-2)', margin: '10px 0 0', paddingRight: 8 }}>{s.desc}</p>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

};

// ── Featured Collections (filterable) ────────────────────────
const Collections = () => {
  const c = useContent();
  const [filter, setFilter] = React.useState('all');
  const items = c.collections.items.filter((it) => filter === 'all' || it.cat === filter);

  return (
    <section id="gallery" style={{ background: 'var(--cream)', padding: 'var(--space-32) var(--space-8)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div className="mg-coll-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 'var(--space-12)', flexWrap: 'wrap' }}>
          <Reveal style={{ maxWidth: 620 }}>
            <Overline>{c.collections.overline}</Overline>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 500, color: 'var(--navy-ink)',
              fontSize: 'clamp(34px,4vw,54px)', lineHeight: 1.08, letterSpacing: '-0.01em', margin: '20px 0 0'
            }}>{c.collections.title}</h2>
            <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 18, lineHeight: 1.7, color: 'var(--text-2)', margin: '16px 0 0' }}>{c.collections.sub}</p>
          </Reveal>

          <Reveal delay={120}>
            <div role="tablist" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              {c.collections.filters.map((f) => {
                const active = filter === f.id;
                return (
                  <button key={f.id} role="tab" aria-selected={active} onClick={() => setFilter(f.id)} style={{
                    fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 500, cursor: 'pointer',
                    padding: '9px 17px', borderRadius: 'var(--radius-full)',
                    background: active ? 'var(--navy)' : 'transparent',
                    color: active ? '#F6F1E6' : 'var(--text-2)',
                    border: active ? '1px solid var(--navy)' : '1px solid var(--grey-line)',
                    transition: 'all 160ms ease'
                  }}
                  onMouseEnter={(e) => {if (!active) {e.currentTarget.style.borderColor = 'var(--burgundy)';e.currentTarget.style.color = 'var(--burgundy)';}}}
                  onMouseLeave={(e) => {if (!active) {e.currentTarget.style.borderColor = 'var(--grey-line)';e.currentTarget.style.color = 'var(--text-2)';}}}>
                    {f.label}
                  </button>);

              })}
            </div>
          </Reveal>
        </div>

        <div className="mg-coll-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-5)' }}>
          {items.map((it) =>
          <article key={it.name} className="mg-coll-card" style={{
            background: 'var(--ivory)', border: '1px solid var(--grey-line)', borderRadius: 'var(--radius-lg)',
            overflow: 'hidden', cursor: 'pointer',
            transition: 'transform 240ms cubic-bezier(0.16,1,0.3,1), box-shadow 240ms ease'
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = 'translateY(-6px)';e.currentTarget.style.boxShadow = 'var(--shadow-lift)';const ov = e.currentTarget.querySelector('.mg-coll-ov');if (ov) ov.style.opacity = '1';}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = 'none';e.currentTarget.style.boxShadow = 'none';const ov = e.currentTarget.querySelector('.mg-coll-ov');if (ov) ov.style.opacity = '0';}}>
              <div style={{ position: 'relative' }}>
                <Img src={it.img} label={it.name} ratio="4 / 3" radius="0" objectPosition="center" />
                <span style={{
                position: 'absolute', top: 14, left: 14,
                fontFamily: 'var(--font-sans)', fontSize: 10.5, fontWeight: 600, letterSpacing: '0.12em', textTransform: 'uppercase',
                background: 'var(--cream)', color: 'var(--burgundy)', padding: '5px 11px', borderRadius: 'var(--radius-full)'
              }}>{it.tag}</span>
                <div className="mg-coll-ov" style={{
                position: 'absolute', inset: 0, background: 'rgba(23,34,59,0.55)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                opacity: 0, transition: 'opacity 220ms ease'
              }}>
                  <span style={{
                  fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500, color: '#F6F1E6',
                  border: '1px solid rgba(246,241,230,0.6)', borderRadius: 'var(--radius-full)',
                  padding: '9px 18px', display: 'inline-flex', alignItems: 'center', gap: 8
                }}>
                    {c.nav.quote}
                    <i data-lucide="arrow-up-right" style={{ width: 15, height: 15, strokeWidth: 2 }}></i>
                  </span>
                </div>
              </div>
              <div style={{ padding: 'var(--space-5) var(--space-6) var(--space-6)' }}>
                <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 21, color: 'var(--navy-ink)', margin: 0, lineHeight: 1.25 }}>{it.name}</h3>
                <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 14.5, lineHeight: 1.6, color: 'var(--text-2)', margin: '10px 0 0' }}>{it.desc}</p>
              </div>
            </article>
          )}
        </div>
      </div>
    </section>);

};

// ── CTA band ─────────────────────────────────────────────────
const CtaBand = () => {
  const c = useContent();
  return (
    <section style={{ background: 'var(--burgundy)', padding: 'var(--space-24) var(--space-8)', position: 'relative', overflow: 'hidden', backgroundColor: "rgb(13, 21, 38)" }}>
      <span aria-hidden="true" style={{
        position: 'absolute', right: -40, top: '50%', transform: 'translateY(-50%)',
        fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 'clamp(200px,30vw,360px)',
        color: 'rgba(246,241,230,0.06)', lineHeight: 1, pointerEvents: 'none', userSelect: 'none'
      }}>M</span>
      <Reveal style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 1 }}>
        <h2 style={{
          fontFamily: 'var(--font-display)', fontWeight: 500, color: '#F6F1E6',
          fontSize: 'clamp(32px,4vw,52px)', lineHeight: 1.12, letterSpacing: '-0.01em', margin: 0
        }}>{c.ctaBand.title}</h2>
        <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 18.5, lineHeight: 1.7, color: 'rgba(246,241,230,0.82)', margin: '20px auto 0', maxWidth: 600 }}>{c.ctaBand.body}</p>
        <button onClick={() => scrollToId('contact')} style={{
          fontFamily: 'var(--font-sans)', fontSize: 16, fontWeight: 500, marginTop: 36,
          background: 'var(--cream)', color: 'var(--burgundy)', border: 'none', cursor: 'pointer',
          padding: '16px 34px', borderRadius: 'var(--radius-full)',
          display: 'inline-flex', alignItems: 'center', gap: 10, transition: 'transform 160ms ease, background 160ms ease'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.background = '#FFFFFF';e.currentTarget.style.transform = 'translateY(-2px)';}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'var(--cream)';e.currentTarget.style.transform = 'none';}}>
          {c.ctaBand.button}
          <i data-lucide="arrow-right" style={{ width: 17, height: 17, strokeWidth: 2 }}></i>
        </button>
      </Reveal>
    </section>);

};

Object.assign(window, { Process, Collections, CtaBand });