/* global React, AURA_DATA, Icon, Spark */
const D5 = window.AURA_DATA;
const { useMemo } = React;

function Landing({ onSignIn, onGetStarted, theme, onToggleTheme }) {
  const equitySpark = useMemo(() => D5.generateSpark([], 60), []);
  const SunI = <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>;
  const MoonI = <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg>;

  return (
    <div className="landing-hero">
      <div style={{ position: "relative", zIndex: 1, width: "min(1200px, 92vw)", padding: "60px 0" }}>
        <div className="row between" style={{ marginBottom: 80 }}>
          <div className="brand" style={{ width: "auto" }}>
            <img className="brand-mark" src="/logo.png" alt="AURA" />
            <span>AURA</span>
          </div>
          <div className="row" style={{ gap: 4 }}>
            <button className="btn ghost">Features</button>
            <button className="btn ghost">How it works</button>
            {onToggleTheme && (
              <button className="icon-btn" title="Toggle theme" onClick={onToggleTheme}>
                {theme === "dark" ? SunI : MoonI}
              </button>
            )}
            <button className="btn ghost" onClick={onSignIn}>Sign In</button>
            <button className="btn primary" onClick={onGetStarted}>Get Started Free</button>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 60, alignItems: "center" }}>
          <div>
            <div className="row" style={{ gap: 8, marginBottom: 22 }}>
              <span className="pill buy" style={{ padding: "4px 10px", fontSize: 10 }}>● 100% FREE FOREVER</span>
              <span className="pill neutral" style={{ padding: "4px 10px", fontSize: 10 }}>XAUUSD ONLY · M15</span>
              <span className="pill neutral" style={{ padding: "4px 10px", fontSize: 10 }}>24/5 TRADING</span>
            </div>
            <h1 style={{ fontSize: 64, lineHeight: 1.05, margin: 0, fontWeight: 600, letterSpacing: "-0.03em" }}>
              Algorithmic gold trading,<br/>
              <span style={{ background: "linear-gradient(90deg, var(--accent), #a78bfa)", WebkitBackgroundClip: "text", color: "transparent" }}>without the toll booth.</span>
            </h1>
            <p style={{ fontSize: 17, color: "var(--text-1)", marginTop: 24, lineHeight: 1.55, maxWidth: 520 }}>
              AURA is a scalping bot specialized in <b>XAUUSD (spot gold)</b>. EMA 8/21 crossover on M15 with ATR-scaled sizing — 24 hours a day, 5 days a week, straight into your own OctaFX account. No subscriptions. No commissions.
            </p>
            <div className="row" style={{ gap: 10, marginTop: 32 }}>
              <button className="btn primary" style={{ padding: "12px 20px", fontSize: 14 }} onClick={onGetStarted}>
                {Icon.play}Launch the Console
              </button>
              <button className="btn" style={{ padding: "12px 20px", fontSize: 14, background: "transparent" }} onClick={onSignIn}>
                Sign In →
              </button>
            </div>
            <div className="row" style={{ gap: 32, marginTop: 48 }}>
              {[{ v: "OctaFX", l: "Only broker" }, { v: "M15", l: "Timeframe" }, { v: "EMA 8/21", l: "Strategy" }, { v: "24/5", l: "Mon–Fri" }].map((s) => (
                <div key={s.l}>
                  <div className="mono" style={{ fontSize: 22, fontWeight: 600, color: "var(--text-0)" }}>{s.v}</div>
                  <div className="mono" style={{ fontSize: 10, color: "var(--text-2)", textTransform: "uppercase", letterSpacing: ".14em", marginTop: 4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div className="panel" style={{ background: "var(--bg-1)", boxShadow: "0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,224,255,0.1)" }}>
              <div className="panel-header">
                <div className="panel-title"><span className="live-dot"></span>AURA · LIVE · XAUUSD</div>
                <span className="pill buy">BOT ACTIVE</span>
              </div>
              <div style={{ padding: 18 }}>
                <div className="mono" style={{ fontSize: 10, color: "var(--text-2)", letterSpacing: ".14em", textTransform: "uppercase" }}>Strategy · EMA 8/21 M15</div>
                <div className="mono" style={{ fontSize: 28, fontWeight: 600, marginTop: 4 }}>XAUUSD</div>
                <div className="mono" style={{ fontSize: 12, marginTop: 2, color: "var(--text-2)" }}>EMA crossover · ATR-scaled sizing · Spread gate</div>
                <div style={{ marginTop: 14 }}>
                  <Spark data={equitySpark} color="var(--accent)" width={460} height={70} />
                </div>
              </div>
              <div style={{ borderTop: "1px solid var(--line)" }}>
                {[
                  { k: "Strategy", v: "EMA 8/21 Crossover" },
                  { k: "Timeframe", v: "M15" },
                  { k: "Risk / trade", v: "0.5% default" },
                  { k: "Circuit breaker", v: "4 losses OR 3% DD" },
                ].map((r) => (
                  <div key={r.k} className="kv" style={{ padding: "8px 14px" }}>
                    <span className="k">{r.k}</span><span className="v" style={{ fontSize: 11 }}>{r.v}</span>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ position: "absolute", top: -16, right: -16, padding: "6px 10px", background: "var(--bg-3)", border: "1px solid var(--line-2)", borderRadius: 4, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--accent)", letterSpacing: ".14em" }}>
              ● OctaFX-Demo / OctaFX-Real
            </div>
          </div>
        </div>

        <div className="banner warn" style={{ marginTop: 60 }}>
          <span style={{ width: 14, height: 14, color: "var(--amber)" }}>{Icon.alert}</span>
          <span style={{ fontSize: 12 }}>
            <strong>Risk Disclosure:</strong> Forex trading involves substantial risk and is not suitable for all investors. You may lose more than your initial deposit. AURA provides software only — not financial advice. Past performance does not guarantee future results.
          </span>
        </div>
      </div>
    </div>
  );
}

window.Landing = Landing;