// app.jsx — main app shell, tweaks panel, hero switcher, HIW & pricing renderers

const { useState, useEffect } = React;

// Forward email handler to global
window.handleSubscribe = function(e) {
  e.preventDefault();
  const emailInput = e.target.querySelector('input[type="email"]');
  const email = emailInput ? emailInput.value.trim() : '';
  if (email) {
    try { sessionStorage.setItem('smf_pending_email', email); } catch (_) {}
  }
  window.location.href = 'pricing.html';
};

// ─── HOW IT WORKS steps ───
const steps = [
  { num: 1, title: 'Subscribe',              body: 'Choose monthly or annual. One price, no upsells. Only the deals worth your attention get sent to you.' },
  { num: 2, title: 'Our filters do the work', body: 'We scan hundreds of SMF routes and apply smart filters — nonstop preference, realistic savings thresholds, and routes that matter to Sacramento travelers.' },
  { num: 3, title: 'You get the alert',      body: 'When a real deal lands, you get notified by email with the price, dates, airline, and everything you need to decide in 30 seconds.' },
  { num: 4, title: 'Book your flight',       body: 'Use the booking link in your alert to view the flight, adjust dates, and lock in your savings — directly through the airline or your preferred platform.' },
];

const stepIcons = [
  // mail
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1C1C1C" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>,
  // filter
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1C1C1C" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M3 5h18M6 12h12M10 19h4"/></svg>,
  // bell
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1C1C1C" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10 21a2 2 0 0 0 4 0"/></svg>,
  // plane
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#1C1C1C" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4z"/></svg>,
];

function HowItWorks() {
  return (
    <>
      {steps.map((s, i) => (
        <div className="hiw-step" key={i}>
          <div className="hiw-num">{s.num}</div>
          <div className="step-icon">{stepIcons[i]}</div>
          <h3>{s.title}</h3>
          <p>{s.body}</p>
        </div>
      ))}
    </>
  );
}

// ─── Pricing as boarding passes ───
function Pricing() {
  return (
    <>
      <Ticket
        code="SMF"
        dest="MONTHLY"
        destLabel=""
        codeLabel="Sacramento"
        cabin="STANDARD"
        priceWhole="4"
        priceCents="99"
        period="per month · billed monthly"
        features={[
          'SMF Standby newsletter included',
          'All SMF deal alerts',
          'Domestic & international',
          'Cancel anytime',
        ]}
        href="https://buy.stripe.com/9B65kC5fw3JEb31elrdby00"
        ctaLabel="Start Free Trial"
      />
      <Ticket
        featured
        code="SMF"
        dest="ANNUAL"
        destLabel="BEST VALUE"
        codeLabel="Sacramento"
        cabin="SAVE 33%"
        priceWhole="39"
        priceCents="99"
        period="per year · two months free"
        features={[
          'SMF Standby newsletter included',
          'Everything in Monthly',
          'Two months free vs monthly',
          'Early access to new features',
          'Locked-in rate, never increases',
          'Cancel anytime',
        ]}
        href="https://buy.stripe.com/3cI7sKfUa7ZU2wvdhndby02"
        ctaLabel="Start Free Trial"
      />
    </>
  );
}

function Ticket({ featured, code, dest, codeLabel, destLabel, cabin, priceWhole, priceCents, period, features, href, ctaLabel }) {
  return (
    <div className={'ticket' + (featured ? ' featured' : '')}>
      <div className="ticket-header">
        <span>✈  DEAL ALERTS</span>
        <span className="ticket-badge">{cabin}</span>
      </div>

      <div className="ticket-body">
        <div className="ticket-route">
          <div className="ticket-route-col">
            <span className="ticket-route-code">{code}</span>
            <span className="ticket-route-label">{codeLabel}</span>
          </div>
          <div className="ticket-route-path">
            <svg width="20" height="14" viewBox="0 0 20 14" fill="none">
              <path d="M2 12 L18 2 M18 2 L18 8 M18 2 L12 2" stroke="#1C1C1C" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <div className="ticket-route-col" style={{ alignItems: 'flex-end' }}>
            <span className="ticket-route-code">{dest}</span>
            <span className="ticket-route-label">{destLabel}</span>
          </div>
        </div>

        <div className="ticket-price-row">
          <span className="ticket-price"><sup>$</sup>{priceWhole}</span>
          <span className="ticket-cents">.{priceCents}</span>
        </div>
        <div className="ticket-period">{period}</div>

        <ul className="ticket-features">
          {features.map((f, i) => (
            <li key={i}><span className="check">✓</span>{f}</li>
          ))}
        </ul>
      </div>

      <div className="ticket-stub">
        <a href={href} className="ticket-btn">
          <span>{ctaLabel}</span>
          <span className="arrow">→</span>
        </a>
      </div>
    </div>
  );
}

// ─── App: hero switcher + tweaks panel ───
function App() {
  const [tweaks, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  const variant = tweaks.heroVariant || 'skyline';
  const HeroComponent =
    variant === 'editorial' ? window.HeroEditorial :
    variant === 'postcard'  ? window.HeroPostcard :
                              window.HeroSkyline;

  return (
    <>
      <HeroComponent/>
      <TweaksPanel title="Tweaks">
        <TweakSection title="Hero layout">
          <TweakRadio
            label="Variant"
            value={variant}
            onChange={(v) => setTweak('heroVariant', v)}
            options={[
              { value: 'skyline',   label: 'Skyline' },
              { value: 'editorial', label: 'Editorial' },
              { value: 'postcard',  label: 'Postcard' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

// Mount hero (+ tweaks)
const heroMount = document.getElementById('hero-mount');
ReactDOM.createRoot(heroMount).render(<App/>);

// Mount HIW steps into pre-existing container
const hiwMount = document.getElementById('hiw-grid');
ReactDOM.createRoot(hiwMount).render(<HowItWorks/>);

// Mount pricing
const priceMount = document.getElementById('pricing-mount');
ReactDOM.createRoot(priceMount).render(<Pricing/>);