/* ============================================================
   Inner Pages — Services / About / Contact (fintech style)
   These override the editorial versions in pages.jsx
   ============================================================ */

const { useState: useIP, useEffect: useIPE } = React;

/* ============ SERVICES ============ */
function ServicesPage({ setPage }) {
  return (
    <main className="page-enter">
      <section className="ip-hero">
        <div className="wrap">
          <div className="inner">
            <div className="pill">
              <span className="pill-dot"></span>
              <span><strong>Two practices · one engineering core</strong></span>
            </div>
            <h1>Solutions for <span className="grad">systematic traders</span> and modern operators.</h1>
            <p className="sub">
              Algorithmic trading infrastructure for retail and prop traders, and full-service e-commerce operations for performance-focused brands. Each practice has its own playbook — both run on the same risk-first engineering principles.
            </p>
          </div>
        </div>
      </section>

      <section className="fin-section" style={{ paddingTop: 20, paddingBottom: 40 }}>
        <div className="wrap">

          {/* ---------- Algo Trading ---------- */}
          <div className="sv-block" style={{ borderTop: 'none' }}>
            <div className="sv-grid">
              <div>
                <div className="sv-num">Practice 01</div>
                <h2>Algorithmic Trading Infrastructure</h2>
                <p className="lede">
                  Production-grade trading systems with real-time execution, risk-optimized decision models, and transparent reporting. Built for retail algo traders who want institutional-quality infrastructure without the overhead.
                </p>
                <a className="btn-primary-blue" href="#/contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                  Discuss a strategy
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
                </a>
                <div className="sv-meta">
                  <div className="mrow"><span className="k">Markets</span><span className="v">Equities · Derivatives · FX · Crypto</span></div>
                  <div className="mrow"><span className="k">Brokers</span><span className="v">Zerodha · IBKR · Binance · Alpaca · Kotak</span></div>
                  <div className="mrow"><span className="k">Stack</span><span className="v">Python · Rust · Kafka · Kubernetes</span></div>
                  <div className="mrow"><span className="k">Engagement</span><span className="v">Monthly retainer · custom build</span></div>
                </div>
              </div>
              <div className="sv-features">
                {[
                  { i: Ic.brain,   t: 'Strategy R&D',       d: 'Idea generation, feature engineering, and statistical validation before any production code.' },
                  { i: Ic.chart,   t: 'Backtesting',        d: 'Walk-forward, out-of-sample, and Monte Carlo with realistic costs and slippage modeled in.' },
                  { i: Ic.bolt,    t: 'Execution Engine',   d: 'Low-latency order routing, smart order types, and broker-agnostic adapters — fully auditable.' },
                  { i: Ic.shield,  t: 'Risk Layer',         d: 'Position limits, drawdown circuit breakers, correlation caps, and kill switches — pre-trade.' },
                  { i: Ic.pulse,   t: 'Live Monitoring',    d: 'Real-time dashboards, alerts, and weekly performance reviews. Always know what is running.' },
                  { i: Ic.layers,  t: 'Reporting',          d: 'Daily P&L, factor attribution, regime analysis, slippage decomposition, and tax-ready logs.' },
                ].map((f, i) => (
                  <div key={i} className="sv-feat">
                    <div className="ic">{f.i}</div>
                    <h4>{f.t}</h4>
                    <p>{f.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* ---------- E-Commerce ---------- */}
          <div className="sv-block">
            <div className="sv-grid">
              <div>
                <div className="sv-num">Practice 02</div>
                <h2>Full-Service E-Commerce Operations</h2>
                <p className="lede">
                  Hands-on management of multi-channel e-commerce — from product sourcing and listing to fulfillment, ads, and analytics. We treat your store like an asset class, with the same rigor we apply to a trading book.
                </p>
                <a className="btn-primary-blue" href="#/contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                  Audit my store
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
                </a>
                <div className="sv-meta">
                  <div className="mrow"><span className="k">Channels</span><span className="v">Amazon · Shopify · Walmart · eBay</span></div>
                  <div className="mrow"><span className="k">Coverage</span><span className="v">Listings · Ads · Inventory · Fulfillment</span></div>
                  <div className="mrow"><span className="k">KPIs</span><span className="v">Margin · ACoS / TACoS · Return rate</span></div>
                  <div className="mrow"><span className="k">Engagement</span><span className="v">Monthly retainer · % of revenue</span></div>
                </div>
              </div>
              <div className="sv-features">
                {[
                  { i: Ic.network, t: 'Marketplace Setup',     d: 'Listings, variants, brand registry, and category compliance from day one — done right.' },
                  { i: Ic.layers,  t: 'Inventory Sync',        d: 'One source of truth across channels. Real-time stock, reorder points, supplier coordination.' },
                  { i: Ic.bolt,    t: 'Performance Ads',       d: 'PPC, DSP, and social managed against ACoS / TACoS targets. Cut what fails, scale what works.' },
                  { i: Ic.chart,   t: 'Conversion Optimization', d: 'A/B-tested listings, A+ content, and pricing experiments driven by data — never gut feel.' },
                  { i: Ic.cloud,   t: 'Fulfillment Ops',       d: 'FBA, 3PL, or hybrid — we model costs and pick the routing that protects margin per order.' },
                  { i: Ic.pulse,   t: 'Analytics',             d: 'Weekly P&L by SKU and channel. Cohort analysis and a clear answer to "what is working?"' },
                ].map((f, i) => (
                  <div key={i} className="sv-feat">
                    <div className="ic">{f.i}</div>
                    <h4>{f.t}</h4>
                    <p>{f.d}</p>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ ABOUT ============ */
function AboutPage({ setPage }) {
  return (
    <main className="page-enter">
      <section className="ip-hero">
        <div className="wrap">
          <div className="inner">
            <div className="pill">
              <span className="pill-dot"></span>
              <span><strong>About Vyovam</strong> · Engineers building for traders</span>
            </div>
            <h1>Engineers first. <span className="grad">Operators second.</span> Marketers never.</h1>
            <p className="sub">
              Vyovam Tech Services LLC was founded by traders and operators who got tired of watching good ideas die in bad infrastructure. We saw the same pattern in two different worlds — algorithmic trading and e-commerce — and built a firm that treats both as engineering problems first.
            </p>
          </div>
        </div>
      </section>

      <section className="ab-intro">
        <div className="wrap">
          <div className="ab-intro-grid">
            <div>
              <span className="label">Our story</span>
            </div>
            <div>
              <p>
                We're small <strong>on purpose.</strong> Every client works directly with the people building their systems — no account managers, no handoffs, no surprises.
              </p>
              <p>
                Our work is judged by the numbers it produces and the systems it leaves behind. We'd rather lose a sales pitch than win on charisma we can't back up in production.
              </p>
            </div>
          </div>
        </div>
      </section>

      <section className="fin-section">
        <div className="wrap">
          <div className="fin-section-head" style={{ marginTop: 0, marginBottom: 36 }}>
            <span className="eyebrow">What we believe</span>
            <h2>Three principles, non-negotiable.</h2>
          </div>
          <div className="ab-values">
            <div className="ab-val">
              <div className="num">— 01</div>
              <h4>Systems over instincts</h4>
              <p>Markets and marketplaces both reward discipline. We build processes that compound — not heroics that burn out.</p>
            </div>
            <div className="ab-val">
              <div className="num">— 02</div>
              <h4>Numbers, not narratives</h4>
              <p>Every recommendation has a backtest, an A/B test, or a paper trail. We'd rather lose an argument than win on charisma.</p>
            </div>
            <div className="ab-val">
              <div className="num">— 03</div>
              <h4>Transparent by default</h4>
              <p>You see the code, the dashboards, the spend, the reasoning. Black-box partners are how clients get burned.</p>
            </div>
          </div>

          <div className="fin-section-head" style={{ marginTop: 56, marginBottom: 36 }}>
            <span className="eyebrow">The team</span>
            <h2>Senior people on every engagement.</h2>
          </div>
          <div className="ab-team">
            {[
              { code: '01', title: 'Trading Engineering',     role: '12+ years · Quant systems',   d: 'Strategy R&D, execution infrastructure, and risk systems across equities, futures, and crypto venues.' },
              { code: '02', title: 'E-Commerce Operations',    role: '9+ years · Multi-channel ops', d: 'Scaled DTC and reseller brands from six to eight figures across Amazon, Walmart, Shopify, and DTC.' },
              { code: '03', title: 'Data & Analytics',         role: '8+ years · Quant analytics',   d: 'Builds the dashboards, attribution models, and reporting that keep both practices honest.' },
            ].map((m, i) => (
              <div key={i} className="ab-mem">
                <div className="av">{m.code}</div>
                <h4>{m.title}</h4>
                <div className="role">{m.role}</div>
                <p>{m.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ CONTACT ============ */
function ContactPage() {
  const [submitted, setSubmitted] = useIP(false);
  const [sending, setSending] = useIP(false);
  const [error, setError] = useIP('');
  const [form, setForm] = useIP({
    name: '', email: '', company: '',
    service: 'Algorithmic Trading',
    message: '',
    website: '' // honeypot — real users never fill this
  });
  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (sending) return;
    setSending(true);
    setError('');
    try {
      const res = await fetch('contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form)
      });
      const j = await res.json();
      if (j.ok) setSubmitted(true);
      else setError('Something went wrong — please email care@vyovam.com directly.');
    } catch (err) {
      setError('Something went wrong — please email care@vyovam.com directly.');
    }
    setSending(false);
  };

  return (
    <main className="page-enter">
      <section className="ip-hero" style={{ paddingBottom: 0 }}>
        <div className="wrap">
          <div className="inner">
            <div className="pill">
              <span className="pill-dot"></span>
              <span><strong>Contact</strong> · Mon–Fri · &lt; 24h response</span>
            </div>
            <h1>Book a <span className="grad">walkthrough.</span></h1>
            <p className="sub">
              Tell us what you're working on — we'll walk you through the platform, the dashboards, and how strategies go from idea to production. Every inquiry is read by a real engineer, usually within a business day.
            </p>
          </div>
        </div>
      </section>

      <section className="fin-section" style={{ paddingTop: 20 }}>
        <div className="wrap">
          <div className="cn-grid">
            <div className="cn-info">
              <span className="label">— Reach us directly</span>
              <h2>Get in <span className="grad">touch.</span></h2>
              <p>The fastest path to a real answer is the form on the right. If you'd rather email, address details are below.</p>
              <ul className="cn-list">
                <li>
                  <span className="ic">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="2" y="3" width="12" height="10" rx="1.5"/><path d="m2.5 4 5.5 5L13.5 4"/></svg>
                  </span>
                  <div>
                    <div className="k">Email</div>
                    <div className="v"><a href="mailto:care@vyovam.com">care@vyovam.com</a></div>
                  </div>
                </li>
                <li>
                  <span className="ic">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M8 1.5c-2.5 0-4.5 2-4.5 4.5 0 3.4 4.5 8.5 4.5 8.5s4.5-5.1 4.5-8.5c0-2.5-2-4.5-4.5-4.5Z"/><circle cx="8" cy="6" r="1.8"/></svg>
                  </span>
                  <div>
                    <div className="k">Address</div>
                    <div className="v">1788 Glenstone Court<br/>San Jose, CA 95121, USA</div>
                  </div>
                </li>
                <li>
                  <span className="ic">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="8" cy="8" r="6"/><path d="M8 5v3l2 1.5"/></svg>
                  </span>
                  <div>
                    <div className="k">Response</div>
                    <div className="v">&lt; 24 business hours</div>
                  </div>
                </li>
              </ul>
            </div>

            <div className="cn-form">
              {submitted ? (
                <div className="cn-success">
                  <div className="check">✓</div>
                  <h4>Message received.</h4>
                  <p>Thanks, {form.name || 'there'}. We'll be in touch at {form.email || 'your email'} within one business day.</p>
                </div>
              ) : (
                <>
                  <div className="fhdr">
                    <h3>Request a walkthrough</h3>
                    <span className="badge">Active</span>
                  </div>
                  <form className="fform" onSubmit={submit}>
                    <input type="text" name="website" value={form.website} onChange={update('website')}
                      tabIndex="-1" autoComplete="off" aria-hidden="true"
                      style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
                    <div className="fform-row">
                      <div className="ffield">
                        <label>Name</label>
                        <input type="text" required value={form.name} onChange={update('name')} placeholder="Your full name" />
                      </div>
                      <div className="ffield">
                        <label>Email</label>
                        <input type="email" required value={form.email} onChange={update('email')} placeholder="you@company.com" />
                      </div>
                    </div>
                    <div className="ffield">
                      <label>Company / Project</label>
                      <input type="text" value={form.company} onChange={update('company')} placeholder="Optional" />
                    </div>
                    <div className="ffield">
                      <label>Service</label>
                      <select value={form.service} onChange={update('service')}>
                        <option>Algorithmic Trading</option>
                        <option>E-Commerce Operations</option>
                        <option>Both / Not sure</option>
                      </select>
                    </div>
                    <div className="ffield">
                      <label>What are you trying to solve?</label>
                      <textarea required value={form.message} onChange={update('message')} placeholder="A few sentences about goals, current setup, and timing."></textarea>
                    </div>
                    {error && (
                      <div style={{ padding: '12px 16px', border: '1px solid rgba(239,68,68,0.5)', background: 'rgba(239,68,68,0.06)', color: 'var(--acc-red)', fontSize: 13.5 }}>
                        {error}
                      </div>
                    )}
                    <div className="fform-actions">
                      <span className="fform-note">We respond within 1 business day.</span>
                      <button type="submit" className="btn-primary-blue" disabled={sending}
                        style={{ border: 'none', cursor: sending ? 'wait' : 'pointer', opacity: sending ? 0.7 : 1 }}>
                        {sending ? 'Sending…' : 'Send message'}
                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
                      </button>
                    </div>
                  </form>
                </>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* ============ INFRASTRUCTURE ============ */
function InfrastructurePage({ setPage }) {
  return (
    <main className="page-enter">
      <section className="ip-hero">
        <div className="wrap">
          <div className="inner">
            <div className="pill">
              <span className="pill-dot"></span>
              <span><strong>Algo Trading</strong> · Cloud-native infrastructure</span>
            </div>
            <h1>Built like <span className="grad">infrastructure</span>, not like a bot.</h1>
            <p className="sub">
              Vyovam runs on the same architectural patterns institutional trading desks rely on: stateless services, immutable deployments, in-line risk gateways, and observable everything. No black boxes, no shortcuts.
            </p>
          </div>
        </div>
      </section>

      {/* Architecture flow */}
      <section className="fin-section" style={{ paddingTop: 24, paddingBottom: 56 }}>
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow">System Architecture</span>
            <h2>Five validated stages. Full observability at each.</h2>
            <p>Every order flows through strategy, risk, brokerage, execution, and monitoring — independently scalable, independently auditable.</p>
          </div>

          <div className="arch">
            <div className="arch-line"></div>
            {[
              { t: 'Strategy Engine',  s: 'signals',     i: Ic.brain,   det: 'ML-validated signals generated on tick data' },
              { t: 'Risk Validation',  s: 'pre-trade',   i: Ic.shield,  det: 'Limits and circuit breakers checked before routing' },
              { t: 'Broker API Layer', s: 'routing',     i: Ic.network, det: 'Smart order routing across five broker venues' },
              { t: 'Execution Engine', s: 'fills',       i: Ic.bolt,    det: 'Sub-40ms round-trip execution and fills' },
              { t: 'Monitoring',       s: 'dashboards',  i: Ic.chart,   det: 'Live P&L, latency, and health observability' },
            ].map((n, i) => (
              <div key={i} className="arch-node">
                <div className="arch-num">0{i + 1}</div>
                <div className="core">{n.i}</div>
                <h4>{n.t}</h4>
                <p>{n.s}</p>
                <div className="arch-detail">{n.det}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Capability grid */}
      <section className="fin-section" style={{ background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow">Capabilities</span>
            <h2>Operational rigor of an institutional desk.</h2>
            <p>The unglamorous infrastructure work that decides whether a strategy survives its first regime change.</p>
          </div>
          <FinReveal>
          <div className="fgrid">
            {[
              { i: Ic.bolt,    t: 'Low-Latency Execution',   d: 'Co-located venues, sub-40ms round trip, smart order routing across regions and asset classes.' },
              { i: Ic.shield,  t: 'In-Line Risk Gateways',   d: 'Pre-trade limits, drawdown circuit breakers, correlation caps — enforced before any order leaves the box.' },
              { i: Ic.cloud,   t: 'Multi-AZ Deployment',     d: 'Auto-scaling Kubernetes across regions with hot failover and quarterly DR drills.' },
              { i: Ic.network, t: 'Broker-Agnostic Routing', d: 'Unified API across Zerodha, IBKR, Binance, Alpaca, Kotak. Idempotent submission. Rate-limit aware retries.' },
              { i: Ic.pulse,   t: 'Distributed Observability', d: 'OpenTelemetry traces, structured logs, and PagerDuty-grade alerting at every hop.' },
              { i: Ic.lock,    t: 'Hardened Security',       d: 'TLS in transit, AES-256 at rest, broker credentials in HSM-backed vaults with strict IAM scopes.' },
              { i: Ic.layers,  t: 'Event-Sourced State',     d: 'Append-only event logs make every position reconstructible to the millisecond — debugging and audits become tractable.' },
              { i: Ic.brain,   t: 'Embedded ML Pipelines',   d: 'Signal validation, regime detection, and execution tuning run on the same infrastructure as trading.' },
            ].map((c, i) => (
              <div key={i} className="fcard">
                <div className="f-icon">{c.i}</div>
                <h3>{c.t}</h3>
                <p>{c.d}</p>
              </div>
            ))}
          </div>
          </FinReveal>
        </div>
      </section>

      {/* Stack table */}
      <section className="fin-section">
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow">The Stack</span>
            <h2>Boring technology, deployed seriously.</h2>
            <p>We pick tools by failure mode, not novelty. The result is fewer surprises in production and faster recovery when they happen.</p>
          </div>

          <FinReveal>
          <div className="stack-grid">
            {[
              { k: 'Languages',     v: 'Python · Rust · TypeScript',           ic: Ic.layers },
              { k: 'Streaming',     v: 'Kafka · Redpanda · NATS JetStream',    ic: Ic.bolt },
              { k: 'Storage',       v: 'PostgreSQL · ClickHouse · S3',         ic: Ic.cloud },
              { k: 'Orchestration', v: 'Kubernetes · ArgoCD · Terraform',      ic: Ic.network },
              { k: 'Observability', v: 'Prometheus · Grafana · OpenTelemetry', ic: Ic.pulse },
              { k: 'Cloud',         v: 'AWS (multi-region) · GCP (DR)',        ic: Ic.globe },
              { k: 'Security',      v: 'Vault · IAM (least privilege) · KMS',  ic: Ic.lock },
              { k: 'ML Runtime',    v: 'PyTorch · ONNX · Ray',                 ic: Ic.brain },
            ].map((row, i) => (
              <div key={i} className="stack-row">
                <span className="ic">{row.ic}</span>
                <div className="meta">
                  <div className="k">{row.k}</div>
                  <div className="v">{row.v}</div>
                </div>
              </div>
            ))}
          </div>
          </FinReveal>
        </div>
      </section>
    </main>
  );
}

/* ============ E-COMMERCE (coming soon) ============ */
function EcommercePage({ setPage }) {
  return (
    <main className="page-enter">
      <section className="ip-hero" style={{ paddingBottom: 80 }}>
        <div className="wrap">
          <div className="inner" style={{ textAlign: 'center', margin: '0 auto', maxWidth: 760 }}>
            <span className="pc-tag soon" style={{ fontSize: 12, padding: '6px 14px' }}>COMING SOON</span>
            <h1 style={{ marginTop: 24 }}>E-Commerce Operations, <span className="grad">engineered like a trading desk.</span></h1>
            <p className="sub" style={{ margin: '0 auto 16px' }}>
              We're building a full-service e-commerce practice on the same real-time infrastructure that powers our trading systems — multi-channel listings, performance ads, inventory sync, and fulfillment, all run with margin-first discipline.
            </p>
            <p style={{ color: 'var(--text-tertiary)', fontSize: 14, marginBottom: 32 }}>
              We'll be sharing updates on this journey soon.
            </p>
            <div style={{ display: 'flex', gap: 16, justifyContent: 'center', alignItems: 'center', flexWrap: 'wrap' }}>
              <a className="btn-primary-blue" href="#/contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                Get notified
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
              </a>
              <a href="#/contact" className="btn-ghost-sm" style={{ color: 'var(--acc-green)', borderBottom: '1px solid rgba(16,185,129,0.4)', padding: '2px 0' }}
                onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                Talk to us
              </a>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ServicesPage, AboutPage, ContactPage, InfrastructurePage, EcommercePage });