const { useState } = React;

const CATS = ['All', 'Restaurant', 'Retail', 'Professional', 'Institution'];

const SLOTS = [
  {
    cat: 'Restaurant', url: 'your-restaurant.com',
    bg: 'linear-gradient(135deg,#1a1a2e 0%,#16213e 100%)',
    accentColor: 'var(--mint)', textColor: '#e8e6f0',
    title: 'Restaurant & Hospitality',
    desc: 'Menus, reservations, multilingual — designed to fill seats',
  },
  {
    cat: 'Retail', url: 'your-shop.com',
    bg: 'linear-gradient(135deg,#1c1528 0%,#261a38 100%)',
    accentColor: 'var(--accent)', textColor: '#eae7f5',
    title: 'Retail & E-Commerce',
    desc: 'Shopify, WooCommerce, or custom — built to convert',
  },
  {
    cat: 'Professional', url: 'your-firm.com',
    bg: 'linear-gradient(135deg,#0d1b2a 0%,#1b2838 100%)',
    accentColor: 'var(--gold)', textColor: '#c9a96e',
    title: 'Professional Services',
    desc: 'Law firms, clinics, consultancies — authority on screen',
  },
  {
    cat: 'Institution', url: 'your-institution.edu',
    bg: 'linear-gradient(135deg,#0a2647 0%,#144272 100%)',
    accentColor: 'var(--mint)', textColor: '#ffffff',
    title: 'Institutions & Education',
    desc: 'Portals, admissions, multilingual public sites',
  },
];

const WorkPage = ({ navigate }) => {
  const [active, setActive] = useState('All');

  const filtered = active === 'All' ? SLOTS : SLOTS.filter(s => s.cat === active);

  return (
    <>
      <section className="section" style={{ paddingBottom: 56 }}>
        <div className="container">
          <span className="label">Our Work</span>
          <h1 className="display-lg reveal" style={{ marginBottom: 20 }}>
            We're building our portfolio.<br />
            <em style={{ fontStyle: 'italic' }}>Your project could be first.</em>
          </h1>
          <p className="body-lg reveal d1" style={{ maxWidth: 520 }}>
            We're a new studio with senior talent. Our first clients get founder-level
            attention, priority timelines, and launch pricing.
          </p>
        </div>
      </section>

      <section style={{ paddingBottom: 120 }}>
        <div className="container">
          {/* Filters */}
          <div className="reveal" style={{ display: 'flex', gap: 8, marginBottom: 40, flexWrap: 'wrap' }}>
            {CATS.map(cat => (
              <button key={cat} onClick={() => setActive(cat)} style={{
                padding: '9px 22px', borderRadius: 100,
                fontSize: 13, fontFamily: 'var(--sans)', fontWeight: 500,
                border: '1px solid',
                borderColor: active === cat ? 'var(--accent)' : 'var(--border)',
                background: active === cat ? 'var(--accent)' : 'var(--card)',
                color: active === cat ? '#fff' : 'var(--muted)',
                cursor: 'pointer',
                transition: 'all 0.22s',
              }}>{cat}</button>
            ))}
          </div>

          {/* Grid */}
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))',
            gap: 20,
          }}>
            {filtered.map((slot, i) => (
              <div key={i} className="card reveal"
                style={{ overflow: 'hidden', cursor: 'pointer', transitionDelay: `${i * 0.07}s` }}
                onClick={() => navigate('contact')}>

                {/* Browser preview */}
                <div style={{ background: slot.bg, height: 230, position: 'relative', overflow: 'hidden' }}>
                  {/* Chrome bar */}
                  <div style={{
                    display: 'flex', alignItems: 'center', gap: 6,
                    padding: '10px 14px',
                    background: 'rgba(0,0,0,0.28)',
                    backdropFilter: 'blur(4px)',
                  }}>
                    {['#FF6B6B','#FFB347','#00CDA0'].map((c, j) => (
                      <span key={j} style={{
                        width: 8, height: 8, borderRadius: '50%',
                        background: c, display: 'block',
                      }} />
                    ))}
                    <span style={{
                      flex: 1, marginLeft: 10, padding: '4px 12px',
                      background: 'rgba(255,255,255,0.07)',
                      borderRadius: 4,
                      fontFamily: 'var(--mono)', fontSize: 10,
                      color: 'rgba(255,255,255,0.35)',
                    }}>{slot.url}</span>
                  </div>

                  {/* Content placeholder */}
                  <div style={{
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    height: 'calc(100% - 38px)', flexDirection: 'column', gap: 10,
                  }}>
                    <div style={{
                      fontFamily: 'var(--display)', fontSize: 22, fontWeight: 400,
                      letterSpacing: 5, color: slot.textColor, textTransform: 'uppercase',
                    }}>Your Brand</div>
                    <div style={{
                      fontFamily: 'var(--mono)', fontSize: 8, letterSpacing: 3,
                      color: slot.accentColor, textTransform: 'uppercase',
                    }}>Could Be Here</div>
                  </div>

                  {/* Badge */}
                  <div style={{
                    position: 'absolute', top: 48, right: 12,
                    padding: '4px 12px',
                    background: 'rgba(0,0,0,0.55)',
                    backdropFilter: 'blur(8px)',
                    borderRadius: 100,
                    fontFamily: 'var(--mono)', fontSize: 8,
                    letterSpacing: 2,
                    color: slot.accentColor,
                    border: `1px solid ${slot.accentColor}44`,
                  }}>OPEN SLOT</div>
                </div>

                <div style={{ padding: '22px 26px' }}>
                  <h4 style={{ fontFamily: 'var(--display)', fontSize: 21, fontWeight: 500, marginBottom: 6 }}>
                    {slot.title}
                  </h4>
                  <p style={{ fontSize: 13, color: 'var(--muted)' }}>{slot.desc}</p>
                  <span style={{
                    display: 'inline-block', marginTop: 14,
                    padding: '4px 14px',
                    background: 'var(--accent-dim)', borderRadius: 100,
                    fontFamily: 'var(--mono)', fontSize: 9,
                    color: 'var(--accent)', letterSpacing: 1,
                  }}>Be first →</span>
                </div>
              </div>
            ))}
          </div>

          {/* CTA */}
          <div className="reveal" style={{ textAlign: 'center', marginTop: 64 }}>
            <div style={{
              display: 'inline-block',
              padding: '48px 60px',
              background: 'var(--surface)',
              border: '1px solid var(--border)',
              borderRadius: 'var(--radius-lg)',
            }}>
              <p style={{ fontFamily: 'var(--display)', fontSize: 28, fontWeight: 400, marginBottom: 8 }}>
                Interested in being our first case study?
              </p>
              <p className="body-md" style={{ marginBottom: 24 }}>
                Founding clients get discounted rates and featured placement when we launch our portfolio.
              </p>
              <button className="btn btn-primary" onClick={() => navigate('contact')}>
                Start a Conversation →
              </button>
            </div>
          </div>
        </div>
      </section>
    </>
  );
};

window.WorkPage = WorkPage;