/* global React, ReactDOM, Logo, IconCheck, IconArrow, IconShield, IconLock, IconImport, IconBolt,
   GfxDashboard, GfxTradeLog, GfxOpenTrades, GfxMissedTrades, GfxCalendar, GfxEquityCurve, GfxImport,
   GfxMFEMAE, GfxAIAnalysis, GfxTimeOfDay, GfxDayOfWeek, GfxSituational, GfxStrategyMix,
   GfxMonthlyReport, GfxReview, GfxPrintBook, GfxMarketMonitor, GfxSecurity */
const { useEffect: useE } = React;

function useReveal() {
  useE(() => {
    const els = Array.from(document.querySelectorAll('.reveal'));
    const showAll = () => els.forEach((el) => el.classList.add('in'));
    let io;
    if ('IntersectionObserver' in window) {
      io = new IntersectionObserver((ents) => {
        ents.forEach((en) => { if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); } });
      }, { threshold: 0.12, rootMargin: '0px 0px -6% 0px' });
      els.forEach((el) => io.observe(el));
    } else { showAll(); }
    const t = setTimeout(showAll, 1200);
    window.addEventListener('load', showAll);
    return () => { io && io.disconnect(); clearTimeout(t); window.removeEventListener('load', showAll); };
  }, []);
}

function Nav() {
  return (
    <nav className="nav scrolled">
      <div className="wrap nav-inner">
        <a className="brand" href="/login"><Logo /> ProTradeJournal</a>
        <div className="nav-links">
          <a href="#journal">Journal</a>
          <a href="#analytics">Analytics</a>
          <a href="#review">Review</a>
          <a href="#monitor">Market Monitor</a>
          <a href="#security">Security</a>
        </div>
        <div className="nav-actions">
          <a className="nav-link-btn" href="/login">← Home</a>
          <a className="btn btn-primary" href="/login#top">Get started free</a>
        </div>
      </div>
    </nav>);
}

function FHero() {
  const toc = [
    ['Dashboard', '#dashboard'], ['Journal', '#journal'], ['Analytics', '#analytics'],
    ['Review', '#review'], ['Market Monitor', '#monitor'], ['Privacy', '#security'],
  ];
  return (
    <header className="f-hero">
      <div className="hero-glow" />
      <div className="dotfield" />
      <div className="wrap">
        <span className="eyebrow reveal">Product · Features</span>
        <h1 className="reveal d1">Every tool to turn trades into a <span className="hl">repeatable edge</span></h1>
        <p className="reveal d2">From auto-imported fills to AI-written monthly reviews — ProTradeJournal is a complete operating system for serious traders. Here's everything inside.</p>
        <div className="f-toc reveal d3">
          {toc.map((t) => <a key={t[0]} href={t[1]}>{t[0]}</a>)}
        </div>
      </div>
    </header>);
}

// reusable big showcase row
function ShowRow({ flip, pill, title, lead, list, children }) {
  return (
    <div className={`show-row reveal ${flip ? 'flip' : ''}`}>
      <div className="show-copy">
        {pill && <span className="pill">{pill}</span>}
        <h3>{title}</h3>
        <p className="lead">{lead}</p>
        {list && <ul className="feat-list">{list.map((li, i) => (
          <li key={i}><span className="ck"><IconCheck size={14} /></span><span><b>{li[0]}</b> {li[1]}</span></li>
        ))}</ul>}
      </div>
      <div className="show-media">{children}</div>
    </div>);
}

function SubCard({ tag, title, desc, children }) {
  return (
    <div className="sub-card reveal">
      <div className="sc-media">{children}</div>
      <span className="sc-tag">{tag}</span>
      <h4>{title}</h4>
      <p>{desc}</p>
    </div>);
}

function ModuleHead({ no, title, sub }) {
  return (
    <div className="module-head reveal">
      <span className="module-no">{no}</span>
      <h2>{title}</h2>
      {sub && <p>{sub}</p>}
    </div>);
}

function Features() {
  return (
    <main>
      {/* 2.1 Dashboard */}
      <section className="module" id="dashboard">
        <div className="wrap">
          <ModuleHead no="01" title="Dashboard" sub="Your whole trading life on one screen — the moment you log in." />
          <ShowRow
            pill="At a glance"
            title="Know exactly where you stand"
            lead="Net P&L, win rate, profit factor and a live equity curve — recalculated in ₹ the instant a trade lands. No spreadsheets, no lag."
            list={[
              ['Live KPIs', '— P&L, win rate, profit factor, expectancy.'],
              ['Equity curve', 'front and centre, updated in real time.'],
              ['Drill anywhere', '— click any metric to see the trades behind it.'],
            ]}>
            <GfxDashboard />
          </ShowRow>
        </div>
      </section>

      {/* 2.2 Journal */}
      <section className="module" id="journal">
        <div className="wrap">
          <ModuleHead no="02" title="Journal" sub="The core logbook — every trade, open or closed, imported or manual, in one searchable place." />
          <div className="sub-grid">
            <SubCard tag="a · Trade log" title="Complete trade log" desc="Every fill with side, size, entry, exit and P&L — filter and search across your whole history.">
              <GfxTradeLog />
            </SubCard>
            <SubCard tag="b · Open trades" title="Open positions" desc="Track live exposure and unrealised P&L on every position you're still holding.">
              <GfxOpenTrades />
            </SubCard>
            <SubCard tag="c · Missed trades" title="Missed trades" desc="Log the setups you didn't take and see the P&L you left on the table — learn from inaction.">
              <GfxMissedTrades />
            </SubCard>
            <SubCard tag="d · Calendar" title="Calendar view" desc="A colour-coded P&L heatmap of your trading days, weeks and months at a glance.">
              <GfxCalendar />
            </SubCard>
            <SubCard tag="e · Equity curve" title="Equity curve" desc="Watch your account grow trade by trade, with drawdowns and peaks marked clearly.">
              <GfxEquityCurve />
            </SubCard>
            <SubCard tag="f · Import" title="Upload & API import" desc="Drop a CSV/XLSX tradebook or connect your broker API for hands-free, automatic syncing.">
              <GfxImport />
            </SubCard>
          </div>
        </div>
      </section>

      {/* 2.3 Analytics */}
      <section className="module" id="analytics">
        <div className="wrap">
          <ModuleHead no="03" title="Analytics" sub="Where the edge hides. Slice your trades by time, behaviour and strategy — and let AI surface what you'd miss." />
          <ShowRow
            flip
            pill="Trade quality"
            title="MFE & MAE — were you right, or just early?"
            lead="See the maximum favourable and adverse excursion of every trade. Learn how much of each move you actually captured, and where your stops and targets are bleeding edge."
            list={[
              ['Capture rate', '— % of the max move you kept.'],
              ['Heat taken', '— how much you sat through before it worked.'],
              ['Tune exits', 'with data instead of guesswork.'],
            ]}>
            <GfxMFEMAE />
          </ShowRow>
          <div className="sub-grid" style={{ marginTop: 36 }}>
            <SubCard tag="b · AI analysis" title="AI trade analysis" desc="AI reads your full history and surfaces the patterns, leaks and A+ setups hiding in your data.">
              <GfxAIAnalysis />
            </SubCard>
            <SubCard tag="c·i · Time of day" title="Trades by time of day" desc="Find your most and least profitable hours so you trade your best windows.">
              <GfxTimeOfDay />
            </SubCard>
            <SubCard tag="c·ii · Day of week" title="Trades by day of week" desc="Spot the weekdays that consistently make — or cost — you money.">
              <GfxDayOfWeek />
            </SubCard>
            <SubCard tag="c·iii · Awareness" title="Situational awareness" desc="Correlate outcomes with your state of mind — plan-following vs FOMO and revenge trades.">
              <GfxSituational />
            </SubCard>
            <SubCard tag="d · Breakdown" title="Strategy, mistakes & exits" desc="Rank every strategy, recurring mistake and exit type by their real contribution to P&L.">
              <GfxStrategyMix />
            </SubCard>
            <SubCard tag="e · AI report" title="AI monthly report" desc="A written, graded monthly review of your trading — wins, leaks and what to fix next month.">
              <GfxMonthlyReport />
            </SubCard>
          </div>
        </div>
      </section>

      {/* 2.4 Review */}
      <section className="module" id="review">
        <div className="wrap">
          <ModuleHead no="04" title="Review" sub="Replay every trade on the chart and journal it properly — the habit that compounds into mastery." />
          <ShowRow
            pill="Chart replay"
            title="See entry and exit on the chart, then journal it"
            lead="Pull up the exact chart with your entry and exit marked. Record your setup, the mistake you made, and your exit reason — building a structured, reviewable record of every decision."
            list={[
              ['Marked entry/exit', 'on a clean candlestick chart.'],
              ['Tag it', '— setup, mistake and exit reason in seconds.'],
              ['Export a book', '— print-ready PDF of reviewed charts to study offline.'],
            ]}>
            <GfxReview />
          </ShowRow>
          <div className="sub-grid cols-2" style={{ marginTop: 36 }}>
            <SubCard tag="a · Offline" title="Print a review book" desc="Generate a clean, book-like PDF — one reviewed chart per page — to flip through away from the screen.">
              <GfxPrintBook />
            </SubCard>
            <SubCard tag="Structured" title="Setup · mistake · exit" desc="Consistent fields on every trade make weekly and monthly reviews fast, honest and repeatable.">
              <GfxAIAnalysis />
            </SubCard>
          </div>
        </div>
      </section>

      {/* 2.5 Market Monitor */}
      <section className="module" id="monitor">
        <div className="wrap">
          <ModuleHead no="05" title="Stock Bee Market Monitor" sub="Trade with the tape, not against it." />
          <ShowRow
            flip
            pill="Market context"
            title="Read the market's health in real time"
            lead="A Stock Bee–style market monitor: index moves, advancers vs decliners, new highs vs lows and 4% breadth — so you size up in strong markets and stand aside in weak ones."
            list={[
              ['Breadth gauges', '— advancers, decliners, NH-NL.'],
              ['4% movers', 'to gauge real momentum under the indices.'],
              ['Context, instantly', '— know the regime before you trade it.'],
            ]}>
            <GfxMarketMonitor />
          </ShowRow>
        </div>
      </section>

      {/* 3 Security */}
      <section className="module" id="security">
        <div className="wrap">
          <ModuleHead no="06" title="Data security & privacy" sub="Your trading data is yours. We protect it like a bank — and never sell it." />
          <div className="show-row reveal">
            <div className="show-copy">
              <span className="pill">Built-in by default</span>
              <h3>Bank-grade security, no compromises</h3>
              <p className="lead">Everything is encrypted, broker access is strictly read-only, and you can export or delete your data any time. We can't trade on your behalf, and we never share or sell your data.</p>
            </div>
            <div className="show-media">
              <div className="sec-rows">
                {[
                  [IconLock, 'AES-256 encryption', 'Encrypted in transit (TLS 1.3) and at rest.'],
                  [IconShield, 'Read-only broker access', 'We can read fills — never place or modify orders.'],
                  [IconImport, 'Full data export & delete', 'One-click export to CSV/PDF. Delete everything, instantly.'],
                  [IconBolt, 'Never sold, never shared', 'Your edge stays private. No ads, no data brokers.'],
                ].map((r, i) => {
                  const Ic = r[0];
                  return (
                    <div className="sr" key={i}>
                      <span className="si"><Ic size={18} /></span>
                      <div><div className="st">{r[1]}</div><div className="sd">{r[2]}</div></div>
                    </div>);
                })}
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>);
}

function CTA() {
  return (
    <section className="cta-band">
      <div className="wrap">
        <div className="cta-card reveal">
          <h2>Ready to find your edge?</h2>
          <p>Start journaling free for 30 days. No card required. Your most profitable trades are the ones you learn from.</p>
          <div className="hero-cta">
            <a className="btn btn-lg" style={{ background: '#fff', color: '#0c2418' }} href="/login#top">Create free account <IconArrow size={18} /></a>
            <a className="btn btn-lg" style={{ background: 'rgba(255,255,255,.12)', color: '#fff', border: '1px solid rgba(255,255,255,.28)' }} href="/login">Back to home</a>
          </div>
        </div>
      </div>
    </section>);
}

function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div className="foot-brand">
            <a className="brand" href="/login"><Logo /> ProTradeJournal</a>
            <p>The trading journal that turns your trade history into a measurable, repeatable edge. Made in India 🇮🇳 for Indian markets.</p>
          </div>
          <div className="foot-col">
            <h5>Features</h5>
            <a href="#dashboard">Dashboard</a><a href="#journal">Journal</a><a href="#analytics">Analytics</a><a href="#review">Review</a>
          </div>
          <div className="foot-col">
            <h5>More</h5>
            <a href="#monitor">Market Monitor</a><a href="#security">Security</a><a href="/login">Home</a>
          </div>
          <div className="foot-col">
            <h5>Company</h5>
            <a href="#" onClick={(e) => e.preventDefault()}>About</a><a href="#" onClick={(e) => e.preventDefault()}>Blog</a><a href="#" onClick={(e) => e.preventDefault()}>Contact</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 ProTradeJournal Technologies Pvt. Ltd. · For educational journaling only — not investment advice.</span>
          <span style={{ display: 'flex', gap: 22 }}>
            <a href="#security">Privacy</a><a href="#" onClick={(e) => e.preventDefault()}>Terms</a><a href="#security">Security</a>
          </span>
        </div>
      </div>
    </footer>);
}

function App() {
  useReveal();
  return (
    <React.Fragment>
      <Nav />
      <FHero />
      <Features />
      <CTA />
      <Footer />
    </React.Fragment>);
}

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