/* global React */
const { useState } = React;

/* ============ PRICING ============ */
const CHECKOUT_URLS = {
  ARISE: 'https://buy.stripe.com/fZu00j4U88hGggMcXH5c400',
  ECHO: 'https://buy.stripe.com/3cI8wPgCQeG4ggMcXH5c401',
  SIGNAL: 'https://buy.stripe.com/aFa28r3Q4gOc0hOcXH5c402',
};

function Pricing() {
  const t = window.useT().pricing;

  return (
    <section id="pricing" data-screen-label="06 Pricing">
      <div className="shell">
        <div className="section-head">
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="section-title">
            {t.titlePre}<span className="accent">{t.titleAccent}</span>
          </h2>
          <p className="section-lede">{t.lede}</p>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 48 }}>
          <div style={{ display: 'inline-flex', padding: '8px 18px', border: '1px solid var(--line)', borderRadius: 999, background: 'rgba(30,215,96,0.08)', fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.12em', color: 'var(--green)', textTransform: 'uppercase' }}>
            {t.label}
          </div>
        </div>

        <div className="pricing">
          {t.plans.map((p, i) => (
            <div key={i} className={`price glass ${p.featured ? 'featured' : ''}`}>
              {p.featured && <div className="price-badge">{t.badge}</div>}

              <div>
                <div className="price-tier mono">{p.tier}</div>
                <div className="price-name">{p.name}</div>
              </div>

              <div className="price-tag">
                <span className="price-cur">{t.currency}</span>
                <span className="price-amount">{p.price.toLocaleString()}</span>
              </div>

              <p className="price-desc">{p.desc}</p>

              <div className="price-metrics">
                <div className="price-metric">
                  <div className="price-metric-label">{t.streamsLabel}</div>
                  <div className="price-metric-value">{p.streams}</div>
                </div>
                <div className="price-metric">
                  <div className="price-metric-label">{t.pitchesLabel}</div>
                  <div className="price-metric-value">{p.pitches}</div>
                </div>
              </div>

              <div>
                <div className="price-section-label">{t.includedLabel}</div>
                <ul className="price-feats">
                  {p.feats.map((f, j) => (
                    <li key={j}>
                      <span className="price-check">✓</span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <div>
                <div className="price-section-label">{t.bestForLabel}</div>
                <ul className="price-feats price-bestfor-list">
                  {p.bestFor.map((b, j) => (
                    <li key={j}>
                      <span className="price-check" style={{ background: 'rgba(139,92,246,0.18)', color: 'var(--purple-2)' }}>·</span>
                      <span>{b}</span>
                    </li>
                  ))}
                </ul>
              </div>

              <a
                href={CHECKOUT_URLS[p.tier] || '#'}
                target="_blank"
                rel="noopener noreferrer"
                className={`btn price-btn ${p.featured ? 'btn-primary' : 'btn-ghost'}`}
              >
                {p.cta} <window.Arrow />
              </a>
            </div>
          ))}
        </div>

        {t.note && (
          <div className="price-note glass">
            <div className="price-note-heading mono">{t.note.heading}</div>
            <ul>
              {t.note.lines.map((line, i) => (
                <li key={i}>{line}</li>
              ))}
            </ul>
          </div>
        )}
      </div>
    </section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  const [open, setOpen] = useState(0);
  const t = window.useT().faq;

  return (
    <section id="faq" data-screen-label="07 FAQ">
      <div className="shell">
        <div className="section-head" style={{ margin: '0 auto 56px', textAlign: 'center', alignItems: 'center' }}>
          <span className="eyebrow">{t.eyebrow}</span>
          <h2 className="section-title">
            {t.titlePre}<span className="accent">{t.titleAccent}</span>
          </h2>
        </div>

        <div className="faq">
          {t.items.map((it, i) => (
            <div key={i} className={`faq-item glass ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-toggle">+</span>
              </button>
              <div className="faq-a">{it.a}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ FINAL CTA ============ */
function FinalCTA() {
  const t = window.useT().cta;
  return (
    <section className="final-cta" data-screen-label="08 Final CTA">
      <div className="shell">
        <span className="eyebrow" style={{ position: 'relative' }}>{t.eyebrow}</span>
        <h2 style={{ marginTop: 18 }}>{t.h2}</h2>
        <p>{t.p}</p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#pricing" className="btn btn-primary" style={{ padding: '18px 32px', fontSize: 16 }}>
            {t.primary} <window.Arrow />
          </a>
          <a href="#how" className="btn btn-ghost" style={{ padding: '18px 32px', fontSize: 16 }}>
            {t.secondary}
          </a>
        </div>
        <div style={{ marginTop: 32, display: 'flex', gap: 24, justifyContent: 'center', flexWrap: 'wrap', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)' }}>
          {t.badges.map((b, i) => <span key={i}>✓ {b}</span>)}
        </div>
      </div>
    </section>
  );
}

/* ============ FOOTER ============ */
function Footer() {
  const t = window.useT().footer;

  const socials = [
    {
      name: 'Facebook',
      href: 'https://www.facebook.com/pimpristudio',
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"/>
        </svg>
      ),
    },
    {
      name: 'TikTok',
      href: 'https://www.tiktok.com/@pimpristudio?is_from_webapp=1&sender_device=pc',
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.16a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1.84-.59z"/>
        </svg>
      ),
    },
    {
      name: 'Spotify',
      href: 'https://open.spotify.com/artist/1oIDwWLo6itAJp0suDUveK',
      icon: (
        <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm4.586 14.424a.622.622 0 01-.857.207c-2.348-1.435-5.304-1.76-8.785-.964a.622.622 0 11-.277-1.215c3.809-.87 7.077-.495 9.712 1.115a.624.624 0 01.207.857zm1.223-2.722a.78.78 0 01-1.072.257c-2.687-1.652-6.785-2.131-9.965-1.166a.78.78 0 01-.973-.519.781.781 0 01.52-.972c3.632-1.102 8.147-.568 11.233 1.328a.78.78 0 01.257 1.072zm.105-2.835C14.692 8.95 9.375 8.775 6.297 9.71a.937.937 0 11-.543-1.794c3.532-1.072 9.404-.865 13.115 1.338a.937.937 0 01-.954 1.614z"/>
        </svg>
      ),
    },
  ];

  return (
    <footer className="footer">
      <div className="shell">
        <div className="footer-main">
          <div className="footer-brand-col">
            <div className="nav-brand" style={{ marginBottom: 16, fontSize: 16 }}>
              <span className="nav-brand-mark" />
              PIMPRI PROMOTION
            </div>
            <p className="footer-brand">{t.brand}</p>
          </div>

          <div className="footer-social-col">
            <h5>{t.followUs}</h5>
            <div className="footer-socials">
              {socials.map((s) => (
                <a
                  key={s.name}
                  href={s.href}
                  className="footer-social"
                  aria-label={s.name}
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  {s.icon}
                </a>
              ))}
            </div>

            <h5 style={{ marginTop: 24 }}>{t.contact}</h5>
            <a className="footer-email" href={`mailto:${t.email}`}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.6"/>
                <path d="M3 7l9 6 9-6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              <span>{t.email}</span>
            </a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t.bottom}</span>
          <span>{t.disclaimer}</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Pricing, FAQ, FinalCTA, Footer });