/* ============================================================
   VYOVAM Homepage — AI-Powered Algorithmic Trading Infrastructure
   ============================================================ */
const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM } = React;

/* ---------- Helpers ---------- */
function MiniLine({ seed = 1, color = '#3B82F6', height = 40, points = 24 }) {
  const data = useM(() => {
    let rng = seed;
    const rand = () => { rng = (rng * 9301 + 49297) % 233280; return rng / 233280; };
    const arr = []; let v = 50;
    for (let i = 0; i < points; i++) {
      v += (rand() - 0.5) * 14 + 0.6;
      arr.push(Math.max(8, Math.min(92, v)));
    }
    return arr;
  }, [seed, points]);
  const w = 200;
  const path = data.map((p, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = height - (p / 100) * height;
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
  const area = `${path} L ${w} ${height} L 0 ${height} Z`;
  const gid = `mlg-${seed}`;
  return (
    <svg className="miniline" viewBox={`0 0 ${w} ${height}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id={gid} x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.25" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill={`url(#${gid})`} />
      <path d={path} fill="none" stroke={color} strokeWidth="1.4" />
    </svg>
  );
}

function PnLChart() {
  const data = useM(() => {
    const arr = []; let v = 30;
    for (let i = 0; i < 60; i++) {
      v += Math.sin(i * 0.3) * 1.8 + (i / 60) * 1.6 + (Math.random() - 0.4) * 2.6;
      arr.push(Math.max(8, Math.min(95, v)));
    }
    return arr;
  }, []);
  const w = 400, h = 100;
  const path = data.map((p, i) => {
    const x = (i / (data.length - 1)) * w;
    const y = h - (p / 100) * h;
    return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
  }).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;

  const [drawn, setDrawn] = useS(false);
  useE(() => { const t = setTimeout(() => setDrawn(true), 200); return () => clearTimeout(t); }, []);

  return (
    <svg className="pnl-spark" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
      <defs>
        <linearGradient id="pnlG" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#10B981" stopOpacity="0.35" />
          <stop offset="100%" stopColor="#10B981" stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={area} fill="url(#pnlG)" style={{ opacity: drawn ? 1 : 0, transition: 'opacity 1.2s ease 0.4s' }} />
      <path d={path} fill="none" stroke="#10B981" strokeWidth="1.6"
        strokeDasharray="2000" strokeDashoffset={drawn ? 0 : 2000}
        style={{ transition: 'stroke-dashoffset 1.8s ease' }} />
    </svg>
  );
}

function Donut() {
  const slices = [
    { label: 'Equities', pct: 42, color: '#3B82F6' },
    { label: 'Futures',  pct: 28, color: '#10B981' },
    { label: 'Crypto',   pct: 18, color: '#A78BFA' },
    { label: 'FX',       pct: 12, color: '#F59E0B' }
  ];
  const r = 30, c = 38, sw = 12;
  const circ = 2 * Math.PI * r;
  let off = 0;
  return (
    <div className="alloc-row">
      <svg className="donut" viewBox="0 0 76 76">
        <circle cx={c} cy={c} r={r} fill="none" stroke="rgba(255,255,255,0.06)" strokeWidth={sw} />
        {slices.map((s, i) => {
          const len = (s.pct / 100) * circ;
          const dash = `${len} ${circ - len}`;
          const el = (
            <circle key={i} cx={c} cy={c} r={r} fill="none"
              stroke={s.color} strokeWidth={sw}
              strokeDasharray={dash}
              strokeDashoffset={-off}
              transform={`rotate(-90 ${c} ${c})`}
              style={{ transition: 'stroke-dasharray 1s ease' }} />
          );
          off += len;
          return el;
        })}
      </svg>
      <div className="alloc-legend">
        {slices.map((s, i) => (
          <div key={i} className="it">
            <span className="swatch" style={{ background: s.color }}></span>
            <span>{s.label}</span>
            <span className="pct">{s.pct}%</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function OrderFeed() {
  const baseOrders = useM(() => ([
    { side: 'buy',  sym: 'BTC-USDT', qty: '0.42',   px: '67,842' },
    { side: 'sell', sym: 'AAPL',     qty: '120',    px: '218.40' },
    { side: 'buy',  sym: 'NIFTY',    qty: '2 lots', px: '24,832' },
    { side: 'buy',  sym: 'ETH-USDT', qty: '4.10',   px: '3,521.4' },
    { side: 'sell', sym: 'TSLA',     qty: '80',     px: '245.10' },
  ]), []);
  return (
    <div className="orders">
      {baseOrders.map((o, i) => (
        <div key={i} className={`order-row ${o.side}`} style={{ animationDelay: `${i * 80}ms` }}>
          <span className="side"></span>
          <span className="sym">{o.sym}</span>
          <span className="qty">{o.side.toUpperCase()} {o.qty}</span>
          <span className="px">{o.px}</span>
        </div>
      ))}
    </div>
  );
}

/* ---------- Heatmap ---------- */
function Heatmap() {
  // 48 cells, deterministic colors
  const cells = useM(() => {
    const arr = [];
    let rng = 17;
    const rand = () => { rng = (rng * 9301 + 49297) % 233280; return rng / 233280; };
    for (let i = 0; i < 48; i++) {
      const v = (rand() - 0.45) * 2; // -0.9 to 1.1
      let color, alpha;
      if (v > 0) {
        alpha = Math.min(0.7, Math.max(0.12, v * 0.6));
        color = `rgba(16,185,129,${alpha})`;
      } else {
        alpha = Math.min(0.7, Math.max(0.12, -v * 0.6));
        color = `rgba(239,68,68,${alpha})`;
      }
      arr.push(color);
    }
    return arr;
  }, []);
  return (
    <div className="heatmap">
      {cells.map((c, i) => (
        <div key={i} className="hc" style={{ background: c }}></div>
      ))}
    </div>
  );
}

/* ---------- Execution feed (timestamped) ---------- */
function ExecutionFeed() {
  const rows = useM(() => ([
    { t: '14:32:11', s: 'BTC-USDT',  a: 'BUY',  q: '0.42',   v: '67,842.10' },
    { t: '14:32:08', s: 'AAPL',      a: 'SELL', q: '120',    v: '218.40' },
    { t: '14:31:54', s: 'NIFTY 24K', a: 'BUY',  q: '2 lots', v: '24,832.05' },
    { t: '14:31:42', s: 'ETH-USDT',  a: 'BUY',  q: '4.10',   v: '3,521.40' },
    { t: '14:31:30', s: 'TSLA',      a: 'SELL', q: '80',     v: '245.10' },
    { t: '14:31:22', s: 'SPY',       a: 'BUY',  q: '50',     v: '574.85' },
  ]), []);
  return (
    <div className="exec-feed">
      {rows.map((r, i) => (
        <div key={i} className="exec-row">
          <span className="t">{r.t}</span>
          <span className="s">{r.s}</span>
          <span className={`a ${r.a === 'BUY' ? 'buy' : 'sell'}`}>{r.a} {r.q}</span>
          <span className="v">{r.v}</span>
        </div>
      ))}
    </div>
  );
}

/* ---------- Count-up metric ---------- */
function CountUp({ value }) {
  // parse "99.9%", "< 40ms", "500+", "24/7"
  const m = String(value).match(/^([^0-9]*)([\d.]+)(.*)$/);
  const ref = useR(null);
  const [display, setDisplay] = useS(value);
  useE(() => {
    if (!m) return;
    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduced || value === '24/7') { setDisplay(value); return; }
    const target = parseFloat(m[2]);
    const decimals = (m[2].split('.')[1] || '').length;
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (!entry.isIntersecting) return;
      obs.disconnect();
      const t0 = performance.now();
      const dur = 1200;
      const tick = (t) => {
        const p = Math.min(1, (t - t0) / dur);
        const eased = 1 - Math.pow(1 - p, 3);
        setDisplay(`${m[1]}${(target * eased).toFixed(decimals)}${m[3]}`);
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    }, { threshold: 0.4 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [value]);
  return <span ref={ref}>{display}</span>;
}

/* ---------- One core, three products diagram ---------- */
function CoreBranches({ setPage }) {
  return (
    <div className="core-diagram" aria-label="One engineering core powering three business lines">
      <div className="cd-core">
        <div className="cd-core-node">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="3"/><path d="M12 2v4M12 18v4M2 12h4M18 12h4M4.9 4.9l2.8 2.8M16.3 16.3l2.8 2.8M19.1 4.9l-2.8 2.8M7.7 16.3l-2.8 2.8"/></svg>
          <span>AI Engineering Core</span>
        </div>
      </div>
      <svg className="cd-lines" viewBox="0 0 600 70" preserveAspectRatio="none" aria-hidden="true">
        <path className="cd-line cd-line-blue"  d="M300 0 C300 35, 100 35, 100 70" />
        <path className="cd-line cd-line-green" d="M300 0 L300 70" />
        <path className="cd-line cd-line-coral" d="M300 0 C300 35, 500 35, 500 70" />
      </svg>
      <div className="cd-branches">
        <a href="#/infrastructure" className="cd-branch cd-blue" onClick={(e) => { e.preventDefault(); setPage('infrastructure'); }}>
          <span className="cd-dot"></span>
          <div>
            <h5>Algo Trading <span className="pc-tag" style={{ marginLeft: 6 }}>LIVE</span></h5>
            <p>Institutional-grade trading infrastructure</p>
          </div>
        </a>
        <a href="#/ecommerce" className="cd-branch cd-green" onClick={(e) => { e.preventDefault(); setPage('ecommerce'); }}>
          <span className="cd-dot"></span>
          <div>
            <h5>E-Commerce Ops <span className="pc-tag soon" style={{ marginLeft: 6 }}>SOON</span></h5>
            <p>Multi-channel operations, run like a desk</p>
          </div>
        </a>
        <a href="#/fluentme" className="cd-branch cd-coral" onClick={(e) => { e.preventDefault(); setPage('fluentme'); }}>
          <span className="cd-dot"></span>
          <div>
            <h5>FluentMe <span className="pc-tag" style={{ marginLeft: 6 }}>LIVE</span></h5>
            <p>Consumer AI language app · fluentme.ai</p>
          </div>
        </a>
      </div>
    </div>
  );
}

/* ---------- HERO Dashboard mock ---------- */
function HeroDashboard() {
  return (
    <div className="dash-wrap">
      <div className="dash">
        {/* P&L hero card */}
        <div className="card glow-green c-pnl">
          <div className="k-row">
            <span className="k-label">Daily P&L</span>
            <span className="k-delta up mono">▲ +4.82%</span>
          </div>
          <div className="k-value up" style={{ marginTop: 6 }}>+$14,283.40</div>
          <PnLChart />
        </div>

        {/* Sharpe */}
        <div className="card c-sharpe">
          <div className="k-row">
            <span className="k-label">Sharpe Ratio</span>
            <span className="k-delta up">30D</span>
          </div>
          <div className="k-value" style={{ marginTop: 4 }}>2.14</div>
          <MiniLine seed={7} color="#d4af37" height={36} points={20} />
        </div>

        {/* Risk meter */}
        <div className="card c-risk">
          <div className="k-row">
            <span className="k-label">Risk Exposure</span>
            <span className="k-delta" style={{ color: '#F59E0B' }}>MED</span>
          </div>
          <div className="meter"><div className="meter-fill"></div></div>
          <div className="meter-labels">
            <span>Low</span><span>Medium</span><span>High</span>
          </div>
        </div>

        {/* Order log */}
        <div className="card c-orders">
          <div className="k-row">
            <span className="k-label">Live Orders</span>
            <span className="k-delta up">5 active</span>
          </div>
          <OrderFeed />
        </div>

        {/* Allocation donut */}
        <div className="card c-alloc">
          <div className="k-row">
            <span className="k-label">Portfolio Allocation</span>
            <span className="k-delta">$1.42M</span>
          </div>
          <Donut />
        </div>

        {/* Broker status */}
        <div className="card c-broker">
          <div className="k-row">
            <span className="k-label">Broker Status</span>
            <span className="k-delta up">●  5 / 5</span>
          </div>
          <div className="broker-grid">
            <div className="broker-chip"><span className="dot"></span><span className="name">ZERODHA</span></div>
            <div className="broker-chip"><span className="dot"></span><span className="name">IBKR</span></div>
            <div className="broker-chip"><span className="dot"></span><span className="name">BINANCE</span></div>
            <div className="broker-chip"><span className="dot"></span><span className="name">ALPACA</span></div>
            <div className="broker-chip"><span className="dot"></span><span className="name">KOTAK</span></div>
          </div>
        </div>
      </div>

      {/* Floating widgets */}
      <div className="float-widget fw-1">
        <div className="fw-row">
          <div className="fw-icon green">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
              <path d="M2 11 L6 7 L9 9 L14 4" />
              <path d="M11 4 L14 4 L14 7" />
            </svg>
          </div>
          <div className="fw-meta">
            <span className="fw-title">Strategy live</span>
            <span className="fw-sub">VYO-04 · paper → live</span>
          </div>
        </div>
      </div>

      <div className="float-widget fw-2">
        <div className="fw-row">
          <div className="fw-icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6">
              <circle cx="8" cy="8" r="5.5" />
              <path d="M8 5 L8 8 L10 9.5" />
            </svg>
          </div>
          <div className="fw-meta">
            <span className="fw-title">Latency · 38ms</span>
            <span className="fw-sub">all regions healthy</span>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- Reveal ---------- */
function FinReveal({ children, delay = 0 }) {
  const ref = useR(null);
  const [shown, setShown] = useS(false);
  useE(() => {
    const el = ref.current; if (!el) return;
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setTimeout(() => setShown(true), delay); obs.unobserve(el); }
    }, { threshold: 0.12 });
    obs.observe(el);
    return () => obs.disconnect();
  }, [delay]);
  return <div ref={ref} className={`fin-reveal ${shown ? 'in' : ''}`}>{children}</div>;
}

/* ---------- Icons ---------- */
const Ic = {
  bolt: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M13 2 4 14h7l-1 8 9-12h-7l1-8z" /></svg>,
  brain: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M12 5a3 3 0 0 0-3 3v.5A3.5 3.5 0 0 0 5.5 12 3.5 3.5 0 0 0 9 15.5V18a3 3 0 0 0 6 0v-2.5A3.5 3.5 0 0 0 18.5 12 3.5 3.5 0 0 0 15 8.5V8a3 3 0 0 0-3-3Z"/><path d="M12 5v14"/></svg>,
  shield: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3Z"/><path d="M9 12 11 14 15 10"/></svg>,
  chart: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 20h18"/><path d="M6 17V9"/><path d="M11 17V5"/><path d="M16 17v-6"/><path d="M21 17v-3"/></svg>,
  cloud: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M7 18a5 5 0 1 1 .9-9.9A6 6 0 0 1 19 11a4 4 0 0 1-1 7H7Z"/></svg>,
  network: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="2.5"/><circle cx="4" cy="6" r="1.6"/><circle cx="4" cy="18" r="1.6"/><circle cx="20" cy="6" r="1.6"/><circle cx="20" cy="18" r="1.6"/><path d="M5.5 7 10 10.5M5.5 17 10 13.5M18.5 7 14 10.5M18.5 17 14 13.5"/></svg>,
  lock: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>,
  globe: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>,
  pulse: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12h4l2-6 4 12 2-6h6"/></svg>,
  layers: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="m12 3 9 5-9 5-9-5 9-5Z"/><path d="m3 13 9 5 9-5"/><path d="m3 17 9 5 9-5"/></svg>,
  check: <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="m3 8 3.5 3.5L13 4.5"/></svg>,
};

/* ============================================================
   HOMEPAGE
   ============================================================ */
function HomePage({ setPage }) {
  return (
    <main className="page-enter">

      {/* live global market ticker */}
      <Ticker />

      {/* ============ HERO ============ */}
      <section className="fin-hero">
        <div className="wrap">
          <div className="fin-hero-grid">
            <div>
              <div className="pill">
                <span className="pill-dot"></span>
                <span><strong>AI Engineering</strong> · Three business lines in production</span>
              </div>
              <h1 className="fin-h1">
                AI engineering for <span className="grad">markets</span> — and for everyday life.
              </h1>
              <p className="fin-sub">
                Vyovam builds real-time AI infrastructure that powers an institutional-grade trading platform, full-service e-commerce operations, and FluentMe — a consumer language-speaking app.
              </p>
              <div className="fin-cta-row" style={{ marginBottom: 24 }}>
                <a className="btn-primary-blue" href="#/contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>
                  Book a walkthrough
                  <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 className="btn-secondary-glass" href="#/infrastructure" onClick={(e) => { e.preventDefault(); setPage('infrastructure'); }}>
                  See the platform
                </a>
              </div>
              <div className="trust-row">
                <span className="ti">{Ic.check} Real-Time Infrastructure</span>
                <span className="ti">{Ic.check} AI-Assisted Systems</span>
                <span className="ti">{Ic.check} Multi-Market Support</span>
              </div>
            </div>
            <HeroDashboard />
          </div>
          <div className="data-disclaimer" style={{ textAlign: 'right', marginTop: 14 }}>Illustrative sample data — not actual performance.</div>
        </div>
      </section>

      {/* ============ OUR PRODUCTS ============ */}
      <section className="fin-section" id="our-products" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow">Our Products</span>
            <h2>Three business lines. One AI engineering core.</h2>
            <p>Trading infrastructure, e-commerce operations, and consumer AI — engineered on the same real-time core.</p>
          </div>
          <FinReveal>
          <CoreBranches setPage={setPage} />
          </FinReveal>
          </div>
      </section>

      {/* ============ ARCHITECTURE ============ */}
      <section className="fin-section" id="architecture" 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">How it works</span>
            <h2>Built like infrastructure, not like a bot.</h2>
            <p>Every order flows through five validated stages — strategy, risk, brokerage, execution, monitoring — with full observability at each step.</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>

      {/* ============ SECURITY ============ */}
      <section className="fin-section" id="security" 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">Security & Stability</span>
            <h2>Built to operate, not just to launch.</h2>
            <p>Defensible infrastructure with the operational rigor expected of an institutional desk.</p>
          </div>
          <FinReveal>
            <div className="sec-grid">
              {[
                { i: Ic.lock,    t: 'Encrypted Infrastructure', d: 'TLS in transit, AES-256 at rest, broker credentials in HSM-backed vaults.' },
                { i: Ic.pulse,   t: 'High Availability',        d: 'Multi-AZ, auto-failover, with quarterly DR drills and 99.9% SLA targets.' },
                { i: Ic.cloud,   t: 'Cloud-Native Deployment',  d: 'Containerized services, declarative config, zero-downtime rollouts.' },
                { i: Ic.shield,  t: 'Risk-Controlled Execution', d: 'In-line risk gateways enforce limits before any order reaches a broker.' },
                { i: Ic.chart,   t: 'Monitoring Architecture',  d: 'Distributed traces, structured logs, and PagerDuty-grade alerting.' },
                { i: Ic.network, t: 'Broker API Stability',      d: 'Rate-limit aware retries, idempotent submissions, and venue-side reconciliation.' },
              ].map((s, i) => (
                <div key={i} className="sec-card">
                  <span className="ic">{s.i}</span>
                  <div>
                    <h4>{s.t}</h4>
                    <p>{s.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </FinReveal>
        </div>
      </section>

      {/* Final CTA removed */}
    </main>
  );
}

Object.assign(window, { HomePage });