/* pricing.jsx — Site v2.0 · Pricing & Mentorship */

// ════════════════════════════════════════════════════════════════
//  STORE LOCK OVERLAY
//  Set to false when the Whop store is live and you want to
//  unlock the pricing page. Nothing else needs changing.
// ════════════════════════════════════════════════════════════════
const STORE_LOCKED = true;

const WHOP_URL = 'https://whop.com/joined/exploit-logic/';
const DISCORD_URL = 'https://discord.gg/DsyYgn6X';

const PLANS = [
  {
    id: 'monthly',
    tag: 'Community · Monthly',
    price: '$50',
    per: '/ Month',
    blurb: 'Recurring access to the Ghost framework and the Exploit Logic Discord. Cancel anytime.',
    bullets: [
      'Ghost Indicator on TradingView',
      'Exploit Logic Discord Access',
      'Community Reads & Discussion',
      'All Future Indicator Updates',
      'Cancel Anytime',
    ],
    cta: 'Subscribe via Whop',
    style: 'plain',
  },
  {
    id: 'lifetime',
    tag: 'Community · Lifetime',
    badge: 'Best Value',
    price: '$800',
    per: 'One-Time',
    blurb: 'Pay once, keep Ghost forever. Every future update of the indicator is included for life.',
    bullets: [
      'Everything in Community Monthly',
      'Lifetime Indicator License',
      'Every Future Update Included',
      'Priority Bug & Question Support',
      'No Recurring Charge',
    ],
    cta: 'Buy Lifetime via Whop',
    style: 'feature',
  },
  {
    id: 'mentorship',
    tag: 'Mentorship · Separate Program',
    priceLabel: 'Weekly 1-on-1 Sessions',
    blurb: 'A separate one-on-one program — billed weekly. Every private tool, strategy, and a deep dive into my trading logic and mental fortitude, taught directly.',
    bullets: [
      'Weekly 1-on-1 Sessions With Me',
      'All My Private Tools & Strategies',
      'Ghost Indicator Access Included',
      'Dedicated Discord Channel',
      'Personal Orientation Call',
      'Premium · Billed Weekly via Whop',
    ],
    cta: 'Apply via Whop',
    style: 'plain',
  },
];

function PlanCard({ p }) {
  return (
    <div className={'plan-card' + (p.style === 'feature' ? ' is-feature' : '')}>
      <div className="plan-head">
        <div className="plan-tag">{p.tag}</div>
        {p.badge && <div className="plan-badge">{p.badge}</div>}
      </div>
      <div className={`plan-price ${p.priceLabel ? 'is-label' : ''}`}>
        {p.priceLabel ? (
          <span className="price-label">{p.priceLabel}</span>
        ) : (
          <>
            <span className="amt">{p.price}</span>
            <span className="per">{p.per}</span>
          </>
        )}
      </div>
      <p className="plan-blurb">{p.blurb}</p>
      <ul className="plan-list">
        {p.bullets.map((b, i) => (
          <li key={i}><span className="tick">✓</span> {b}</li>
        ))}
      </ul>
      <a className={'btn ' + (p.style === 'feature' ? 'btn-primary' : 'btn-ghost')}
         href={WHOP_URL} target="_blank" rel="noopener noreferrer">
        {p.cta} →
      </a>
      <div className="plan-foot">Processed Securely Through the Exploit Logic Whop Store</div>
    </div>
  );
}

function UsernameForm() {
  const [submitted, setSubmitted] = useS(false);
  const [plan, setPlan] = useS('monthly');
  return submitted ? (
    <div className="callout" style={{ maxWidth: 720 }}>
      <span className="callout-tag">Got It · Welcome Aboard</span>
      <p>
        Your username is in. I'll grant TradingView indicator access within a few hours
        — usually faster.{' '}
        {plan === 'mentorship'
          ? <>You'll also receive a separate <strong>orientation invite</strong> within 24 hours to schedule your kickoff call and set your cadence.</>
          : <>Check your Whop receipt for the Discord invite link.</>}
      </p>
    </div>
  ) : (
    <form className="contact-form username-form" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
      <label>
        <span>TradingView Username</span>
        <input required type="text" name="tv" placeholder="@your_tv_username" autoComplete="off" />
      </label>
      <label>
        <span>Whop Order Email</span>
        <input required type="email" name="email" placeholder="The email on your Whop receipt" />
      </label>
      <label>
        <span>Plan Purchased</span>
        <select name="plan" value={plan} onChange={(e) => setPlan(e.target.value)}>
          <option value="monthly">Community · Monthly ($50/Mo)</option>
          <option value="lifetime">Community · Lifetime ($800)</option>
          <option value="mentorship">Mentorship · Weekly (Separate Program)</option>
        </select>
      </label>
      <label>
        <span>Anything I Should Know</span>
        <textarea rows={4} name="notes" placeholder="Optional. Preferred call cadence, time zone, questions, etc." />
      </label>
      <div>
        <button type="submit" className="btn btn-primary">Submit Username →</button>
        <span style={{ marginLeft: 14, fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--mono)', letterSpacing: '0.06em' }}>
          NO PAYMENT INFO COLLECTED HERE — WHOP HANDLES THAT
        </span>
      </div>
    </form>
  );
}

const FAQ_ITEMS = [
  {
    q: 'How Does Payment Actually Work?',
    a: 'All checkout runs through the Exploit Logic Whop Store. Click any plan button above and you are sent straight to Whop — card, Apple Pay, Google Pay, and crypto are all supported. Receipts and renewals are managed there.',
  },
  {
    q: 'Why Do I Have to Submit My TradingView Username?',
    a: 'Ghost is an invite-only script on TradingView, so I have to add your account by hand after payment. Once submitted, access usually goes live within a few hours. The script then appears in your "Invite-Only Scripts" panel inside TradingView.',
  },
  {
    q: 'What Is the Difference Between Monthly and Lifetime?',
    a: 'Mechanically, nothing — same indicator, same Discord, same updates. Lifetime is a one-time payment that never renews. Monthly is a recurring subscription you can cancel any time from your Whop account.',
  },
  {
    q: 'How Does Mentorship Work, and Is It the Same Thing as Community?',
    a: 'No — mentorship is a completely separate program from Community access, with separate billing. Community is monthly or lifetime; mentorship is billed weekly through the Whop store. On the orientation call we set the session cadence and time-zone slot, you get a dedicated 1-on-1 Discord channel, and indicator access is included for as long as you are enrolled.',
  },
  {
    q: 'Do You Refund?',
    a: 'Lifetime refunds are honoured for 7 days as long as you have not requested invite-only access. Monthly is cancel-anytime, no refund on the in-flight billing period. Mentorship is billed weekly so you can stop at any week boundary; the in-flight week is non-refundable once the session is booked.',
  },
  {
    q: 'Is This Financial Advice?',
    a: 'No. Ghost is an educational decision-support indicator and the mentorship is a teaching arrangement. Nothing in any plan constitutes investment, trading, financial, legal, or tax advice. Read the Disclaimer.',
  },
];

function Faq() {
  const [open, setOpen] = useS(0);
  return (
    <div className="accordion">
      {FAQ_ITEMS.map((it, i) => (
        <div key={i} className={'acc-item' + (i === open ? ' open' : '')}>
          <button className="acc-head" onClick={() => setOpen(o => o === i ? -1 : i)}>
            <div className="row">
              <span className="meta">{('0' + (i + 1)).slice(-2)} · FAQ</span>
              <span className="name">{it.q}</span>
            </div>
            <span className="acc-chev">›</span>
          </button>
          {i === open && (
            <div className="acc-body">
              <p>{it.a}</p>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}


function Pricing() {
  return (
    <>
      {STORE_LOCKED && <StoreLockOverlay config={{
        staticMascot: true,
        eyebrow: 'Store Opening Soon',
        title: 'Forward-Testing In Progress.',
        deck: 'Ghost is locked while we finish the Final Round of Forward Tests.',
        points: [
          'No Waitlist — Fair Launch When The Store Opens',
          'Early Founders Get The Lowest Lifetime Price',
          'Indicator + Course + Discord, Day One',
        ],
        actions: [
          { label: 'Start The Course Free', href: 'course.html', primary: true },
          { label: 'Read The Guide', href: 'guide.html' },
        ],
        foot: 'No Payment Endpoints Active. Patience > FOMO.',
      }} />}
      <Nav current="pricing" />

      {/* HERO */}
      <section className="hero">
        <div className="hero-eyebrow"><span className="accent">PRICING</span> · Community & Mentorship · 2026</div>
        <h1>Join <span className="hero-logo-mark" role="img" aria-label="GHOST"></span>.<br/>Trade With the <span className="em">Stack</span>.</h1>
        <p className="hero-deck">
          Two products. <strong style={{ color: 'var(--ink)' }}>Community access</strong> — the Ghost indicator, the
          Exploit Logic Discord, and every future update, monthly or lifetime. <strong style={{ color: 'var(--ink)' }}>Mentorship</strong>{' '}
          is a separate, premium program billed weekly. Both processed through the Exploit Logic Whop Store.
        </p>
        <div className="hero-cta-row">
          <a className="btn btn-primary" href="#plans">See the Plans ↓</a>
          <a className="btn btn-ghost" href="#how-it-works">How It Works</a>
        </div>
      </section>

      {/* PLAN CARDS */}
      <section className="section" id="plans">
        <div className="section-eyebrow"><span className="accent">·01</span> · Plans</div>
        <h2 className="section-title">Pick a Plan. Pay Through Whop. Add to TradingView.</h2>
        <p className="section-deck">
          The two Community plans share the same product — pick the cadence that fits. Mentorship is a separate,
          weekly-billed program for traders who want to work with me directly.
        </p>

        <div className="plan-grid">
          {PLANS.map(p => <PlanCard key={p.id} p={p} />)}
        </div>

        {/* 7-day trial — compact tile */}
        <a className="trial-tile" href={WHOP_URL} target="_blank" rel="noopener noreferrer">
          <div className="trial-meta">
            <span className="trial-tag">Trial · No Charge</span>
            <span className="trial-pulse" aria-hidden="true"></span>
          </div>
          <div className="trial-body">
            <h3 className="trial-title">7-Day Free Access</h3>
            <p className="trial-blurb">
              Full Ghost indicator, every module, on your live charts. Cancel inside the window and you pay nothing — keep going and the Monthly plan kicks in at $50. Upgrade to <strong style={{ color: 'var(--ink)' }}>Lifetime</strong> or apply for <strong style={{ color: 'var(--ink)' }}>Mentorship</strong> any time.
            </p>
          </div>
          <div className="trial-cta">
            <span className="trial-cta-label">Start Trial via Whop</span>
            <span className="trial-arrow" aria-hidden="true">→</span>
          </div>
        </a>

        <div className="plan-note">
          <span className="plan-note-tag">Whop Store</span>
          <p>
            Every checkout link above sends you to <strong>whop.com/joined/exploit-logic</strong>. Whop handles
            card, Apple Pay, Google Pay, and crypto — plus your receipts, renewals, and invoices.
            I never see your card details.
          </p>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section" id="how-it-works">
        <div className="section-eyebrow"><span className="accent">·02</span> · How It Works</div>
        <h2 className="section-title">From Checkout to Live Indicator in Three Steps.</h2>
        <p className="section-deck">
          The path is the same for every plan. Mentorship adds a single extra step — an orientation call to set cadence.
        </p>

        <div className="feature-grid">
          <div className="feature">
            <div className="ico">01 · Checkout</div>
            <h4>Pay via the Whop Store</h4>
            <p>Click any plan above. You'll land on the Exploit Logic Whop Store. Pick your method — card, Apple/Google Pay, or crypto — and complete the order. Receipts are automatic.</p>
          </div>
          <div className="feature">
            <div className="ico">02 · Submit Username</div>
            <h4>Drop Your TradingView ID</h4>
            <p>After payment clears, the Whop confirmation page asks for your exact TradingView username. The same short form lives further down this page if you'd rather submit it here.</p>
          </div>
          <div className="feature">
            <div className="ico">03 · Access Granted</div>
            <h4>Indicator + Discord Unlocked</h4>
            <p>I add your account to the Ghost invite list — usually within a few hours. The script appears under your TradingView "Invite-Only Scripts." Discord invite is in your Whop receipt.</p>
          </div>
        </div>

        <div className="callout" style={{ marginTop: 28 }}>
          <span className="callout-tag">Mentorship · Different Path</span>
          <p>
            Mentorship is a separate program — applications go through the same Whop store but the billing is
            <strong> weekly, not monthly or lifetime</strong>. After you apply, you'll receive an{' '}
            <strong>orientation invite within 24 hours</strong> to schedule a kickoff call, set your time-zone slot,
            and walk through the private toolbox before the first working session begins.
          </p>
        </div>
      </section>

      {/* USERNAME FORM */}
      <section className="section" id="submit-username">
        <div className="section-eyebrow"><span className="accent">·03</span> · After Checkout</div>
        <h2 className="section-title">Submit Your TradingView Username.</h2>
        <p className="section-deck">
          Already paid? Drop your username here so I can grant indicator access. The same form is shown on
          the Whop confirmation page — either path works, you only need to submit once.
        </p>
        <UsernameForm />
      </section>

      {/* DISCORD */}
      <section className="section" id="discord">
        <div className="section-eyebrow"><span className="accent">·04</span> · Community</div>
        <h2 className="section-title">Inside the Exploit Logic Discord.</h2>
        <p className="section-deck">
          A small, focused community of traders running the Ghost framework. Every plan above includes access — it's
          where the framework actually lives between TradingView sessions.
        </p>

        <div className="feature-grid">
          <div className="feature">
            <div className="ico">Goal · Read</div>
            <h4>One Framework, One Vocabulary</h4>
            <p>Everyone in the room reads the same stack. Push, Score, Status, Bias, Trigger. No "what indicator are you using" — we're all using Ghost.</p>
          </div>
          <div className="feature">
            <div className="ico">Goal · Wait</div>
            <h4>Patience as a Group Discipline</h4>
            <p>The Discord is biased toward stand-down posts. CHOP calls, vetoed setups, and "not yet" reads are valued the same as winning trades.</p>
          </div>
          <div className="feature">
            <div className="ico">Goal · Decide</div>
            <h4>Live Reads, Real Charts</h4>
            <p>Members post the dashboard, the chart, and the read — before the trigger fires. The room critiques the read, not the P&amp;L.</p>
          </div>
          <div className="feature">
            <div className="ico">Goal · Improve</div>
            <h4>Journals, Reviews, Updates</h4>
            <p>Weekly journal threads. Indicator changelog announcements. Direct line to me for bug reports and feature requests.</p>
          </div>
        </div>

        <div className="cta-strip" style={{ marginTop: 28 }}>
          <div>
            <h3>Already a Member?</h3>
            <p>If you've already paid, your invite link is in your Whop receipt. Lost it? Email me from the contact page and I'll resend.</p>
          </div>
          <a className="btn btn-primary" href={DISCORD_URL} target="_blank" rel="noopener noreferrer">Join the Discord →</a>
        </div>
      </section>

      {/* FAQ */}
      <section className="section" id="faq">
        <div className="section-eyebrow"><span className="accent">·05</span> · FAQ</div>
        <h2 className="section-title">Common Questions.</h2>
        <p className="section-deck">If yours isn't here, the contact page has an email form and a TradingView comments link.</p>
        <Faq />
      </section>

      {/* FINAL CTA */}
      <section className="section">
        <div className="cta-strip">
          <div>
            <h3>Ready to Run the Stack?</h3>
            <p>Pick a plan, complete checkout on Whop, drop your TradingView username — and Ghost loads on your chart.</p>
          </div>
          <a className="btn btn-primary" href="#plans">Back to Plans ↑</a>
        </div>
      </section>

      <Footer />
    </>
  );
}

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