// Campaign runs ~35 days (5 weeks) — used to compute per-day equivalent.
const CAMPAIGN_DAYS = 35;
const perDay = (price) => (Number(price) / CAMPAIGN_DAYS).toFixed(2);

/**
 * Stripe checkout URLs — two sets:
 *   - standard: immediate-launch campaigns (default, from homepage / Services / Results)
 *   - schedule: release-day scheduled campaigns (from Schedule.html)
 *
 * Same 4 packs on both paths — only the Stripe destination differs so Nico
 * can tell from the Stripe dashboard which flow the customer came from.
 *
 * CUSTOM (4th pack — "Main character energy"):
 *   - standard custom → for existing releases, immediate launch
 *   - schedule custom → for upcoming releases, launches on drop day
 */
const STRIPE_URLS = {
  standard: {
    starter: 'https://buy.stripe.com/00wcN5d3udu18RqdcC0oM0y',
    pro:     'https://buy.stripe.com/3cIeVdaVm89H4Ba1tU0oM0z',
    vip:     'https://buy.stripe.com/aFacN51kM4Xv9Vu1tU0oM0A',
    custom:  'https://buy.stripe.com/cNi8wP6F64Xv2t2c8y0oM0F',
  },
  schedule: {
    starter: 'https://buy.stripe.com/00w9ATaVmblT5Fe2xY0oM0B',
    pro:     'https://buy.stripe.com/7sY4gz7JafC9d7G7Si0oM0C',
    vip:     'https://buy.stripe.com/eVq5kDaVm1Lj3x6fkK0oM0D',
    custom:  'https://buy.stripe.com/bJebJ12oQ89H5Fe4G60oM0E',
  },
};

const TIERS = [
  {
    id: 'starter',
    name: 'Starter Pack',
    price: '147',
    tagline: '5-week optimized campaign',
    features: [
      'Fully managed Meta Ads campaign',
      '1 Spotify playlist placement',
      'Interest-based targeting build',
      'End-of-campaign performance report',
      'Email support',
    ],
  },
  {
    id: 'vip',
    name: 'VIP Pack',
    price: '287',
    tagline: '5-week optimized campaign',
    featured: true,
    features: [
      'Everything in Pro Pack',
      '8 Spotify playlist placements',
      '4 Apple Music placements',
      'Maximum ad spend allocation',
      'Priority campaign manager',
      'Live performance dashboard',
    ],
  },
  {
    id: 'pro',
    name: 'Pro Pack',
    price: '247',
    tagline: '5-week optimized campaign',
    features: [
      'Everything in Starter Pack',
      '4 Spotify playlist placements',
      'A/B visual testing built in',
      'Higher ad spend allocation',
      'Bi-weekly performance report',
    ],
  },
];

function PricingCard({ tier, selected, onSelect, mobile, stripeUrl }) {
  const [hovered, setHovered] = React.useState(false);
  const active = hovered || selected;

  function goToStripe(e) {
    e.stopPropagation();
    if (stripeUrl) {
      window.location.href = stripeUrl;
    }
  }

  return (
    <div
      onClick={() => onSelect(tier)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        flex: mobile ? 'none' : 1,
        width: mobile ? '100%' : 'auto',
        background: tier.featured
          ? 'linear-gradient(180deg, rgba(28,16,40,0.95) 0%, #0B0B12 100%)'
          : '#0B0B12',
        border: tier.featured
          ? `1px solid ${active ? 'rgba(201,76,255,0.55)' : 'rgba(94,43,255,0.35)'}`
          : `1px solid ${active ? 'rgba(255,255,255,0.1)' : 'rgba(255,255,255,0.06)'}`,
        borderRadius: '20px',
        padding: tier.featured ? '40px 28px' : '32px 28px',
        cursor: 'pointer',
        position: 'relative',
        transform: !mobile && active ? 'translateY(-6px)' : (!mobile && tier.featured ? 'translateY(-6px)' : 'translateY(0)'),
        transition: 'transform 400ms cubic-bezier(0.16,1,0.3,1), border-color 300ms, box-shadow 400ms',
        boxShadow: tier.featured
          ? active
            ? '0 0 0 1px rgba(201,76,255,0.2), 0 32px 80px rgba(94,43,255,0.2), 0 0 60px rgba(201,76,255,0.07)'
            : '0 0 0 1px rgba(94,43,255,0.08), 0 24px 60px rgba(94,43,255,0.14)'
          : active ? '0 24px 50px rgba(0,0,0,0.5)' : '0 8px 24px rgba(0,0,0,0.3)',
      }}
    >
      {tier.featured && (
        <>
          <div style={{
            position: 'absolute', top: '-1px', left: '50%', transform: 'translateX(-50%)',
            background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
            borderRadius: '0 0 10px 10px', padding: '5px 16px',
            fontSize: '10px', fontWeight: 700, color: '#F5F2FF',
            letterSpacing: '0.1em', textTransform: 'uppercase',
            fontFamily: "'JetBrains Mono', monospace", whiteSpace: 'nowrap',
          }}>Best deal</div>
          <div style={{
            position: 'absolute', top: 0, left: '20%', right: '20%', height: '1px',
            background: 'linear-gradient(90deg, transparent, rgba(201,76,255,0.5), transparent)',
          }} />
        </>
      )}

      <div style={{ marginBottom: '4px' }}>
        <span style={{
          fontSize: '11px', fontWeight: 700,
          color: tier.featured ? '#C94CFF' : '#7C7C90',
          letterSpacing: '0.12em', textTransform: 'uppercase',
        }}>{tier.name}</span>
      </div>

      <div style={{ marginBottom: '6px', display: 'flex', alignItems: 'flex-end', gap: '2px', lineHeight: 1 }}>
        <span style={{ color: tier.featured ? '#E7C8FF' : '#A1A1B3', fontSize: '20px', fontWeight: 400, marginBottom: '8px' }}>$</span>
        <span style={{
          fontSize: 'clamp(52px, 6vw, 68px)', fontWeight: 800,
          color: '#F5F2FF', letterSpacing: '-0.045em', lineHeight: 1,
        }}>{tier.price}</span>
      </div>

      {/* Per-day equivalent */}
      <div style={{
        color: tier.featured ? 'rgba(231,200,255,0.75)' : '#7C7C90',
        fontSize: '12px', fontWeight: 500,
        fontFamily: "'JetBrains Mono', monospace",
        letterSpacing: '-0.01em',
        marginBottom: '18px',
      }}>
        ≈ ${perDay(tier.price)}/day over {CAMPAIGN_DAYS} days
      </div>

      <p style={{ color: '#7C7C90', fontSize: '13px', lineHeight: 1.4, letterSpacing: '-0.01em', margin: '0 0 22px' }}>
        {tier.tagline}
      </p>

      <div style={{ height: '1px', background: tier.featured ? 'rgba(94,43,255,0.2)' : 'rgba(255,255,255,0.05)', margin: '0 0 22px' }} />

      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'flex', flexDirection: 'column', gap: '12px' }}>
        {tier.features.map(f => (
          <li key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: '10px' }}>
            <div style={{ flexShrink: 0, marginTop: '2px' }}>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <circle cx="8" cy="8" r="8" fill={tier.featured ? 'rgba(201,76,255,0.15)' : 'rgba(94,43,255,0.1)'}/>
                <path d="M4.5 8.2l2.3 2.3 4.4-4.8" stroke={tier.featured ? '#C94CFF' : '#8B5CFF'} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <span style={{ color: '#A1A1B3', fontSize: '13px', letterSpacing: '-0.01em', lineHeight: 1.45 }}>{f}</span>
          </li>
        ))}
      </ul>

      <button
        style={{
          width: '100%', height: '50px', borderRadius: '12px',
          background: tier.featured
            ? active ? 'linear-gradient(135deg, #8B5CFF, #C94CFF)' : 'linear-gradient(135deg, #5E2BFF, #C94CFF)'
            : active ? 'rgba(94,43,255,0.12)' : 'transparent',
          border: tier.featured ? 'none' : `1px solid ${active ? 'rgba(94,43,255,0.4)' : 'rgba(255,255,255,0.08)'}`,
          color: '#F5F2FF', fontSize: '14px', fontWeight: 700,
          letterSpacing: '-0.01em', cursor: 'pointer',
          transition: 'background 250ms, box-shadow 250ms',
          fontFamily: 'inherit',
          boxShadow: tier.featured && active ? '0 8px 24px rgba(94,43,255,0.3)' : 'none',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
        }}
        onClick={goToStripe}
      >
        Start today
        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
          <path d="M2.5 7h9M8 3.5l3.5 3.5L8 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </button>
    </div>
  );
}

/**
 * CustomPack — "Main character energy" 4th tier.
 * Horizontal layout (wider than tall), sits under the 3 standard cards
 * with a subtle divider above. No fixed price — Stripe handles custom
 * amount entry ($300+ minimum set on the Stripe Payment Link side).
 */
function CustomPack({ mobile, stripeUrl }) {
  const [hovered, setHovered] = React.useState(false);

  function goToStripe() {
    if (stripeUrl) {
      window.location.href = stripeUrl;
    }
  }

  return (
    <FadeIn delay={140}>
      <div style={{ marginTop: mobile ? '48px' : '72px', position: 'relative' }}>
        {/* Subtle divider */}
        <div style={{
          position: 'absolute', top: mobile ? '-24px' : '-36px',
          left: '10%', right: '10%', height: '1px',
          background: 'linear-gradient(90deg, transparent, rgba(201,76,255,0.25), transparent)',
        }} />

        {/* Tiny eyebrow above the card */}
        <div style={{
          textAlign: 'center',
          marginBottom: mobile ? '18px' : '24px',
          color: '#7C7C90', fontSize: '11px', fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          fontFamily: "'JetBrains Mono', monospace",
        }}>
          For artists who want more
        </div>

        {/* The card itself — horizontal layout */}
        <div
          onMouseEnter={() => setHovered(true)}
          onMouseLeave={() => setHovered(false)}
          style={{
            background: hovered
              ? 'linear-gradient(135deg, rgba(28,16,40,0.95) 0%, rgba(46,24,70,0.85) 50%, rgba(11,11,18,0.95) 100%)'
              : 'linear-gradient(135deg, rgba(22,14,36,0.9) 0%, rgba(32,18,52,0.75) 50%, rgba(11,11,18,0.9) 100%)',
            border: hovered
              ? '1px solid rgba(201,76,255,0.35)'
              : '1px solid rgba(201,76,255,0.18)',
            borderRadius: '20px',
            padding: mobile ? '28px 24px' : '36px 44px',
            position: 'relative',
            overflow: 'hidden',
            transition: 'background 400ms, border-color 300ms, box-shadow 400ms, transform 400ms',
            transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
            boxShadow: hovered
              ? '0 28px 70px rgba(94,43,255,0.22), 0 0 60px rgba(201,76,255,0.12)'
              : '0 16px 40px rgba(94,43,255,0.08), 0 0 40px rgba(201,76,255,0.04)',
            display: 'flex',
            flexDirection: mobile ? 'column' : 'row',
            alignItems: mobile ? 'stretch' : 'center',
            justifyContent: 'space-between',
            gap: mobile ? '22px' : '40px',
          }}
        >
          {/* Ambient glow inside the card */}
          <div style={{
            position: 'absolute', top: '-40%', right: '-10%',
            width: '520px', height: '420px', maxWidth: '100%',
            pointerEvents: 'none',
            background: 'radial-gradient(ellipse 50% 50% at 50% 50%, rgba(201,76,255,0.18) 0%, transparent 70%)',
            opacity: hovered ? 0.9 : 0.55,
            transition: 'opacity 500ms',
            filter: 'blur(10px)',
          }} />

          {/* Top accent line */}
          <div style={{
            position: 'absolute', top: 0, left: '25%', right: '25%', height: '1px',
            background: 'linear-gradient(90deg, transparent, rgba(201,76,255,0.55), transparent)',
          }} />

          {/* LEFT — content */}
          <div style={{ flex: 1, position: 'relative', zIndex: 1 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: '8px',
              background: 'rgba(201,76,255,0.12)',
              border: '1px solid rgba(201,76,255,0.28)',
              padding: '5px 12px', borderRadius: '100px',
              marginBottom: '16px',
            }}>
              <div style={{
                width: '5px', height: '5px', borderRadius: '50%',
                background: '#C94CFF',
                boxShadow: '0 0 8px #C94CFF',
              }} />
              <span style={{
                color: '#E7C8FF', fontSize: '10px', fontWeight: 700,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                fontFamily: "'JetBrains Mono', monospace",
              }}>
                Main character energy
              </span>
            </div>

            <h3 style={{
              fontSize: mobile ? 'clamp(26px,7.5vw,34px)' : 'clamp(30px,3.4vw,44px)',
              fontWeight: 800, letterSpacing: '-0.035em',
              lineHeight: 1.05,
              margin: '0 0 10px',
              background: 'linear-gradient(135deg, #F5F2FF 0%, #E7C8FF 60%, #C94CFF 120%)',
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text',
            }}>
              Write your own rules.
            </h3>

            <p style={{
              color: '#A1A1B3', fontSize: mobile ? '14px' : '15px',
              lineHeight: 1.55, letterSpacing: '-0.005em',
              margin: 0, maxWidth: '560px',
            }}>
              Custom spend from <span style={{ color: '#E7C8FF', fontWeight: 600 }}>$300+</span>. Bigger budget, bigger markets, full creative control — a campaign built around the scale you want.
            </p>
          </div>

          {/* RIGHT — CTA */}
          <div style={{ flexShrink: 0, position: 'relative', zIndex: 1 }}>
            <button
              onClick={goToStripe}
              style={{
                background: hovered
                  ? 'linear-gradient(135deg, #8B5CFF, #C94CFF)'
                  : 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
                color: '#F5F2FF',
                border: 'none', cursor: 'pointer',
                padding: mobile ? '15px 28px' : '16px 32px',
                borderRadius: '12px',
                fontSize: mobile ? '14px' : '15px',
                fontWeight: 700,
                letterSpacing: '-0.015em',
                fontFamily: 'inherit',
                width: mobile ? '100%' : 'auto',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '10px',
                boxShadow: hovered
                  ? '0 16px 44px rgba(94,43,255,0.45), 0 0 32px rgba(201,76,255,0.25)'
                  : '0 10px 32px rgba(94,43,255,0.3)',
                transition: 'background 300ms, box-shadow 300ms, transform 250ms',
                whiteSpace: 'nowrap',
              }}
            >
              Launch a custom pack
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style={{ flexShrink: 0 }}>
                <path d="M2.5 7h9M8 3.5l3.5 3.5L8 10.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </FadeIn>
  );
}

function Pricing({ selectedTier, onSelectTier, onContinue, variant = 'standard' }) {
  const w = useWindowWidth();
  const mobile = w < 768;
  const isSchedule = variant === 'schedule';
  const urls = STRIPE_URLS[variant] || STRIPE_URLS.standard;

  function goToStripe() {
    if (selectedTier) {
      const url = urls[selectedTier.id];
      if (url) window.location.href = url;
    }
  }

  return (
    <section id="pricing" style={{ padding: mobile ? '80px 20px' : '120px 48px', maxWidth: '1200px', margin: '0 auto' }}>
      <FadeIn>
        <div style={{ textAlign: 'center', marginBottom: mobile ? '48px' : '80px' }}>
          {/* Scheduled release badge — only shown when arriving from Schedule.html */}
          {isSchedule && (
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: '10px',
              background: 'rgba(201,76,255,0.08)',
              border: '1px solid rgba(201,76,255,0.25)',
              borderRadius: '100px',
              padding: '7px 16px 7px 12px',
              marginBottom: '28px',
              animation: 'scheduleBadgeIn 600ms cubic-bezier(0.16,1,0.3,1) both',
            }}>
              {/* Calendar icon */}
              <div style={{
                width: '20px', height: '20px', borderRadius: '50%',
                background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                flexShrink: 0,
                boxShadow: '0 0 12px rgba(201,76,255,0.5)',
              }}>
                <svg width="11" height="11" viewBox="0 0 12 12" fill="none">
                  <rect x="2" y="3" width="8" height="7" rx="1" stroke="#F5F2FF" strokeWidth="1.2"/>
                  <path d="M4 2v2M8 2v2M2 5h8" stroke="#F5F2FF" strokeWidth="1.2" strokeLinecap="round"/>
                </svg>
              </div>
              <span style={{
                color: '#E7C8FF', fontSize: '11px', fontWeight: 700,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                fontFamily: "'JetBrains Mono', monospace",
              }}>
                Scheduled release
              </span>
              <span style={{
                width: '1px', height: '12px', background: 'rgba(201,76,255,0.3)',
              }} />
              <span style={{
                color: '#A1A1B3', fontSize: '11px', fontWeight: 500,
                letterSpacing: '-0.005em',
                fontFamily: "'JetBrains Mono', monospace",
              }}>
                Launches the day your track drops
              </span>
            </div>
          )}

          <div style={{ color: '#7C7C90', fontSize: '11px', fontWeight: 600, letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: '20px', fontFamily: "'JetBrains Mono', monospace" }}>
            Campaign tiers
          </div>
          <h2 style={{ fontSize: mobile ? 'clamp(32px,9vw,48px)' : 'clamp(36px,5vw,64px)', fontWeight: 800, letterSpacing: '-0.04em', color: '#F5F2FF', margin: '0 0 16px', lineHeight: 1.03 }}>
            {isSchedule ? 'Schedule your campaign.' : 'Choose your campaign.'}
          </h2>
          <p style={{ color: '#A1A1B3', fontSize: '16px', letterSpacing: '-0.01em', maxWidth: '460px', margin: '0 auto', lineHeight: 1.5 }}>
            {isSchedule
              ? 'Pick a pack — we lock it in and everything goes live the moment your track drops.'
              : 'Real Meta Ads spend directed at your music. Every tier includes professional campaign management.'}
          </p>
        </div>
      </FadeIn>
      <FadeIn delay={80}>
        <div style={{
          display: 'flex',
          flexDirection: mobile ? 'column' : 'row',
          gap: mobile ? '16px' : '20px',
          alignItems: mobile ? 'stretch' : 'flex-start',
        }}>
          {TIERS.map(tier => (
            <PricingCard
              key={tier.id}
              tier={tier}
              selected={selectedTier?.id === tier.id}
              onSelect={onSelectTier}
              mobile={mobile}
              stripeUrl={urls[tier.id]}
            />
          ))}
        </div>
      </FadeIn>

      {/* 4th pack — horizontal custom tier */}
      <CustomPack mobile={mobile} stripeUrl={urls.custom} />
      {selectedTier && (
        <FadeIn>
          <div style={{ textAlign: 'center', marginTop: '48px' }}>
            <button onClick={goToStripe} style={{
              background: 'linear-gradient(135deg, #5E2BFF, #C94CFF)',
              color: '#F5F2FF', padding: '16px 52px', borderRadius: '12px',
              fontSize: '15px', fontWeight: 700, border: 'none',
              cursor: 'pointer', letterSpacing: '-0.01em',
              transition: 'transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms',
              fontFamily: 'inherit',
              boxShadow: '0 8px 30px rgba(94,43,255,0.25)',
              width: mobile ? '100%' : 'auto',
            }}
            onMouseEnter={e => { e.currentTarget.style.transform='translateY(-3px)'; e.currentTarget.style.boxShadow='0 16px 40px rgba(94,43,255,0.35)'; }}
            onMouseLeave={e => { e.currentTarget.style.transform='translateY(0)'; e.currentTarget.style.boxShadow='0 8px 30px rgba(94,43,255,0.25)'; }}
            >
              {isSchedule ? `Schedule ${selectedTier.name} — $${selectedTier.price}` : `Continue with ${selectedTier.name} — $${selectedTier.price}`}
            </button>
          </div>
        </FadeIn>
      )}

      <style>{`
        @keyframes scheduleBadgeIn {
          from { opacity: 0; transform: translateY(-8px); }
          to   { opacity: 1; transform: translateY(0);    }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Pricing });