/* global React */
const { useState: useStateP } = React;

function ProjectsPage({ lang }) {
  const t = window.FL_CONTENT[lang].projects;
  const [filter, setFilter] = useStateP('All');
  const [open, setOpen] = useStateP(null);

  const cats = [t.filterAll, ...t.categories];
  const filterAllLabel = t.filterAll;
  const items = t.items.filter(i => filter === filterAllLabel || i.category === filter);

  return (
    <div className="page active" data-screen-label="06 Projects">
      <section className="page-hero">
        <div className="container">
          <div className="breadcrumb mono">HOME &nbsp;/&nbsp; <span>{t.eyebrow.toUpperCase()}</span></div>
          <h1>{t.title_a} <span className="serif">{t.title_b}</span></h1>
          <p className="lede">{t.lede}</p>
        </div>
      </section>

      <section className="section section-light projects-section">
        <div className="container">
          {t.items.length >= 4 && (
            <div className="projects-filter reveal">
              <div className="filter-label mono">{t.filterLabel}</div>
              <div className="filter-pills">
                {cats.map((c, i) => (
                  <button key={i} className={`filter-pill ${filter === c ? 'on' : ''}`} onClick={() => setFilter(c)}>{c}</button>
                ))}
              </div>
            </div>
          )}

          <div className="projects-grid reveal">
            {items.map((p, i) => (
              <article key={p.id} className={`project-card ${p.template ? 'is-template' : ''}`} onClick={() => setOpen(p.id)}>
                <div className="project-thumb">
                  <svg viewBox="0 0 200 100" preserveAspectRatio="none">
                    <rect width="200" height="100" fill="#eef1f5"/>
                    <g stroke="rgba(31,58,90,0.18)" strokeWidth="0.5" fill="none">
                      {Array.from({length: 6}).map((_, k) => <line key={k} x1="0" y1={k*20} x2="200" y2={k*20}/>)}
                    </g>
                    <path d="M10 70 Q 60 40 100 60 T 190 50" stroke="rgba(31,58,90,0.55)" strokeWidth="1.2" fill="none" strokeDasharray="3 3"/>
                    <circle cx="10" cy="70" r="3" fill="#1F3A5A"/>
                    <circle cx="190" cy="50" r="3" fill="#1F3A5A"/>
                  </svg>
                  <div className="project-thumb-label mono">{p.template ? 'TEMPLATE' : 'CASE'}</div>
                </div>
                <div className="project-body">
                  <div className="project-meta mono">
                    <span>{p.date}</span>
                    <span>·</span>
                    <span>{p.category}</span>
                  </div>
                  <h3>{p.title}</h3>
                  <dl className="project-spec">
                    <div><dt className="mono">{t.labels.cargo}</dt><dd>{p.cargo}</dd></div>
                    <div><dt className="mono">{t.labels.route}</dt><dd>{p.route}</dd></div>
                    <div><dt className="mono">{t.labels.timeline}</dt><dd>{p.timeline}</dd></div>
                  </dl>
                  <div className="project-expand mono">{open === p.id ? '↑' : '↓'}&nbsp; {open === p.id ? 'Collapse' : 'Read report'}</div>
                </div>
                {open === p.id && (
                  <div className="project-detail" onClick={(e) => e.stopPropagation()}>
                    <div className="pd-row"><div className="lab mono">{t.labels.challenge}</div><p>{p.challenge}</p></div>
                    <div className="pd-row"><div className="lab mono">{t.labels.solution}</div><p>{p.solution}</p></div>
                    <div className="pd-row"><div className="lab mono">{t.labels.outcome}</div><p>{p.outcome}</p></div>
                  </div>
                )}
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.ProjectsPage = ProjectsPage;