/* Features chapter + key features chapter + platform detail + about */

const { useEffect, useRef, useState } = React;

function KeyFeatures() {
  const cats = [
    {
      title: 'Ordering & Checkout',
      items: [
        'Easy Checkout', 'Quote Request System', 'Purchase Order (PO) Ordering', 'Quick Order / CSV Upload',
        'Repeat Orders & Templates', 'Scheduled / Forward Ordering', 'Split Shipment',
        'Minimum Order Quantity Rules', 'VAT Exemption Certificate Upload', 'Tax-Exempt Account Management',
      ],
    },
    {
      title: 'B2B Account Portal',
      items: [
        'Company Accounts', 'Multi-User Roles', 'Order Approval Workflows', 'Spending Limits per User',
        'Trade Account Application', 'University Dashboard', 'Saved Addresses', 'Favourite Product Lists',
      ],
    },
    {
      title: 'Invoicing, Credits & Finance',
      items: [
        'PDF Invoice Generation', 'Credit Notes', 'Credit Limit Management',
        'Account Statement & Balance', 'Consolidated Invoicing', 'Payment on Account',
      ],
    },
    {
      title: 'Notifications',
      items: [
        'Order Confirmation Emails', 'Despatch & Tracking', 'Quote Status Alerts',
        'Order Approval Notifications', 'Welcome Emails', 'Back-In-Stock Alerts', 'Admin Alerts',
      ],
    },
    {
      title: 'Pricing & Catalogue',
      items: [
        'Customer-Specific Contract Pricing', 'Volume-Based Tiered Pricing', 'Price on Request',
        'Multi-Currency (GBP/EUR/USD)', 'Custom Formulation Enquiry',
      ],
    },
    {
      title: 'Integrations (Phase 1)',
      items: [
        'Sage Accounting — bi-directional REST API', 'TBC: ERP, CRM, Punch-out, EDI, Distributor Portal',
      ],
    },
  ];
  const total = cats.reduce((s, c) => s + c.items.length, 0);
  return (
    <section id="features" data-chapter="Every feature" data-screen-label="05 Features">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 05 · Every feature delivered</span>
          </div>
          <div>
            <h2 className="reveal"><span style={{fontStyle: 'italic', color: 'var(--accent-2)'}}>{total}</span> features. Both options. Identical outcome.</h2>
            <p className="lede reveal d1">
              The difference is how. Magento delivers most through its native B2B suite; Next.js builds each to exact specification. The outcome for Formedium is the same.
            </p>
          </div>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2, background: 'color-mix(in oklab, var(--ink) 12%, transparent)', border: '1px solid color-mix(in oklab, var(--ink) 12%, transparent)'}} className="reveal d2">
          {cats.map((c, i) => (
            <div key={i} style={{background: 'var(--paper)', padding: '32px 28px'}}>
              <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16}}>
                <h4 style={{fontFamily: 'var(--serif)', fontSize: '1.4rem', letterSpacing: '-0.02em'}}>{c.title}</h4>
                <span className="mono" style={{color: 'var(--accent-2)'}}>{String(c.items.length).padStart(2, '0')}</span>
              </div>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6}}>
                {c.items.map((it, j) => (
                  <li key={j} style={{display: 'flex', gap: 10, fontSize: '0.9rem', color: 'var(--ink-2)', borderBottom: '1px solid color-mix(in oklab, var(--ink) 6%, transparent)', padding: '8px 0'}}>
                    <span className="mono" style={{color: 'var(--ink-mute)', fontSize: '0.68rem', minWidth: 24}}>{String(j + 1).padStart(2, '0')}</span>
                    <span>{it}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="bg-paper-2" data-chapter="About RVS Media" data-screen-label="11 About">
      <div className="container">
        <div className="chapter-head">
          <div className="meta">
            <span className="section-num">§ 11 · About RVS Media</span>
          </div>
          <div>
            <h2 className="reveal">Since 2016 · B2B commerce and custom development · Magento 2 Certified.</h2>
            <p className="lede reveal d1">
              Not a generalist agency that builds everything. A focused B2B commerce and AI development studio — complex builds are our core work, not a side capability.
            </p>
          </div>
        </div>

        <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'color-mix(in oklab, var(--ink) 14%, transparent)', border: '1px solid color-mix(in oklab, var(--ink) 14%, transparent)'}} className="reveal d2">
          {[
            ['Magento 2 Certified', 'Official Adobe Commerce / Magento 2 developer certification'],
            ['B2B Commerce', 'Deep experience delivering B2B platforms for UK manufacturers and distributors'],
            ['Velocity AI', 'Dedicated AI development division building custom AI products for UK businesses'],
            ['Sage Integration', 'Proven Sage API connector development for multiple UK B2B clients'],
            ['Operating Since 2016', 'Nearly a decade delivering ecommerce for UK businesses'],
            ['Long-Term Clients', 'Clients since 2016 — we build for the long term'],
          ].map((c, i) => (
            <div key={i} style={{background: 'var(--paper-2)', padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 10, minHeight: 160}}>
              <span className="mono" style={{color: 'var(--accent-2)'}}>{String(i + 1).padStart(2, '0')}</span>
              <div style={{fontFamily: 'var(--serif)', fontSize: '1.25rem', letterSpacing: '-0.02em'}}>{c[0]}</div>
              <div style={{fontSize: '0.88rem', color: 'var(--ink-3)', lineHeight: 1.5, marginTop: 'auto'}}>{c[1]}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.KeyFeatures = KeyFeatures;
window.About = About;