/* Master AI — main app */

const { useState, useEffect, useMemo } = React;

const CAROUSEL_SIGNALS = [
  {
    pair: 'XAU/USD', action: 'BUY', flags: ['xau', 'usd'],
    entry: 2684.50, sl: 2678.20, tps: [2692.00, 2701.50, 2715.00],
    confidence: 87, pattern: 'Bullish Flag · H1', style: 'Intraday',
    candles: genCandles(30, 0.9, 2672),
  },
  {
    pair: 'EUR/USD', action: 'SELL', flags: ['eur', 'usd'],
    entry: 1.0868, sl: 1.0895, tps: [1.0840, 1.0818, 1.0790],
    confidence: 82, pattern: 'Double Top · H1', style: 'Intraday',
    candles: genCandles(30, -0.7, 1.0890),
  },
  {
    pair: 'GBP/JPY', action: 'BUY', flags: ['gbp', 'jpy'],
    entry: 192.48, sl: 191.80, tps: [193.20, 194.00, 195.10],
    confidence: 76, pattern: 'Ascending Triangle · H4', style: 'Swing',
    candles: genCandles(30, 0.6, 191.9),
  },
  {
    pair: 'BTC/USD', action: 'BUY', flags: ['xau', 'usd'],
    entry: 68420, sl: 67800, tps: [69500, 70800, 72500],
    confidence: 91, pattern: 'Breakout Retest · H4', style: 'Swing',
    candles: genCandles(30, 1.1, 67000),
  },
  {
    pair: 'USD/JPY', action: 'SELL', flags: ['usd', 'jpy'],
    entry: 154.22, sl: 154.80, tps: [153.50, 152.80, 151.90],
    confidence: 79, pattern: 'Bearish Engulfing · H1', style: 'Intraday',
    candles: genCandles(30, -0.5, 154.6),
  },
];

const FEATURES = [
  { t: 'Multi-Timeframe', d: 'Feed up to 4 timeframes at once (M5 · M15 · H1 · H4) for confluence-weighted signals no single chart can produce.', large: true,
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><rect x="3" y="3" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><rect x="13" y="3" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><rect x="3" y="13" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/><rect x="13" y="13" width="8" height="8" rx="1.5" stroke="currentColor" strokeWidth="1.6"/></svg>
  },
  { t: 'Pattern Recognition', d: 'Head-and-shoulders, flags, triangles, engulfings — matched with vision-model precision.',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M3 17l4-5 4 3 4-7 3 4 3-2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
  },
  { t: 'Confidence Score', d: 'Every signal rated 0–100 so you know when to size up and when to sit it out.',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="8" stroke="currentColor" strokeWidth="1.6"/><path d="M12 7v5l3 2" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  },
  { t: 'Signal Alerts', d: 'Push notifications the instant a high-conviction setup forms in one of your tracked markets.',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M12 3a6 6 0 016 6v4l2 3H4l2-3V9a6 6 0 016-6zM10 20a2 2 0 004 0" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
  },
  { t: 'Signal History', d: 'Every analysis archived and searchable. Review, compare, and learn from your playbook.',
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 6h16M4 12h16M4 18h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  },
  { t: 'Performance Stats', d: 'Track win rate, best-performing pairs, and your most profitable setups — automatically.', large: true,
    icon: <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 20V10m6 10V4m6 16v-8m6 8v-5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/></svg>
  },
];

const PLANS = [
  { name: 'Free', price: 0, period: 'forever', feats: ['25 analyses / day', 'Single timeframe', 'Core patterns', 'Ads supported'] },
  { name: 'Weekly', price: 10, period: 'per week', feats: ['Unlimited analyses', 'Multi-timeframe (4)', 'Premium indicators', 'Ad-free', 'Signal alerts'] },
  { name: 'Monthly', price: 20, period: 'per month', featured: true, feats: ['Everything in Weekly', 'Priority processing', 'Signal history (full)', 'Performance stats', 'Priority support'] },
  { name: 'Yearly', price: 100, period: 'per year', save: '~$8.33/mo · saves 58%', feats: ['Everything in Monthly', 'Best annual value', 'Early access to new models', '$100 billed annually'] },
];

const App = () => {
  const [tweaks, setTweaks] = useTweaks({
    goldIntensity: 1.0,
    showGrid: true,
    showTicker: true,
    accentHue: 'gold',
  });

  useEffect(() => {
    const root = document.documentElement;
    const g = tweaks.goldIntensity;
    root.style.setProperty('--gold-glow', `rgba(212, 168, 74, ${0.35 * g})`);
    root.style.setProperty('--border-strong', `rgba(212, 168, 74, ${0.32 * g})`);
  }, [tweaks.goldIntensity]);

  return (
    <>
      {/* NAV */}
      <nav className="nav">
        <div className="nav-brand">
          <img src="assets/logo.png" alt="" />
          <div className="nav-brand-text">Master<span>AI</span></div>
        </div>
        <div className="nav-links">
          <a href="#signals">Signals</a>
          <a href="#app">The app</a>
          <a href="#demo">How it works</a>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
        </div>
        <div className="nav-cta">
          <a href="https://apps.apple.com/in/app/meta-master-ai/6763297715" target="_blank" rel="noopener" className="btn btn-ghost" style={{fontSize: 13, padding: '8px 14px'}}>
            <svg width="12" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13 5.2c-.1.1-1.9 1.1-1.9 3.3 0 2.5 2.2 3.4 2.3 3.4 0 0-.3 1-1 2-.7.9-1.4 1.8-2.4 1.8s-1.3-.6-2.4-.6c-1.1 0-1.5.6-2.4.6-1 0-1.7-.9-2.4-1.8C1.4 12 .5 9.6.5 7.3c0-3.7 2.4-5.7 4.7-5.7 1.2 0 2.2.7 3 .7.7 0 1.9-.8 3.2-.8.5 0 2.3 0 3.5 1.7-.1.1-2 1.1-2 3zM9.3 1c.6-.7 1.1-1.7 1-2.7-.9 0-2 .6-2.6 1.3-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.5-1.2z"/></svg>
            App Store
          </a>
          <a href="https://play.google.com/store/apps/details?id=com.masterai.app" target="_blank" rel="noopener" className="btn btn-primary" style={{fontSize: 13, padding: '9px 16px'}}>
            <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor"><path d="M1 1v12l10-6z"/></svg>
            Google Play
          </a>
          <a href="downloads/MasterAI.apk" download className="btn btn-ghost" style={{fontSize: 13, padding: '8px 14px'}}>
            <svg width="13" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 3v11m-4-4l4 4 4-4M5 21h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
            APK
          </a>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        {tweaks.showGrid && <div className="hero-grid" />}
        <div className="hero-aurora a" />
        <div className="hero-aurora b" />

        <div className="hero-left">
          <div className="eyebrow">
            <div className="eyebrow-dot">AI</div>
            LIVE · proprietary vision model
          </div>
          <h1 className="hero-title">
            Screenshot a chart.<br/>
            Get an <span className="gold">institution-grade</span> trade in seconds.
          </h1>
          <p className="hero-sub">
            Master AI reads any chart the way a professional trader does — structure, trend, confluence — and returns an entry zone, stop loss, three take-profits, a confidence score, and plain-English reasoning. No guesswork.
          </p>
          <div className="hero-ctas">
            <a href="https://play.google.com/store/apps/details?id=com.masterai.app" target="_blank" rel="noopener" className="btn btn-primary">
              Start analyzing free
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m-6-6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
            <a href="#demo" className="btn btn-ghost">See it work ↓</a>
          </div>
          <div className="hero-stats">
            <div>
              <div className="hero-stat-num">2.4M+</div>
              <div className="hero-stat-label">Charts analyzed</div>
            </div>
            <div>
              <div className="hero-stat-num">~4.2s</div>
              <div className="hero-stat-label">Avg. analysis time</div>
            </div>
            <div>
              <div className="hero-stat-num">47</div>
              <div className="hero-stat-label">Markets tracked</div>
            </div>
          </div>
        </div>

        <HeroStack />

        <div className="scroll-ind">
          <span>SCROLL</span>
          <div className="scroll-ind-line"></div>
        </div>
      </section>

      {/* TICKER */}
      {tweaks.showTicker && <Ticker />}

      {/* CAROUSEL */}
      <section className="block" id="signals" data-screen-label="Signals">
        <div className="section-head">
          <div className="section-eyebrow">Live Signal Library</div>
          <h2 className="section-title">Every setup, <em>photographed</em> from the inside.</h2>
          <p className="section-sub">Browse real signals Master AI has generated across forex majors, metals, indices, and crypto — each with full entry, risk, and reasoning.</p>
        </div>
        <Carousel3D signals={CAROUSEL_SIGNALS} />
      </section>

      {/* PHONE GALLERY */}
      <section className="block" id="app" data-screen-label="App" style={{paddingBottom: 140}}>
        <div className="section-head">
          <div className="section-eyebrow">Inside the app</div>
          <h2 className="section-title">Your <em>trading desk</em>, pocket-sized.</h2>
          <p className="section-sub">Five tabs. Everything you need — charts, uploads, signals, referral wallet, and controls — designed for one-thumb speed.</p>
        </div>
        <div className="phones">
          <div className="phones-track">
            {[
              {src: 'assets/screens/charts.jpeg',   label: '01 · Live Charts'},
              {src: 'assets/screens/upload.jpeg',   label: '02 · Upload'},
              {src: 'assets/screens/signals.jpeg',  label: '03 · Signals'},
              {src: 'assets/screens/wallet.jpeg',   label: '04 · Wallet'},
              {src: 'assets/screens/settings.jpeg', label: '05 · Settings'},
            ].map((p, i) => (
              <div key={i} className={`phone p-${i}`}>
                <img src={p.src} alt={p.label} />
                <div className="phone-label">{p.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DEMO */}
      <section className="block" id="demo" data-screen-label="Demo" style={{paddingTop: 80}}>
        <div className="section-head">
          <div className="section-eyebrow">Capture · Upload · Trade</div>
          <h2 className="section-title">Chart in. <em>Plan out.</em> Under five seconds.</h2>
          <p className="section-sub">Try the analysis flow. Pick a style, hit Analyze — watch Master AI work through confluence the way a desk trader would.</p>
        </div>
        <AnalysisDemo />
      </section>

      {/* FEATURES */}
      <section className="block" id="features" data-screen-label="Features">
        <div className="section-head">
          <div className="section-eyebrow">Built for serious traders</div>
          <h2 className="section-title">Everything you need <em>on the chart</em>.</h2>
        </div>
        <div className="features">
          {FEATURES.map((f, i) => (
            <div key={i} className={`feature ${f.large ? 'large' : ''}`}>
              <div className="feature-icon">{f.icon}</div>
              <div className="feature-title">{f.t}</div>
              <div className="feature-desc">{f.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PRICING */}
      <section className="block" id="pricing" data-screen-label="Pricing">
        <div className="section-head">
          <div className="section-eyebrow">Plans</div>
          <h2 className="section-title">Start free. <em>Scale</em> when you're ready.</h2>
          <p className="section-sub">All paid plans unlock unlimited analyses, multi-timeframe, premium indicators, signal alerts, and priority support.</p>
        </div>
        <div className="pricing-grid">
          {PLANS.map((p, i) => (
            <div key={i} className={`pricing-card ${p.featured ? 'featured' : ''}`}>
              <div className="pricing-name">{p.name}</div>
              <div className="pricing-price">
                <span className="currency">$</span>{p.price}
              </div>
              <div className="pricing-period">{p.period}{p.save ? ` · ${p.save}` : ''}</div>
              <ul className="pricing-features">
                {p.feats.map((f, j) => <li key={j}>{f}</li>)}
              </ul>
              <a href="#" className={`btn ${p.featured ? 'btn-primary' : 'btn-ghost'} pricing-cta`}>
                {p.price === 0 ? 'Start free' : 'Choose ' + p.name}
              </a>
            </div>
          ))}
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="footer-brand">
          <div className="footer-brand-row">
            <img src="assets/logo.png" alt="" />
            <div>
              <div style={{fontSize: 18, fontWeight: 600, letterSpacing: '-0.01em'}}>Master<span style={{color: 'var(--gold-1)'}}>AI</span></div>
              <div style={{fontSize: 11, color: 'var(--ink-faint)', fontFamily: 'JetBrains Mono', letterSpacing: '0.08em', textTransform: 'uppercase'}}>Think Smarter · Trade Sharper</div>
            </div>
          </div>
          <div className="footer-brand-desc">
            Master AI turns any chart screenshot into an institution-grade trade setup — built for scalpers, swing traders, and everyone between.
          </div>
          <div style={{display: 'flex', gap: 10}}>
            <a href="https://play.google.com/store/apps/details?id=com.masterai.app" target="_blank" rel="noopener" className="btn btn-ghost" style={{fontSize: 12, padding: '8px 14px'}}>
              <svg width="12" height="14" viewBox="0 0 12 14" fill="currentColor"><path d="M1 1v12l10-6z"/></svg>
              Google Play
            </a>
            <a href="https://apps.apple.com/in/app/meta-master-ai/6763297715" target="_blank" rel="noopener" className="btn btn-ghost" style={{fontSize: 12, padding: '8px 14px'}}>
              <svg width="12" height="14" viewBox="0 0 16 16" fill="currentColor"><path d="M13 5.2c-.1.1-1.9 1.1-1.9 3.3 0 2.5 2.2 3.4 2.3 3.4 0 0-.3 1-1 2-.7.9-1.4 1.8-2.4 1.8s-1.3-.6-2.4-.6c-1.1 0-1.5.6-2.4.6-1 0-1.7-.9-2.4-1.8C1.4 12 .5 9.6.5 7.3c0-3.7 2.4-5.7 4.7-5.7 1.2 0 2.2.7 3 .7.7 0 1.9-.8 3.2-.8.5 0 2.3 0 3.5 1.7-.1.1-2 1.1-2 3zM9.3 1c.6-.7 1.1-1.7 1-2.7-.9 0-2 .6-2.6 1.3-.6.7-1.1 1.7-.9 2.6 1 .1 2-.5 2.5-1.2z"/></svg>
              App Store
            </a>
            <a href="downloads/MasterAI.apk" download className="btn btn-ghost" style={{fontSize: 12, padding: '8px 14px'}}>
              <svg width="12" height="14" viewBox="0 0 24 24" fill="none"><path d="M12 3v11m-4-4l4 4 4-4M5 21h14" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Direct APK
            </a>
          </div>
        </div>
        <div className="footer-col">
          <h4>Product</h4>
          <a href="#features">Features</a>
          <a href="#pricing">Pricing</a>
          <a href="#demo">How it works</a>
          <a href="#signals">Signal library</a>
        </div>
        <div className="footer-col">
          <h4>Company</h4>
          <a href="#">About</a>
          <a href="#">Referral program</a>
          <a href="#">Support</a>
          <a href="#">Contact</a>
        </div>
        <div className="footer-col">
          <h4>Legal</h4>
          <a href="#">Terms</a>
          <a href="#">Privacy</a>
          <a href="#">Risk disclosure</a>
          <a href="#">Refunds</a>
        </div>
      </footer>
      <div className="footer-disclaimer">
        <p>Master AI provides trading analysis for educational and informational purposes only. It does not constitute financial advice or a guarantee of future results. Trading carries substantial risk of loss.</p>
        <span style={{fontFamily: 'JetBrains Mono', whiteSpace: 'nowrap'}}>© 2026 MasterAI · v2.4</span>
      </div>

      {/* TWEAKS PANEL */}
      <TweaksPanel title="Tweaks">
        <TweakSection title="Visual">
          <TweakSlider label="Gold intensity" value={tweaks.goldIntensity} min={0.3} max={1.5} step={0.05}
            onChange={(v) => setTweaks({goldIntensity: v})} />
          <TweakToggle label="Perspective grid" checked={tweaks.showGrid}
            onChange={(v) => setTweaks({showGrid: v})} />
          <TweakToggle label="Live ticker" checked={tweaks.showTicker}
            onChange={(v) => setTweaks({showTicker: v})} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);