// ===== Portfolio — Plasma v3 =====

const PROJECTS = [
  {
    id: 'brewline',
    client: 'Brewline Coffee',
    industry: 'Specialty coffee · Cape Town',
    title: 'A clean, modern site for a Cape Town specialty coffee roaster.',
    blurb: 'Multi-page with menu, story, and wholesale enquiry form. Built around the brand, fast on mobile, and easy for the team to update.',
    stack: ['Multi-page', 'Wholesale form', 'Editorial layout'],
    cat: 'Websites',
    Mock: MarketingMock,
  },
  {
    id: 'cape-plumbing',
    client: 'Cape Plumbing Co.',
    industry: 'Trades · Local services',
    title: 'A trust-first site for a local plumbing business.',
    blurb: 'Service pages, area coverage, and a quick-quote contact form. Built to convert visitors into call-outs without making them dig.',
    stack: ['Service pages', 'Lead capture', 'WhatsApp'],
    cat: 'Websites',
    Mock: WebAppMock,
  },
  {
    id: 'mara',
    client: 'Mara Photography',
    industry: 'Photography · Wedding & lifestyle',
    title: 'A minimalist photo portfolio for a wedding and lifestyle photographer.',
    blurb: "Lightning-fast galleries and a booking enquiry page. A layout that gets out of the photographs' way.",
    stack: ['Galleries', 'Booking enquiry', 'Editorial'],
    cat: 'Websites',
    Mock: AnalyticsMock,
  },
  {
    id: 'lift-lean',
    client: 'Lift & Lean Coaching',
    industry: 'Personal training & nutrition',
    title: 'A personal training and nutrition site with package pages and bookings.',
    blurb: 'Package pages, client testimonials, and a calendar booking form. Built to convert browsers into discovery calls.',
    stack: ['Packages', 'Testimonials', 'Calendar booking'],
    cat: 'Web apps',
    Mock: WorkflowMock,
  },
  {
    id: 'northcliff',
    client: 'Northcliff Consulting',
    industry: 'Consultancy · Small business',
    title: 'A professional landing site for a small business consultancy.',
    blurb: 'Service pages, case study previews, and lead capture. A site that finally reflects what the team actually does.',
    stack: ['Service pages', 'Case studies', 'Lead capture'],
    cat: 'Websites',
    Mock: CodeMock,
  },
  {
    id: 'veld-vine',
    client: 'Veld & Vine',
    industry: 'Winery · Boutique',
    title: 'A showcase site for a boutique South African winery.',
    blurb: 'Story, range, and a stockist locator — no checkout. A site that does the brand justice without overreaching.',
    stack: ['Showcase', 'Stockist locator', 'Editorial'],
    cat: 'Websites',
    Mock: DashboardMock,
  },
];

function ProjectCard({ p, index }) {
  const flip = index % 2 === 1;
  const content = (
    <div className="col" style={{ gap: 22 }}>
      <span className="eyebrow">Project · 0{index + 1} · {p.industry}</span>
      <h3 className="grad-text-soft">{p.title}</h3>
      <p style={{ fontSize: 14.5 }}>{p.blurb}</p>
      <div className="row" style={{ gap: 6 }}>{p.stack.map(s => <span key={s} className="tag">{s}</span>)}</div>
      <div style={{ paddingTop: 22, borderTop: '1px solid var(--line)' }}>
        <div className="label" style={{ marginBottom: 8 }}>Client</div>
        <div style={{ fontSize: 18, fontWeight: 500 }}>{p.client}</div>
        <a href="#" className="u-link" style={{ color: 'var(--violet)', fontSize: 14, marginTop: 14 }}>View live <Icon.ArrUR /></a>
      </div>
    </div>
  );
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: flip ? '1.4fr 1fr' : '1fr 1.4fr',
      gap: 60,
      alignItems: 'center',
      padding: '40px 0',
    }}>
      {!flip && content}
      <p.Mock />
      {flip && content}
    </div>
  );
}

function PortfolioPage() {
  const [filter, setFilter] = useState('All');
  const filters = ['All', 'Websites', 'Web apps'];
  const shown = filter === 'All' ? PROJECTS : PROJECTS.filter(p => p.cat === filter);
  return (
    <Page>
      <PageIntro
        eyebrow="Portfolio"
        title={<>A selection of the work <span className="grad-text">we've shipped.</span></>}
        sub="Every site below was custom-built from scratch. Placeholders shown for now — replaced with real screenshots as projects go live."
      />
      <section className="section-sm">
        <div className="wrap">
          <div className="row" style={{ gap: 6, padding: 4, border: '1px solid var(--line)', borderRadius: 999, background: 'rgba(255,255,255,0.02)', width: 'fit-content' }}>
            {filters.map(f => (
              <button key={f} onClick={() => setFilter(f)} style={{
                padding: '8px 16px', borderRadius: 999, fontSize: 13,
                color: filter === f ? 'var(--violet-deep)' : 'var(--text-muted)',
                background: filter === f ? 'color-mix(in srgb, var(--violet) 10%, transparent)' : 'transparent',
                border: filter === f ? '1px solid color-mix(in srgb, var(--violet) 28%, transparent)' : '1px solid transparent',
                transition: 'all 0.15s ease', cursor: 'pointer',
              }}>{f}</button>
            ))}
          </div>
          <div style={{ marginTop: 40, display: 'flex', flexDirection: 'column', gap: 32 }}>
            {shown.length === 0 ? (
              <div style={{ padding: 60, textAlign: 'center', color: 'var(--text-muted)' }}>No projects in this category yet.</div>
            ) : (
              shown.map((p, i) => <ProjectCard key={p.id} p={p} index={i} />)
            )}
          </div>
        </div>
      </section>

      <section className="section-sm">
        <div className="wrap-tight" style={{ textAlign: 'center' }}>
          <SectionHead
            eyebrow="Your project, next"
            title="Like what you see? Let's build yours next."
            center
          />
          <div className="row" style={{ gap: 12, justifyContent: 'center', marginTop: 16 }}>
            <Link to="/contact" className="btn btn-grad btn-lg">Get a quote <Icon.Arr /></Link>
            <Link to="/contact" className="btn btn-ghost btn-lg">Book a call</Link>
          </div>
        </div>
      </section>

      <CtaTail />
    </Page>
  );
}

Object.assign(window, { PortfolioPage });