// projects.jsx — bento grid (homepage = 10 projects)
// Reálné case studies z Figma webdesignu: tylex, žabiny, adrick, domoplan, huust
// Doplněno dalšími reálnými klienty z portfolia Justmighty
const PROJECTS = [
{ id: 'tylex', title: 'tylex', sub: 'rebranding · webdesign', tags: ['rebranding', 'webdesign'], industry: 'strojírenství & výroba', img: './assets/project-tylex-1.png', cls: 'b-1', num: '01' },
{ id: 'zabiny', title: 'žabiny brno', sub: 'identita · kampaň · social', tags: ['identita', 'kampaň'], industry: 'sport', img: './assets/case-zabiny.jpg', cls: 'b-2', num: '02' },
{ id: 'adrick', title: 'adrick', sub: 'workshop · brand strategy', tags: ['strategie', 'brand'], industry: 'B2B služby', img: './assets/case-adrick.jpg', cls: 'b-3', num: '03' },
{ id: 'domoplan', title: 'domoplan', sub: 'rebranding · webdesign', tags: ['rebranding', 'webdesign'], industry: 'architektura & bydlení', cls: 'b-4 card--coral', num: '04' },
{ id: 'huust', title: 'huust', sub: 'brand · web · propagace', tags: ['brand', 'web', 'propagace'], industry: 'IT & technologie', cls: 'b-5 card--paper', num: '05' }];


function ProjectCard({ p, onNav }) {
  return (
    <article
      className={"card " + (p.cls || '')}
      data-reveal
      onClick={() => onNav && onNav('case')}
      style={{ cursor: 'pointer' }}>

      {p.img && <div className="card__media" style={{ backgroundImage: `url(${p.img})` }} />}
      {p.img && <div className="card__shade" />}
      <span className="card__num">{p.num} / případovka</span>
      <div className="card__tags">
        {p.tags.map((t, i) => <span key={i} className="card__tag">{t}</span>)}
      </div>
      <h3 className="card__title">{p.title}</h3>
      <p className="card__sub">{p.sub}</p>
      {p.industry && <span className="card__industry">{p.industry}</span>}
    </article>);

}

function Projects({ onNav }) {
  return (
    <section className="projects" id="projekty" data-screen-label="03 Projects" style={{ position: 'relative' }}>
      <div className="shell" style={{ padding: 0, position: 'relative' }}>
        <div className="projects__head">
          <div>
            <span className="eyebrow" data-reveal>02 / PŘÍPADOVÉ STUDIE</span>
            <h2 className="h-1" data-reveal style={{ marginTop: 16 }}>naše projekty</h2>
          </div>
          <p className="lede" data-reveal style={{ "--reveal-delay": "160ms", color: '#bdbdbd', maxWidth: '40ch' }}>Vybraná práce z posledních let. Od rebrandů po kompletní kampaně — 500+ projektů za námi, tady je pár z nich.

          </p>
        </div>

        <div className="bento">
          {PROJECTS.map((p) => <ProjectCard p={p} key={p.id} onNav={onNav} />)}
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 48, gap: 12, flexWrap: 'wrap' }} data-reveal>
          <button className="btn btn--ghost" onClick={() => onNav && onNav('projekty')}>
            Zobrazit všech 500+ projektů
            <span className="arrow">↗</span>
          </button>
          <a href="https://ask.justmighty.cz" target="_blank" rel="noopener" className="btn btn--coral">
            Chcete podobný projekt? Justask zdarma
            <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </section>);

}
window.Projects = Projects;