// Products section — Auto Time-Keeper, Invoice Reconciler
const Products = ({ accent }) => {
  const t = window.ATTO_TOKENS;
  const c = accent === 'blue' ? t.blue : t.gold;

  return (
    <section id="products" className="atto-products" style={{
      padding: '160px 48px 140px',
      borderTop: `1px solid ${t.rule}`,
      fontFamily: 'var(--atto-sans)',
    }}>
      <div className="atto-section-meta" style={{ display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--atto-mono)', fontSize: 13, color: t.fadedText,
        letterSpacing: '0.08em', marginBottom: 48 }}>
        <span>/ 04 — VERTICAL PRODUCTS</span>
        <span>OWN THE DISTRIBUTION</span>
      </div>

      <h2 style={{
        fontSize: 'clamp(40px, 4.8vw, 68px)',
        lineHeight: 1.02, letterSpacing: '-0.03em', fontWeight: 600,
        color: t.ink, margin: '0 0 24px 0', maxWidth: 1080, textWrap: 'balance',
      }}>
        Research, demonstrated as{' '}
        <span style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontWeight: 400 }}>
          software that earns
        </span>.
      </h2>
      <p style={{ fontSize: 18, color: t.mutedText, maxWidth: 680, lineHeight: 1.55,
        margin: '0 0 80px 0' }}>
        General-purpose monoliths are a capital trap. We verticalize — shipping task-specific products
        that solve real Indian problems, fund frontier research, and build the ecosystem moat.
      </p>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {/* Product Card 1: Auto Time-Keeper */}
        <div className="atto-product-card-1" style={{
          background: t.ink, color: t.ivory, borderRadius: 24, padding: '48px 52px',
          position: 'relative', overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56, alignItems: 'center',
        }}>
          <div>
            <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13,
              color: 'rgba(244,239,230,0.45)', letterSpacing: '0.12em', marginBottom: 14 }}>
              PRODUCT · 01
            </div>
            <h3 style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em',
              margin: '0 0 10px', lineHeight: 1.05 }}>Automated Time-Keeping</h3>
            <div style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontSize: 18,
              color: 'rgba(244,239,230,0.65)', marginBottom: 28 }}>
              For lawyers, consultants & billing hours that matter.
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: 'rgba(244,239,230,0.8)',
              margin: '0 0 36px' }}>
              A local SLM watches your work, categorizes it into project-billable hours,
              and never leaks a single character off your laptop.
            </p>
            <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', fontSize: 13,
              fontFamily: 'var(--atto-mono)', color: 'rgba(244,239,230,0.5)', letterSpacing: '0.08em' }}>
              <span>◉ ON-DEVICE</span>
              <span>◉ ZERO TELEMETRY</span>
              <span>◉ 100 TOK/S</span>
            </div>
          </div>

          {/* Mock billing timeline */}
          <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)',
            borderRadius: 14, padding: 24, fontFamily: 'var(--atto-mono)', fontSize: 13 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', color: 'rgba(244,239,230,0.5)',
              fontSize: 11, letterSpacing: '0.1em', marginBottom: 14 }}>
              <span>TODAY · MARCH 14</span>
              <span><span style={{ display: 'inline-block', width: 6, height: 6, borderRadius: 999,
                background: c, marginRight: 6, verticalAlign: 'middle' }} />LOGGING LOCALLY</span>
            </div>
            {[
              { t: '09:12 — 10:48', task: 'Patel acquisition · contract review', h: '1h 36m', col: c },
              { t: '10:48 — 11:02', task: 'Email · internal', h: '0h 14m', col: 'rgba(244,239,230,0.65)' },
              { t: '11:02 — 12:30', task: 'Mehta LLP · brief drafting', h: '1h 28m', col: c },
              { t: '13:45 — 15:10', task: 'Tata dispute · deposition prep', h: '1h 25m', col: c },
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto',
                gap: 10, padding: '10px 0',
                borderTop: i === 0 ? 'none' : '1px solid rgba(255,255,255,0.05)',
                alignItems: 'center' }}>
                <span style={{ color: 'rgba(244,239,230,0.4)', fontSize: 11, whiteSpace: 'nowrap' }}>{r.t}</span>
                <span style={{ color: r.col, fontFamily: 'var(--atto-sans)', fontSize: 13,
                  overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.task}</span>
                <span style={{ color: t.ivory, whiteSpace: 'nowrap' }}>{r.h}</span>
              </div>
            ))}
          </div>
        </div>

        {/* Card 2: Lipi */}
        <div className="atto-product-card-2" style={{
          background: t.ivory, color: t.ink,
          border: `1px solid ${t.rule}`,
          borderRadius: 24, padding: '48px 52px', position: 'relative', overflow: 'hidden',
          display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 56, alignItems: 'center',
        }}>
          {/* Coming soon gold badge */}
          <div style={{ position: 'absolute', top: 28, right: 28,
            padding: '6px 14px', fontSize: 12, fontFamily: 'var(--atto-mono)',
            letterSpacing: '0.12em', fontWeight: 600,
            color: t.ink, background: c, borderRadius: 999 }}>
            COMING SOON
          </div>

          <div>
            <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13,
              color: t.fadedText, letterSpacing: '0.12em', marginBottom: 14 }}>
              PRODUCT · 02
            </div>
            <h3 style={{ fontSize: 36, fontWeight: 600, letterSpacing: '-0.025em',
              margin: '0 0 10px', lineHeight: 1.05 }}>
              Lipi<span style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic',
                fontWeight: 400, color: t.mutedText, fontSize: 28 }}> · लिपि</span>
            </h3>
            <div style={{ fontFamily: 'var(--atto-serif)', fontStyle: 'italic', fontSize: 18,
              color: t.mutedText, marginBottom: 24 }}>
              Privacy-first OCR and Translation across all vernacular languages.
            </div>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: t.mutedText,
              margin: '0 0 28px' }}>
              Scan contracts, judgments and filings. Translate across 22 Indian languages.
              Every character stays on-device — built for law firms, courts and government offices
              that cannot leak a single clause.
            </p>
            <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', fontSize: 13,
              fontFamily: 'var(--atto-mono)', color: t.fadedText, letterSpacing: '0.08em' }}>
              <span>◉ ON-DEVICE OCR</span>
              <span>◉ 22 INDIAN LANGUAGES</span>
              <span>◉ ZERO DATA EGRESS</span>
            </div>
          </div>

          {/* Animated OCR + translation SVG */}
          <svg viewBox="0 0 460 210" width="100%" style={{ display: 'block' }}>
            <rect x="24" y="18" width="170" height="180" rx="4"
              fill={t.ivory} stroke={t.ink} strokeWidth="1.2" opacity="0.9" />
            <path d="M 174 18 L 194 38 L 174 38 Z" fill={t.ink} opacity="0.08" />
            <line x1="174" y1="18" x2="174" y2="38" stroke={t.ink} strokeWidth="1" opacity="0.3" />
            <line x1="174" y1="38" x2="194" y2="38" stroke={t.ink} strokeWidth="1" opacity="0.3" />

            {[
              { y: 46, w: 130, d: 0 },
              { y: 58, w: 140, d: 0.4 },
              { y: 70, w: 100, d: 0.8 },
              { y: 88, w: 136, d: 1.4 },
              { y: 100, w: 120, d: 1.8 },
              { y: 112, w: 144, d: 2.2 },
              { y: 130, w: 110, d: 2.8 },
              { y: 142, w: 140, d: 3.2 },
              { y: 154, w: 128, d: 3.6 },
              { y: 172, w: 96, d: 4.2 },
            ].map((ln, i) => (
              <rect key={i} x="38" y={ln.y} width={ln.w} height="3" fill={t.ink} opacity="0.7">
                <animate attributeName="opacity" from="0" to="0.7"
                  dur="0.4s" begin={`${ln.d}s;scan.end+${ln.d}s`} fill="freeze" />
              </rect>
            ))}

            <g>
              <rect id="scan" x="24" y="18" width="170" height="3" fill={c} opacity="0.9">
                <animate id="scan" attributeName="y" from="18" to="192"
                  dur="5s" begin="0s;scan.end+0.8s" />
                <animate attributeName="opacity" values="0;1;1;0"
                  dur="5s" begin="0s;scan.end+0.8s" />
              </rect>
              <rect x="24" y="18" width="170" height="18" fill={c} opacity="0.2">
                <animate attributeName="y" from="6" to="180"
                  dur="5s" begin="0s;scan.end+0.8s" />
                <animate attributeName="opacity" values="0;0.25;0"
                  dur="5s" begin="0s;scan.end+0.8s" />
              </rect>
            </g>

            <line x1="210" y1="108" x2="250" y2="108" stroke={t.ink} strokeWidth="1" opacity="0.4" strokeDasharray="3 3" />
            <polygon points="250,103 258,108 250,113" fill={t.ink} opacity="0.5" />

            <rect x="266" y="28" width="170" height="160" rx="4"
              fill={t.ink} stroke={t.ink} strokeWidth="1.2" />
            <text x="278" y="48" fontFamily="var(--atto-mono)" fontSize="10"
              fill="rgba(244,239,230,0.55)" letterSpacing="0.1em">TRANSLATED · LIVE</text>

            {[
              { glyph: 'अ', label: 'हिन्दी', y: 82, delay: 0.5 },
              { glyph: 'অ', label: 'বাংলা', y: 108, delay: 1.2 },
              { glyph: 'க', label: 'தமிழ்', y: 134, delay: 1.9 },
              { glyph: 'ಅ', label: 'ಕನ್ನಡ', y: 160, delay: 2.6 },
            ].map((lg, i) => (
              <g key={i}>
                <text x="280" y={lg.y} fontSize="22" fill={c} fontWeight="600"
                  fontFamily="var(--atto-serif)">
                  {lg.glyph}
                  <animate attributeName="opacity" values="0;1;1;0.3"
                    dur="5s" begin={`${lg.delay}s;scan.end+${lg.delay}s`} fill="freeze" />
                </text>
                <text x="310" y={lg.y} fontSize="13" fill={t.ivory}
                  fontFamily="var(--atto-sans)" letterSpacing="-0.005em">
                  {lg.label}
                  <animate attributeName="opacity" values="0;1;1;0.5"
                    dur="5s" begin={`${lg.delay + 0.2}s;scan.end+${lg.delay + 0.2}s`} fill="freeze" />
                </text>
                <rect x="380" y={lg.y - 7} width="46" height="2" fill="rgba(244,239,230,0.6)">
                  <animate attributeName="opacity" values="0;1"
                    dur="0.4s" begin={`${lg.delay + 0.4}s;scan.end+${lg.delay + 0.4}s`} fill="freeze" />
                </rect>
                <rect x="380" y={lg.y - 2} width="38" height="2" fill="rgba(244,239,230,0.35)">
                  <animate attributeName="opacity" values="0;1"
                    dur="0.4s" begin={`${lg.delay + 0.5}s;scan.end+${lg.delay + 0.5}s`} fill="freeze" />
                </rect>
              </g>
            ))}
          </svg>
        </div>
      </div>

      {/* Coming soon grid */}
      <div className="atto-lab-row" style={{
        marginTop: 40, padding: 28,
        border: `1px dashed ${t.rule}`, borderRadius: 20,
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center',
      }}>
        <div style={{ fontFamily: 'var(--atto-mono)', fontSize: 13,
          color: t.fadedText, letterSpacing: '0.1em' }}>IN THE LAB →</div>
        <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', fontSize: 14, color: t.ink }}>
          {['Clinical Note Composer', 'GST Copilot', 'Voice-First Loan Origination',
            'Legal Discovery Scout', 'Warehouse Vision Agent'].map(p => (
            <span key={p} style={{ opacity: 0.7 }}>{p}</span>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Products = Products;