// Featured projects — one hero card + the full index of recent work.

const FeaturedProjects = () => {
  const feat = window.CWL_DATA.FEATURED;
  const projects = window.CWL_DATA.PROJECTS.slice(1); // skip the featured one in the row list

  return (
    <section id="projects" className="section">
      <div className="container">
        <div className="section__head">
          <Eyebrow>§ Projects · index</Eyebrow>
          <div>
            <h2>Things I've built, shipped, <em>or shelved.</em></h2>
          </div>
        </div>

        {/* Featured */}
        <a href="#" onClick={(e) => e.preventDefault()} className="feature plain" style={{ textDecoration: 'none', color: 'inherit', display: 'grid' }}>
          <div className="feature__media">
            <FeatureDiagram />
          </div>
          <div className="feature__body">
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap' }}>
              <CatalogToken n={feat.n} state={feat.state} />
              <span className="meta">{feat.date}</span>
              <Pill kind="live">Live</Pill>
            </div>
            <h3 className="feature__title">{feat.title}</h3>
            <p className="feature__lede">{feat.caption}</p>

            <dl style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 24, margin: '4px 0 0',
            }}>
              {feat.stats.map((s) => (
                <div key={s.k}>
                  <dt className="meta" style={{ textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-3)', marginBottom: 4 }}>{s.k}</dt>
                  <dd style={{
                    margin: 0,
                    fontFamily: 'var(--font-display)',
                    fontStyle: 'italic',
                    fontSize: 28,
                    color: 'var(--ink)',
                    lineHeight: 1,
                  }}>{s.v}</dd>
                </div>
              ))}
            </dl>

            <div className="feature__meta">
              {feat.tags.map((t) => <Pill key={t}>{t}</Pill>)}
              <span style={{ marginLeft: 'auto', fontSize: 14, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                Read the project <Icon name="arrow-right" size={12} />
              </span>
            </div>
          </div>
        </a>

        {/* Index rows */}
        <div style={{ borderTop: '1px solid var(--rule)', marginTop: 24 }}>
          {projects.map((p) => (
            <a key={p.id} href="#" className="row-link"
               onClick={(e) => e.preventDefault()}>
              <span className="meta" style={{ color: 'var(--ink-3)' }}>CWL · {p.n}</span>
              <span className="meta" style={{ color: 'var(--ink-3)' }}>{p.date}</span>
              <span className="row-link__title">
                <em>{p.title}</em>
                <span className="row-link__desc">— {p.caption}</span>
              </span>
              <span style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
                {p.state === 'live' && <Pill kind="live">Live</Pill>}
                {p.state === 'shipped' && <Pill kind="shipped">Shipped</Pill>}
                {p.state === 'parked' && <Pill kind="parked">Parked</Pill>}
                <Pill>{p.tags[0]}</Pill>
                <Icon name="arrow-right" size={14} className="row-link__arrow" />
              </span>
            </a>
          ))}
        </div>

        <div style={{ marginTop: 22, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
          <span className="meta" style={{ color: 'var(--ink-3)' }}>
            Showing 6 of 24 · indexed CWL-001 through CWL-024
          </span>
          <a href="#" onClick={(e) => e.preventDefault()}
             style={{ fontSize: 14, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
            See the full archive <Icon name="arrow-right" size={12} />
          </a>
        </div>
      </div>
    </section>
  );
};

// Decorative diagram for the feature card — hairline blueprint of Open Loops.
const FeatureDiagram = () => (
  <svg viewBox="0 0 560 420" xmlns="http://www.w3.org/2000/svg"
       style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
       aria-hidden="true">
    {/* faint grid */}
    <defs>
      <pattern id="ledger" width="24" height="24" patternUnits="userSpaceOnUse">
        <path d="M0 24 H24" stroke="var(--rule)" strokeWidth="0.5" opacity="0.6"/>
      </pattern>
    </defs>
    <rect width="560" height="420" fill="var(--paper-3)"/>
    <rect width="560" height="420" fill="url(#ledger)"/>

    {/* central column of loops */}
    {[80, 140, 200, 260, 320].map((y, i) => {
      const isLive = i === 1 || i === 3;
      const isClosed = i === 0 || i === 4;
      return (
        <g key={y}>
          <circle cx="120" cy={y} r="5"
                  fill={isLive ? 'var(--accent)' : isClosed ? 'var(--ink)' : 'none'}
                  stroke={isClosed ? 'var(--ink)' : 'var(--ink-3)'}
                  strokeWidth="1" />
          <line x1="135" y1={y} x2="440" y2={y}
                stroke={isClosed ? 'var(--rule)' : 'var(--ink-3)'}
                strokeWidth="1"
                strokeDasharray={isClosed ? '2 4' : '0'} />
          <text x="455" y={y + 4}
                style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', fill: 'var(--ink-3)', textTransform: 'uppercase' }}>
            {isClosed ? 'CLOSED' : isLive ? 'OPEN' : 'QUIET'}
          </text>
        </g>
      );
    })}

    {/* margin labels */}
    <text x="32" y="56" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', fill: 'var(--ink-3)' }}>
      OPEN LOOPS · v3 · SNAPSHOT
    </text>
    <text x="32" y="380" style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', fill: 'var(--ink-3)' }}>
      2026-04-22 · 47 open
    </text>

    {/* italic display label */}
    <text x="32" y="390"
          style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, fill: 'var(--ink)', display: 'none' }}>
    </text>
  </svg>
);

window.FeaturedProjects = FeaturedProjects;