const { useState: _useState3, useEffect: _useEffect3 } = React;

// ─── 5. BEFORE / AFTER ────────────────────────────────────────────────────
function BeforeAfterSection() {
  const { t } = useLang();
  const ba = t('beforeAfter');
  const [ref, inView] = useInView(0.1);
  const [expanded, setExpanded] = _useState3(false);

  _useEffect3(() => {
    if (!expanded) return;
    const onKey = e => { if (e.key === 'Escape') setExpanded(false); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [expanded]);

  const fadeProp = (delay) => ({ opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(26px)', transition: `opacity 0.7s ease ${delay}ms, transform 0.7s ease ${delay}ms` });

  return (
    <section style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>{ba.eyebrow}</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A' }}>{ba.title}</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, alignItems: 'start' }} className="ps-grid">

          {/* BEFORE */}
          <div className="glass" style={{ borderRadius: 20, padding: 24, ...fadeProp(80) }}>
            <div style={{ display: 'inline-flex', padding: '5px 12px', borderRadius: 100, background: 'rgba(200,60,60,0.1)', border: '1px solid rgba(200,60,60,0.25)', marginBottom: 16 }}>
              <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, color: '#c83c3c', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{ba.before || 'Before'}</span>
            </div>
            <div style={{ borderRadius: 10, overflow: 'hidden', filter: 'grayscale(0.45)', opacity: 0.82 }}>
              <img src="assets/before.png" alt="Before" style={{ width: '100%', display: 'block' }} />
            </div>
          </div>

          {/* AFTER — live site */}
          <div className="glass" style={{ borderRadius: 20, overflow: 'hidden', border: '1px solid rgba(214,4,87,0.22)', boxShadow: '0 0 32px rgba(214,4,87,0.08)', ...fadeProp(160) }}>
            {/* badge row */}
            <div style={{ padding: '14px 18px 0' }}>
              <div style={{ display: 'inline-flex', padding: '5px 12px', borderRadius: 100, background: 'rgba(214,4,87,0.1)', border: '1px solid rgba(214,4,87,0.28)' }}>
                <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 700, color: '#D60457', letterSpacing: '0.1em', textTransform: 'uppercase' }}>{ba.after || 'After'}</span>
              </div>
            </div>
            {/* browser chrome */}
            <div style={{ margin: '12px 18px 0', borderRadius: '10px 10px 0 0', overflow: 'hidden', border: '1px solid rgba(42,14,26,0.09)', borderBottom: 'none' }}>
              <div style={{ background: 'rgba(42,14,26,0.05)', padding: '9px 12px', display: 'flex', alignItems: 'center', gap: 8, borderBottom: '1px solid rgba(42,14,26,0.07)' }}>
                <div style={{ display: 'flex', gap: 5, flexShrink: 0 }}>
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F57' }} />
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#FFBD2E' }} />
                  <div style={{ width: 10, height: 10, borderRadius: '50%', background: '#28C840' }} />
                </div>
                <div style={{ flex: 1, background: 'rgba(255,255,255,0.7)', borderRadius: 5, padding: '3px 8px', display: 'flex', alignItems: 'center', gap: 5 }}>
                  <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="rgba(42,14,26,0.38)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                  <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, color: 'rgba(42,14,26,0.42)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>firstchoicetaxservices.com</span>
                </div>
                <button onClick={() => setExpanded(true)} style={{ flexShrink: 0, display: 'flex', alignItems: 'center', gap: 4, padding: '4px 9px', borderRadius: 5, border: '1px solid rgba(42,14,26,0.14)', background: 'rgba(255,255,255,0.65)', cursor: 'pointer', fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, color: 'rgba(42,14,26,0.58)' }}>
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
                  {ba.expand}
                </button>
              </div>
              {/* iframe */}
              <div style={{ height: 480 }}>
                <iframe
                  src="firstchoice-homepage.html"
                  title="First Choice Tax Services"
                  loading="lazy"
                  style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
                />
              </div>
            </div>
            <div style={{ padding: '10px 18px 16px' }}>
              <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, color: 'rgba(42,14,26,0.38)', margin: 0 }}>{ba.siteDesc}</p>
            </div>
          </div>
        </div>
      </div>

      {/* Fullscreen modal — rendered via portal to <body> so it escapes this section's */}
      {/* own stacking context (every <section> gets position:relative;z-index:1,    */}
      {/* which would otherwise trap a position:fixed child behind later sections). */}
      {expanded && ReactDOM.createPortal(
        <div onClick={() => setExpanded(false)} style={{ position: 'fixed', inset: 0, background: 'rgba(20,6,14,0.88)', zIndex: 99999, display: 'flex', flexDirection: 'column', padding: '92px 20px 20px', animation: 'fadeSlideIn 0.22s ease' }}>
          {/* Exit button — big, high-contrast, fixed to viewport */}
          <button onClick={() => setExpanded(false)} style={{ position: 'fixed', top: 24, right: 24, zIndex: 100000, display: 'flex', alignItems: 'center', gap: 10, padding: '16px 28px', borderRadius: 999, border: 'none', background: 'linear-gradient(95deg, #F62E33 0%, #D60457 60%, #6E0240 100%)', cursor: 'pointer', fontFamily: 'DM Sans, sans-serif', fontSize: 16, fontWeight: 700, color: '#FFF8F0', boxShadow: '0 8px 32px rgba(0,0,0,0.45), 0 0 0 3px rgba(255,255,255,0.25)', letterSpacing: '-0.01em' }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
            Exit fullscreen
          </button>
          <div onClick={e => e.stopPropagation()} style={{ flex: 1, display: 'flex', flexDirection: 'column', borderRadius: 14, overflow: 'hidden', boxShadow: '0 24px 80px rgba(0,0,0,0.55)' }}>
            {/* modal chrome — close button inline, no sub-component */}
            <div style={{ background: 'rgba(255,248,240,0.97)', padding: '9px 14px', display: 'flex', alignItems: 'center', gap: 10, borderBottom: '1px solid rgba(42,14,26,0.08)', flexShrink: 0 }}>
              <div style={{ display: 'flex', gap: 5 }}>
                <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#FF5F57' }} />
                <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#FFBD2E' }} />
                <div style={{ width: 11, height: 11, borderRadius: '50%', background: '#28C840' }} />
              </div>
              <div style={{ flex: 1, background: 'rgba(255,255,255,0.7)', borderRadius: 6, padding: '4px 10px', display: 'flex', alignItems: 'center', gap: 6, maxWidth: 380, margin: '0 auto' }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="rgba(42,14,26,0.38)" strokeWidth="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 12, color: 'rgba(42,14,26,0.45)' }}>firstchoicetaxservices.com</span>
              </div>
            </div>
            <div style={{ flex: 1, overflow: 'hidden' }}>
              <iframe
                src="firstchoice-homepage.html"
                title="First Choice Tax Services — fullscreen"
                style={{ width: '100%', height: '100%', border: 'none', display: 'block' }}
              />
            </div>
          </div>
        </div>,
        document.body
      )}
    </section>
  );
}

// ─── 6. PACKAGES ──────────────────────────────────────────────────────────
const NEW_PKGS = [
  {
    name: 'Social Content Kit',
    tagline: 'For businesses that only need branded social media content.',
    price: '$497',
    bullets: ['8 branded social media posts', '8 captions', 'Basic hashtag suggestions', 'Posting-ready image files', '1 revision round'],
    badge: null,
    featured: false,
  },
  {
    name: 'Starter Presence',
    tagline: 'For new businesses that need a simple website and starter content.',
    price: '$997',
    bullets: ['One-page website', 'Mobile-friendly design', 'Contact button or contact form', 'Basic website copy cleanup', '6 branded social media posts', '6 captions', '2 revision rounds'],
    badge: null,
    featured: false,
  },
  {
    name: 'Growth Presence',
    tagline: 'For businesses that need a more complete online presence.',
    price: '$1,850',
    bullets: ['Up to 3-page website', 'Mobile-friendly design', 'Contact form', 'Basic SEO page titles and descriptions', '12 branded social media posts', '12 captions', '30-day content plan', '2 revision rounds'],
    badge: 'Most Popular',
    featured: true,
  },
  {
    name: 'Full Digital Presence',
    tagline: 'For businesses that want a polished website and a full content package.',
    price: '$2,950',
    bullets: ['Up to 5-page website', 'Mobile-friendly design', 'Contact form', 'Basic SEO page titles and descriptions', '18 branded social media posts', '18 captions', '30-day content plan', 'Posting-ready files', '3 revision rounds'],
    badge: null,
    featured: false,
  },
];

function PackageStrip({ strip, large }) {
  return (
    <div style={{ display: 'flex', gap: 4, alignItems: 'stretch', marginBottom: 18, padding: 8, borderRadius: 10, background: 'rgba(255,248,240,0.6)', border: '1px solid rgba(42,14,26,0.06)' }}>
      <div style={{ flex: large ? 2.4 : 1.8, minWidth: 0 }}>
        <PlaceholderWebsite zone={strip.website} />
      </div>
      <div style={{ flex: 2, display: 'grid', gridTemplateColumns: strip.squares.length > 4 ? 'repeat(4, 1fr)' : `repeat(${Math.min(strip.squares.length, 4)}, 1fr)`, gap: 3 }}>
        {strip.squares.slice(0, 8).map(s => <Placeholder key={s} zone={s} aspect="1:1" mini />)}
      </div>
      {strip.portraits.length > 0 && (
        <div style={{ flex: 0.6, display: 'flex', flexDirection: 'column', gap: 3 }}>
          {strip.portraits.slice(0, 3).map(p => <Placeholder key={p} zone={p} aspect="9:16" mini />)}
        </div>
      )}
    </div>
  );
}

function NewPkgCard({ pkg, delay, inView }) {
  const [angle, setAngle] = _useState3(0);
  _useEffect3(() => {
    if (!pkg.featured) return;
    let raf;
    const tick = () => { setAngle(a => (a+0.4)%360); raf = requestAnimationFrame(tick); };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [pkg.featured]);

  return (
    <div style={{ position: 'relative' }}>
      {pkg.featured && <div style={{ position: 'absolute', inset: -1.5, borderRadius: 21, background: `conic-gradient(from ${angle}deg,#F62E33,#D60457,#6E0240,#F62E33)`, zIndex: 0 }}></div>}
      <div data-tilt="" style={{ position: 'relative', zIndex: 1, borderRadius: 20, padding: 22, background: 'rgba(255,255,255,0.86)', backdropFilter: 'blur(16px)', border: pkg.featured ? 'none' : '1px solid rgba(42,14,26,0.08)', opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(28px)', transition: `opacity 0.7s ease ${delay}ms, transform 0.7s ease ${delay}ms`, boxShadow: pkg.featured ? '0 0 48px rgba(246,46,51,0.18)' : 'none', display: 'flex', flexDirection: 'column', height: '100%' }}>
        {pkg.badge && (
          <div style={{ display: 'inline-flex', alignSelf: 'flex-start', marginBottom: 12, padding: '4px 11px', borderRadius: 100, background: 'rgba(246,46,51,0.12)', border: '1px solid rgba(246,46,51,0.32)' }}>
            <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 10.5, fontWeight: 700, color: '#F62E33', letterSpacing: '0.05em' }}>{pkg.badge}</span>
          </div>
        )}

        <div style={{ fontFamily: 'Fraunces, serif', fontSize: 22, fontWeight: 700, color: '#2A0E1A', marginBottom: 4, letterSpacing: '-0.01em' }}>{pkg.name}</div>
        <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13.5, color: 'rgba(42,14,26,0.5)', marginBottom: 16, lineHeight: 1.5, minHeight: 38 }}>{pkg.tagline}</div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 4, marginBottom: 18 }}>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 32, fontWeight: 700, color: '#2A0E1A', letterSpacing: '-0.02em', lineHeight: 1 }}>{pkg.price}</div>
          <div style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, color: 'rgba(42,14,26,0.45)', letterSpacing: '0.08em', textTransform: 'uppercase' }}>Starting price</div>
        </div>

        <div style={{ height: 1, background: 'rgba(42,14,26,0.07)', marginBottom: 16 }}></div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 9, flex: 1, marginBottom: 22 }}>
          {pkg.bullets.map((f, i) => (
            <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={pkg.featured?'#F62E33':'#6E0240'} strokeWidth="2.5" style={{ flexShrink: 0, marginTop: 3 }}><path d="M20 6L9 17l-5-5"/></svg>
              <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13.5, color: 'rgba(42,14,26,0.7)', lineHeight: 1.45 }}>{f}</span>
            </div>
          ))}
        </div>

        <a href="#quote-form" className={pkg.featured ? 'btn-primary' : 'btn-outline'} style={{ width: '100%', justifyContent: 'center', fontSize: 14, padding: '11px 18px' }}>
          Get my quote
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </a>
      </div>
    </div>
  );
}

function NewPackages() {
  const [ref, inView] = useInView(0.05);
  return (
    <section id="packages" style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>Pricing</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 14 }}>Straightforward packages.</h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 17, color: 'rgba(42,14,26,0.5)', maxWidth: 440, margin: '0 auto' }}>No monthly traps. No hidden fees.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, alignItems: 'start' }} className="packages-grid">
          {NEW_PKGS.map((p, i) => <NewPkgCard key={p.name} pkg={p} delay={i*80} inView={inView} />)}
        </div>
        <p style={{ textAlign: 'center', marginTop: 36, fontFamily: 'DM Sans, sans-serif', fontSize: 14, color: 'rgba(42,14,26,0.42)', fontStyle: 'italic' }}>
          Final quote depends on business type, number of pages, and content needs.
        </p>
        <p style={{ textAlign: 'center', marginTop: 14 }}>
          <a href="payment-policy.html" style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, fontWeight: 600, color: '#D60457', textDecoration: 'none', borderBottom: '1px solid rgba(214,4,87,0.35)', paddingBottom: 2 }}>
            View our payment policy →
          </a>
        </p>
      </div>
    </section>
  );
}

// ─── 6b. ADD-ONS ──────────────────────────────────────────────────────────
function AddOns() {
  const { t } = useLang();
  const a = t('addons');
  const [ref, inView] = useInView(0.05);
  return (
    <section id="addons" style={{ padding: '120px 48px' }}>
      <div ref={ref} style={{ maxWidth: 880, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48, opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(22px)', transition: 'opacity 0.7s, transform 0.7s' }}>
          <div style={{ marginBottom: 12 }}><span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(42,14,26,0.35)' }}>{a.eyebrow}</span></div>
          <h2 style={{ fontFamily: 'Fraunces, serif', fontSize: 'clamp(30px,3.2vw,46px)', fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.02em', color: '#2A0E1A', marginBottom: 14 }}>{a.title}</h2>
          <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 17, color: 'rgba(42,14,26,0.5)', maxWidth: 540, margin: '0 auto' }}>{a.subtitle}</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {a.items.map((item, i) => (
            <div key={i} className="glass" style={{
              borderRadius: 16, padding: '20px 24px',
              display: 'flex', flexDirection: 'column', gap: 8,
              opacity: inView?1:0, transform: inView?'translateY(0)':'translateY(18px)',
              transition: `opacity 0.6s ease ${i*45}ms, transform 0.6s ease ${i*45}ms`,
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 14, flexWrap: 'wrap' }}>
                <span style={{ fontFamily: 'Fraunces, serif', fontSize: 17, fontWeight: 600, color: '#2A0E1A', letterSpacing: '-0.005em' }}>{item.name}</span>
                <span style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 14, fontWeight: 700, color: '#D60457', whiteSpace: 'nowrap' }}>{item.price}</span>
              </div>
              <p style={{ fontFamily: 'DM Sans, sans-serif', fontSize: 13.5, lineHeight: 1.55, color: 'rgba(42,14,26,0.55)', margin: 0 }}>{item.notes}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.BeforeAfterSection = BeforeAfterSection;
window.NewPackages = NewPackages;
window.AddOns = AddOns;