/* global React */

function IndicatorPage({ setRoute }) {
  return (
    <div className="page">

      {/* —— CLEAN CENTERED HERO —— */}
      <section style={{ padding: "80px 24px 72px", textAlign: "center", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 640, margin: "0 auto" }}>
          <span className="t-mono-label" style={{ color: "var(--acc)" }}>// TRADINGVIEW · PROPRIETARY TOOL</span>
          <h1 style={{ marginTop: 20, fontSize: "clamp(36px, 5vw, 60px)", fontWeight: 700, letterSpacing: "-0.03em", lineHeight: 1.1 }}>
            TraderDaddy <span className="t-serif-italic" style={{ color: "var(--acc)" }}>Pro Suite</span>
          </h1>
          <p className="t-lede" style={{ marginTop: 20, maxWidth: 560, margin: "20px auto 0" }}>
            Stop trading blind. Triple-confirmation signals for TradingView. Zero guesswork.
          </p>
        </div>
      </section>

      {/* —— THREE PILLARS —— */}
      <section style={{ borderBottom: "1px solid var(--line)" }}>
        <div className="container">
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderLeft: "1px solid var(--line)" }}>
            {[
              { emoji: "📊", name: "Oscillator", sub: "Big Picture Trend" },
              { emoji: "📈", name: "Volume",     sub: "Real-Time Pressure" },
              { emoji: "🎯", name: "Overlay",    sub: "Entry & Exit Zones" },
            ].map(({ emoji, name, sub }) => (
              <div key={name} style={{ textAlign: "center", padding: "56px 32px", borderRight: "1px solid var(--line)" }}>
                <div style={{ fontSize: 48 }}>{emoji}</div>
                <div style={{ marginTop: 20, color: "var(--ink-0)", fontWeight: 600, fontSize: 18 }}>{name}</div>
                <div className="t-mono" style={{ fontSize: 12, color: "var(--ink-3)", marginTop: 8, letterSpacing: "0.06em" }}>{sub.toUpperCase()}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* —— PRICING + CTA —— */}
      <section style={{ padding: "80px 24px", textAlign: "center", borderBottom: "1px solid var(--line)" }}>
        <div style={{ maxWidth: 560, margin: "0 auto" }}>
          <div style={{ fontSize: "clamp(48px, 6vw, 80px)", fontWeight: 700, color: "var(--acc)", letterSpacing: "-0.04em", lineHeight: 1 }}>
            Only $6.99
            <span style={{ fontSize: "0.4em", fontWeight: 400, color: "var(--ink-2)", letterSpacing: 0 }}>/mo</span>
          </div>
          <div className="t-mono" style={{ marginTop: 16, fontSize: 13, color: "var(--ink-3)" }}>
            · 500+ Active Traders &nbsp;·&nbsp; All Markets &nbsp;·&nbsp; Instant Access
          </div>

          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", justifyContent: "center", marginTop: 28 }}>
            {["✓ All Markets", "✓ All Timeframes", "✓ No Repainting"].map((p) => (
              <div key={p} style={{ padding: "8px 20px", border: "1px solid var(--line)", borderRadius: 999, fontSize: 13, color: "var(--ink-1)" }}>{p}</div>
            ))}
          </div>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", justifyContent: "center", marginTop: 36 }}>
            <a
              href="https://www.traderdaddyindicator.com/"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-primary"
              style={{ fontSize: 16, padding: "15px 36px" }}
            >
              Start Trading Smarter →
            </a>
            <a
              href="https://calendly.com/thetraderdaddy1/10min"
              target="_blank"
              rel="noopener noreferrer"
              className="btn btn-ghost"
            >
              Book a free 10-min call
            </a>
          </div>
          <div className="t-mono" style={{ marginTop: 14, fontSize: 11, color: "var(--ink-3)" }}>
            CANCEL ANYTIME · TRADINGVIEW REQUIRED · NO REPAINTING
          </div>
        </div>
      </section>

      {/* —— HOW IT WORKS —— */}
      <section style={{ background: "var(--bg-1)", borderBottom: "1px solid var(--line)" }}>
        <div className="container method-grid">
          <div>
            <span className="t-mono-label">// HOW IT WORKS</span>
            <h2 className="t-h2" style={{ marginTop: 12 }}>
              Three signals. <span className="t-serif-italic" style={{ color: "var(--acc)" }}>One decision.</span>
            </h2>
          </div>
          <div className="method-body">
            <p className="t-lede">
              The Oscillator reads the big picture trend. The Volume component shows real-time buying and selling pressure.
              The Overlay paints entry and exit zones directly on your chart. When all three agree — that's your trade.
            </p>
            <div className="method-list" style={{ marginTop: 32 }}>
              {[
                ["No black box",       "Every signal has a reason. You'll know why it fired."],
                ["No repainting",      "What prints stays. No second-guessing your chart history."],
                ["Backed by sessions", "Learn to read it alongside the team in live mentorship sessions."],
              ].map(([k, v], i) => (
                <div key={k} className="method-row">
                  <span className="t-mono" style={{ color: "var(--ink-3)", fontSize: 12, width: 28 }}>0{i + 1}</span>
                  <span style={{ color: "var(--ink-0)", fontWeight: 500, width: 160 }}>{k}</span>
                  <span style={{ color: "var(--ink-2)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* —— PRACTICE ACCOUNT —— */}
      <section>
        <div className="container">
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", padding: "80px 0", gap: 20 }}>
            <span className="t-mono-label" style={{ color: "var(--acc)" }}>// BEFORE YOU GO LIVE</span>
            <h2 className="t-h2" style={{ maxWidth: 640 }}>
              Test it on a <span className="t-serif-italic">practice account first.</span>
            </h2>
            <p className="t-lede" style={{ maxWidth: 500 }}>
              Open a risk-free practice account through our Tradier partnership and run the Pro Suite on paper trades before committing real capital.
            </p>
            <a href="https://trade.tradier.com/trader-daddy/" target="_blank" rel="noopener noreferrer"
               className="btn btn-primary" style={{ marginTop: 8 }}>
              Open a practice account →
            </a>
            <div className="t-mono" style={{ fontSize: 11, color: "var(--ink-3)" }}>FREE · NO COMMITMENT · REAL MARKET DATA</div>
          </div>
        </div>
      </section>

    </div>
  );
}

window.IndicatorPage = IndicatorPage;