/* ============================================================
   Products — what the lab is building next. Coming soon.
   Product shots use labelled placeholders (drop real ones later).
   ============================================================ */
const PRODUCTS = [
  {
    icon: 'DoorOpen', name: 'Visitor Management System',
    kicker: 'For businesses & offices',
    body: 'A calm, modern front desk. Check visitors in, manage appointments and keep an accurate, searchable record of who came and when — without the paper logbook.',
    tags: ['Digital check-in', 'Appointments', 'Visitor records'],
    placeholder: 'visitor check-in screen',
  },
  {
    icon: 'Wallet', name: 'Personal Finance App',
    kicker: 'For everyday money',
    body: 'A clear, friendly way to see your money. Track spending, set budgets and work toward goals — the financial clarity busy people rarely have time to build for themselves.',
    tags: ['Spend tracking', 'Budgets', 'Goals'],
    placeholder: 'finance dashboard',
  },
];

function ProductCard({ p, i }) {
  return (
    <Reveal delay={i * 130} className="product-card"
      style={{ display: 'flex', flexDirection: 'column', borderRadius: '26px', overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.035)', transition: 'transform 0.35s ease, border-color 0.35s ease' }}>
      {/* Placeholder visual */}
      <div style={{
        position: 'relative', aspectRatio: '16 / 10', display: 'flex', alignItems: 'center', justifyContent: 'center',
        background: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0px, rgba(255,255,255,0.04) 11px, rgba(255,255,255,0.015) 11px, rgba(255,255,255,0.015) 22px), radial-gradient(700px 300px at 30% -20%, rgba(139,92,246,0.18), transparent 60%), radial-gradient(500px 260px at 100% 120%, rgba(74,200,200,0.14), transparent 60%)',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '14px' }}>
          <div style={{ width: '60px', height: '60px', borderRadius: '16px', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'rgba(10,12,24,0.6)', border: '1px solid rgba(255,255,255,0.14)', backdropFilter: 'blur(4px)' }}>
            <Icon name={p.icon} size={28} style={{ color: '#9BE8DD' }} />
          </div>
          <span style={{ fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace', fontSize: '0.78rem', letterSpacing: '0.04em', color: 'rgba(236,234,242,0.5)', textTransform: 'lowercase' }}>
            [ {p.placeholder} ]
          </span>
        </div>
        <span style={{ position: 'absolute', top: '16px', left: '16px', display: 'inline-flex', alignItems: 'center', gap: '7px', padding: '6px 13px', borderRadius: '9999px', background: 'rgba(10,12,24,0.66)', border: '1px solid rgba(155,232,221,0.3)', fontSize: '0.74rem', fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: '#9BE8DD', backdropFilter: 'blur(6px)' }}>
          <Icon name="Clock" size={13} /> Coming soon
        </span>
      </div>

      {/* Text */}
      <div style={{ padding: '28px 28px 30px', display: 'flex', flexDirection: 'column', flex: 1 }}>
        <span style={{ fontSize: '0.78rem', fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'rgba(236,234,242,0.5)' }}>{p.kicker}</span>
        <h3 style={{ fontFamily: 'var(--font-heading)', fontWeight: 700, fontSize: '1.55rem', color: '#fff', margin: '8px 0 12px', letterSpacing: '-0.015em' }}>{p.name}</h3>
        <p style={{ fontSize: '0.99rem', lineHeight: 1.62, color: 'rgba(236,234,242,0.72)', margin: '0 0 20px', flex: 1 }}>{p.body}</p>
        <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
          {p.tags.map((t) => (
            <span key={t} style={{ padding: '6px 13px', borderRadius: '9999px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)', fontSize: '0.84rem', color: 'rgba(236,234,242,0.78)' }}>{t}</span>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function Products() {
  return (
    <Section id="products" data-screen-label="Products">
      <SectionHead
        eyebrow="From the lab" eyebrowIcon="Cpu" align="center" maxW="640px"
        title="The products we're"
        titleAccent="building next"
        sub="Born from real problems we see every day, designed with the same care we give client work. Want early access? Tell us — we'll keep you posted."
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0,1fr))', gap: '24px', marginTop: 'clamp(40px,5vw,60px)' }} className="products-grid">
        {PRODUCTS.map((p, i) => <ProductCard key={p.name} p={p} i={i} />)}
      </div>
      <Reveal delay={160}>
        <div style={{ textAlign: 'center', marginTop: '36px' }}>
          <a href="#contact" onClick={(e) => heroScrollTo(e, '#contact')} className="ghost-btn"
            style={{ display: 'inline-flex', alignItems: 'center', gap: '10px', background: 'rgba(255,255,255,0.05)', color: '#ECEAF2', borderRadius: '50px', padding: '14px 26px', fontWeight: 600, fontSize: '1rem', border: '1px solid rgba(255,255,255,0.18)', textDecoration: 'none' }}>
            Join the early access list <Icon name="ArrowRight" size={18} style={{ color: '#9BE8DD' }} />
          </a>
        </div>
      </Reveal>
    </Section>
  );
}

Object.assign(window, { Products });