const PRODUCTS = [
  {
    id: 'folium',
    name: 'Folium',
    tag: 'In development',
    description: 'An OCR-powered textbook scanning and AI-assisted study platform built for serious students and focused academic workflows.',
    status: { kind: 'beta', label: 'Active build' },
    meta: ['iOS · Web', 'For students & researchers'],
    visual: 'folium',
  },
  {
    id: 'koinonia',
    name: 'Koinonia: Parish Life',
    tag: 'In development',
    description: 'A modern parish management and communication system designed for Orthodox communities — organization, events, and member coordination in one place.',
    status: { kind: 'concept', label: 'Concept designs in progress' },
    meta: ['Web · Mobile', 'Designed with parishes'],
    visual: 'koinonia',
  },
  {
    id: 'hustle',
    name: 'Hustle',
    tag: 'Planned',
    description: 'A productivity and income-planning application that helps users translate purchasing goals into the work required to reach them — designed to grow into a full productivity suite.',
    status: { kind: 'early', label: 'Early concept' },
    meta: ['iOS · Web', 'Personal & freelance use'],
    visual: 'hustle',
  },
];

const ProductVisual = ({ kind }) => {
  if (kind === 'folium') {
    return (
      <div className="k-pv k-pv--folium">
        <div className="k-pv__page">
          <div className="k-pv__line k-pv__line--full" />
          <div className="k-pv__line k-pv__line--full" />
          <div className="k-pv__line k-pv__line--hl"><span /></div>
          <div className="k-pv__line k-pv__line--full" />
          <div className="k-pv__line k-pv__line--mid" />
          <div className="k-pv__line k-pv__line--hl k-pv__line--hl-2"><span /></div>
          <div className="k-pv__line k-pv__line--full" />
          <div className="k-pv__line k-pv__line--short" />
        </div>
        <div className="k-pv__notes">
          <div className="k-pv__note"><span className="k-mono">§ 1.2</span><span>Key term extracted</span></div>
          <div className="k-pv__note"><span className="k-mono">§ 1.4</span><span>Concept summary</span></div>
        </div>
      </div>
    );
  }
  if (kind === 'koinonia') {
    return (
      <div className="k-pv k-pv--koinonia">
        {[
          { d: 'Sun', n: '12', t: 'Divine Liturgy', m: '210 attending' },
          { d: 'Wed', n: '15', t: 'Vespers', m: '48 attending' },
          { d: 'Sat', n: '18', t: 'Parish Council', m: '12 members' },
        ].map((r) => (
          <div key={r.n} className="k-pv__cal">
            <div className="k-pv__date">
              <span className="k-mono k-pv__date-d">{r.d}</span>
              <span className="k-pv__date-n">{r.n}</span>
            </div>
            <div className="k-pv__cal-body">
              <div className="k-pv__cal-t">{r.t}</div>
              <div className="k-mono k-pv__cal-m">{r.m}</div>
            </div>
          </div>
        ))}
      </div>
    );
  }
  // hustle
  return (
    <div className="k-pv k-pv--hustle">
      <div className="k-pv__hustle-head">
        <span className="k-mono">target</span>
        <span className="k-pv__hustle-amt">$1,899</span>
      </div>
      <div className="k-pv__bar-track">
        <div className="k-pv__bar-fill" style={{ width: '62%' }} />
      </div>
      <div className="k-pv__hustle-grid">
        <div>
          <div className="k-mono k-pv__hustle-l">hours required</div>
          <div className="k-pv__hustle-v">42.5h</div>
        </div>
        <div>
          <div className="k-mono k-pv__hustle-l">at $45/hr</div>
          <div className="k-pv__hustle-v">14 days</div>
        </div>
      </div>
    </div>
  );
};

const Products = () => {
  return (
    <section id="products" className="k-section" data-screen-label="Products">
      <div className="k-container">
        <div className="k-section__head">
          <span className="k-mono k-section__num">// 01 — products</span>
          <h2 className="k-section__title">Three applications in active development.</h2>
          <p className="k-section__sub">
            Each one solves a real problem we've encountered ourselves. Built carefully, shipped when ready.
          </p>
        </div>

        <div className="k-products">
          {PRODUCTS.map((p) => (
            <article key={p.id} className="k-card k-product">
              <header className="k-product__head">
                <div className="k-product__title">
                  <h3>{p.name}</h3>
                  <span className="k-mono k-product__tag">{p.tag}</span>
                </div>
                <span className={`k-badge k-badge--${p.status.kind}`}>
                  <span className="k-dot" /> {p.status.label}
                </span>
              </header>

              <ProductVisual kind={p.visual} />

              <p className="k-product__desc">{p.description}</p>

              <ul className="k-product__meta">
                {p.meta.map((m) => (
                  <li key={m} className="k-mono">{m}</li>
                ))}
              </ul>

              <footer className="k-product__foot">
                <a href="#cta" className="k-link">
                  Learn more
                  <svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 6h6M6 3l3 3-3 3" stroke="currentColor" strokeWidth="1.4" fill="none" strokeLinecap="square"/></svg>
                </a>
              </footer>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Products = Products;