/* eslint-disable */
/* ─────────────────────────────────────────────
   PRODUCTS PAGE — Direction B "Geometric Atlas"
   ───────────────────────────────────────────── */

function ProductsHero() {
  return (
    <section className="page-hero">
      <div className="page-hero__pattern" aria-hidden="true"/>
      <div className="page-hero__grade" aria-hidden="true"/>
      <div className="page-hero__inner">
        <div className="page-hero__breadcrumb">
          <a href="index.html">Home</a>
          <span>/</span>
          <span style={{color:'rgba(255,255,255,0.55)'}}>Products</span>
        </div>
        <span className="eyebrow page-hero__eyebrow">Our Products</span>
        <h1 className="page-hero__title">
          Three AI products.<br/>
          Built in <em>Oman.</em>
        </h1>
        <p className="page-hero__sub">
          Not client work — these are products STM owns, operates, and iterates on every day.
        </p>
      </div>
    </section>
  );
}

/* ── Rihla Screen Carousel ── */
function RihlaCarousel() {
  const SCREENS = [
    {
      src: 'photos/rihla-screen-1.gif',
      num: '01',
      label: 'Trip overview',
      desc: 'Full itinerary with day-by-day planning, an interactive map, and the AI Studio to refine any part of your trip.',
    },
    {
      src: 'photos/rihla-screen-2.gif',
      num: '02',
      label: 'Discover',
      desc: 'Browse curated and community-submitted trips by category, destination, or vibe. Search with smart filters.',
    },
    {
      src: 'photos/rihla-screen-3.gif',
      num: '03',
      label: 'Trip detail',
      desc: 'Full trip story with highlights, tags, and a one-tap Remix button to build your own version of any trip.',
    },
  ];

  const [active, setActive] = React.useState(0);

  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: '260px 1fr',
      gap: 56,
      alignItems: 'center',
    }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          position: 'absolute', inset: '-24px',
          background: 'radial-gradient(ellipse at 50% 60%, rgba(61,217,182,0.14) 0%, transparent 70%)',
          pointerEvents: 'none',
        }}/>
        <div style={{
          borderRadius: 28,
          overflow: 'hidden',
          boxShadow: '0 40px 100px -24px rgba(0,0,0,0.75), 0 0 0 1px rgba(61,217,182,0.18)',
          background: '#07101e',
          position: 'relative',
        }}>
          {SCREENS.map((s, i) => (
            <div key={i} style={{ display: i === active ? 'block' : 'none' }}>
              <img src={s.src} alt={s.label} style={{ width: '100%', display: 'block' }} loading="lazy"/>
            </div>
          ))}
        </div>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
        <span className="eyebrow" style={{ color:'rgba(255,255,255,0.3)', display:'block', marginBottom:20 }}>
          App previews · 3 screens
        </span>
        {SCREENS.map((s, i) => {
          const isActive = i === active;
          return (
            <button key={i} onClick={() => setActive(i)} style={{
              all: 'unset', display: 'flex', alignItems: 'flex-start', gap: 20,
              padding: '22px 24px', borderRadius: 14, cursor: 'pointer',
              background: isActive ? 'rgba(61,217,182,0.06)' : 'transparent',
              borderLeft: isActive ? '2px solid var(--jade)' : '2px solid transparent',
              transition: 'background 0.2s, border-color 0.2s',
            }}>
              <span style={{
                fontFamily: 'var(--font-mono)', fontSize: 12,
                color: isActive ? 'var(--jade)' : 'rgba(255,255,255,0.2)',
                lineHeight: 1, paddingTop: 3, flexShrink: 0, transition: 'color 0.2s',
              }}>{s.num}</span>
              <div style={{ textAlign: 'left' }}>
                <p style={{
                  margin: '0 0 6px', fontSize: 17, fontWeight: 500, letterSpacing: '-0.01em',
                  color: isActive ? '#fff' : 'rgba(255,255,255,0.45)', transition: 'color 0.2s',
                }}>{s.label}</p>
                <p style={{
                  margin: 0, fontSize: 13.5, lineHeight: 1.55,
                  color: isActive ? 'rgba(255,255,255,0.55)' : 'rgba(255,255,255,0.25)', transition: 'color 0.2s',
                }}>{s.desc}</p>
              </div>
              {isActive && (
                <span style={{ marginLeft: 'auto', color: 'var(--jade)', fontSize: 14, flexShrink: 0, paddingTop: 2, opacity: 0.7 }}>→</span>
              )}
            </button>
          );
        })}
      </div>
    </div>
  );
}

/* ── Noor Section ── */
function NoorSection() {
  return (
    <section id="noor" style={{scrollMarginTop:80}} className="sec-dark">
      <div className="sec-inner">
        <div className="project-block">
          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--jade">Web PWA</span>
                <span className="project-badge project-badge--jade">Microsoft Marketplace</span>
                <span className="project-badge project-badge--jade">Active · Live</span>
              </div>
              <h2 className="project-title">
                Noor
                <small>Personal AI Assistant — نور</small>
              </h2>
              <p className="project-desc">
                Noor is a bilingual (EN/AR) personal AI assistant built for busy professionals in Oman and the Gulf. It connects to your email, calendar, WhatsApp, and more — and handles research, scheduling, and communication tasks through a conversational interface. Powered by Claude AI.
              </p>
              <div className="project-tags">
                {['EN / AR', 'Web PWA', 'Microsoft', 'Tap Payments', 'Claude AI', 'Gulf region'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Key capabilities</h4>
                <ul className="bullet-list">
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Email & calendar</strong> — reads, drafts, and manages your inbox and schedule</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Research & answers</strong> — deep web research and document analysis on demand</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>WhatsApp integration</strong> — connected to your messages, not just a chatbot</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Bilingual EN/AR</strong> — full Arabic support, not an afterthought</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Available on Microsoft Marketplace</strong> — deployed for teams and enterprises</li>
                </ul>
              </div>
              <div className="note-card">
                <p>
                  <strong>Try Noor.</strong>{' '}
                  Available at{' '}
                  <a href="https://noor.sawt.tech" target="_blank" rel="noopener noreferrer" style={{color:'var(--jade)'}}>noor.sawt.tech</a>.
                  Light plan $49/mo · Premium plan $69/mo. 10 free messages, no credit card required.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Wakeel Section ── */
function WakeelSection() {
  const MODULES = [
    { icon: '▦', name: 'Live Portfolio', desc: 'Net worth, CAGR, drawdown, ATH — streamed live from Kubera.' },
    { icon: '◉', name: 'AI Morning Briefing', desc: 'Claude reads your positions and writes a CFO note each morning at 06:00 GST.' },
    { icon: '⚡', name: '24H Attribution', desc: 'A waterfall of yesterday\'s net worth move, broken down by instrument.' },
    { icon: '▤', name: 'Stocks & Options', desc: 'Equity positions with concentration analysis and open option legs.' },
    { icon: '☪', name: 'Zakat & Sharia', desc: 'Annual Zakat calculated live. Sharia compliance enforced with audit trail.' },
    { icon: '¶', name: 'Ask CFO', desc: 'Private chat with Claude about your own portfolio. Replies cite positions.' },
  ];

  return (
    <section id="wakeel" style={{scrollMarginTop:80}} className="sec-ink">
      <div className="sec-inner">
        <div className="project-block" style={{borderTop:0, paddingTop:0}}>
          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--copper">Web App</span>
                <span className="project-badge project-badge--copper">Private Beta</span>
              </div>
              <h2 className="project-title">
                Wakeel
                <small>Family AI CFO — وكيل</small>
              </h2>
              <p className="project-desc">
                Wakeel is a private AI CFO for the family office. It connects to your Kubera portfolio via the Model Context Protocol, reads your positions every morning, and delivers a three-paragraph CFO briefing written by Claude. It covers twelve modules: from live portfolio intelligence to Zakat calculation to Sharia-compliant fixed income tracking.
              </p>
              <p style={{fontSize:16, color:'rgba(255,255,255,0.55)', lineHeight:1.65, marginTop:16}}>
                Wakeel is not a regulated financial product. It is a decision-support tool — private by design, family-only by policy. Your position data is processed in your own session. Never sold, never used for training.
              </p>
              <div className="project-tags">
                {['Family office', 'Kubera MCP', 'Claude AI', 'Sharia-aware', 'EN / AR', 'Private beta'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Twelve modules</h4>
                <ul className="bullet-list bullet-list--copper">
                  {MODULES.map((m, i) => (
                    <li key={i}>
                      <strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>{m.icon} {m.name}</strong> — {m.desc}
                    </li>
                  ))}
                </ul>
              </div>
              <div className="note-card">
                <p>
                  <strong>Access Wakeel.</strong>{' '}
                  Invitation only — by existing family member referral.
                  Request access at{' '}
                  <a href="https://cfo.sawt.tech" target="_blank" rel="noopener noreferrer" style={{color:'var(--jade)'}}>cfo.sawt.tech</a>.
                  Requires an active Kubera subscription.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── Rihla Section ── */
function RihlaSection() {
  return (
    <section id="rihla" style={{scrollMarginTop:80}} className="sec-dark">
      <div className="sec-inner">
        <div className="project-block">
          <div className="project-header">
            <div>
              <div style={{display:'flex', gap:8, marginBottom:20, flexWrap:'wrap'}}>
                <span className="project-badge project-badge--blue">iOS App</span>
                <span className="project-badge project-badge--blue">Android</span>
                <span className="project-badge project-badge--jade">Active · Live</span>
              </div>
              <h2 className="project-title">
                Rihla
                <small>AI Travel Planner — رحلة</small>
              </h2>
              <p className="project-desc">
                Rihla is an AI-powered travel planning application for iOS and Android. It helps users create, discover, and refine trips through an intelligent, conversational interface designed for modern travellers. The app is bilingual — supporting both English and Arabic — and is built and maintained by STM.
              </p>
              <div className="project-tags">
                {['iOS', 'Android', 'AI-powered', 'English & Arabic', 'Travel tech'].map(t => (
                  <span key={t} className="project-tag">{t}</span>
                ))}
              </div>
            </div>
            <div style={{display:'flex', flexDirection:'column', gap:12}}>
              <div className="includes-card">
                <h4>Key capabilities</h4>
                <ul className="bullet-list">
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>AI trip creation</strong> — describe what you want; the app builds a structured itinerary</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Trip discovery</strong> — curated and user-submitted trips browsable by category, destination, and vibe</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Collaborative planning</strong> — join and co-edit trips with other travellers</li>
                  <li><strong style={{color:'rgba(255,255,255,0.8)', fontWeight:500}}>Bilingual EN/AR</strong> — full Arabic interface, not a translation layer</li>
                </ul>
              </div>
              <div className="note-card">
                <p>
                  <strong>Product website.</strong>{' '}
                  More at{' '}
                  <a href="https://rihla-app.com" target="_blank" rel="noopener noreferrer" style={{color:'var(--jade)'}}>rihla-app.com</a>.
                  Development inquiries:{' '}
                  <a href="mailto:admin@rihla-app.com" style={{color:'var(--jade)'}}>admin@rihla-app.com</a>
                </p>
              </div>
            </div>
          </div>

          <div>
            <span className="eyebrow" style={{color:'rgba(255,255,255,0.3)', display:'block', marginBottom:32}}>App previews</span>
            <RihlaCarousel/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProductsPage() {
  return (
    <div className="page-b">
      <NavB active="products"/>
      <ProductsHero/>
      <NoorSection/>
      <WakeelSection/>
      <RihlaSection/>
      <CtaB/>
      <FooterB/>
    </div>
  );
}

window.ProductsPage = ProductsPage;