function PricingCard({ name, price, period, tagline, features, cta, ctaHref = 'https://wa.me/5511996149633',monthly, featured = false, priceLabel = null, monthlyLabel = null }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        padding: 40,
        borderRadius: 40,
        border: featured ? '2px solid var(--green-500)' : `1px solid ${hover ? 'var(--night-600)' : 'var(--night-700)'}`,
        background: featured ? 'var(--night-950)' : 'rgba(13,20,17,0.6)',
        backdropFilter: 'blur(6px)',
        display: 'flex', flexDirection: 'column',
        position: 'relative',
        transform: 'none',
        boxShadow: featured ? '0 24px 60px -8px rgba(34,197,94,0.35)' : 'none',
        transition: 'all 300ms ease-out',
        height: '100%',
        boxSizing: 'border-box',
      }}>
      {featured && (
        <div style={{
          position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)',
          background: 'var(--green-500)', color: 'var(--night-950)',
          padding: '5px 20px', borderRadius: 999,
          fontFamily: 'var(--font-mono)',
          fontSize: 10, fontWeight: 900,
          textTransform: 'uppercase', letterSpacing: '0.25em',
          whiteSpace: 'nowrap',
        }}>Mais Procurado</div>
      )}
      <h3 style={{
        fontSize: 24, fontWeight: 700, margin: '0 0 10px',
        color: featured ? 'var(--green-400)' : 'var(--fg-1)',
      }}>{name}</h3>
      {priceLabel && (
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 500,
          letterSpacing: '0.25em', textTransform: 'uppercase',
          color: 'var(--fg-4)', marginBottom: 6,
        }}>{priceLabel}</div>
      )}
      <div style={{ display: 'flex', alignItems: 'baseline', marginBottom: 20 }}>
        <span style={{ fontSize: 38, fontWeight: 900, letterSpacing: '-0.02em', color: 'var(--fg-1)' }}>{price}</span>
        <span style={{ marginLeft: 8, color: 'var(--fg-4)', fontSize: 13 }}>{period}</span>
      </div>
      <p style={{ color: 'var(--fg-3)', fontSize: 14, margin: '0 0 32px', lineHeight: 1.6, minHeight: 66 }}>{tagline}</p>
      <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 32px', display: 'flex', flexDirection: 'column', gap: 16 }}>
        {features.map((f, i) => (
          <li key={i} style={{ display: 'flex', gap: 12, fontSize: 14, color: 'var(--fg-2)', alignItems: 'flex-start' }}>
            <i className="fas fa-check-circle" style={{ color: 'var(--green-500)', marginTop: 3, flexShrink: 0 }}></i>
            <span>{f}</span>
          </li>
        ))}
      </ul>
      <div style={{ marginTop: 'auto', paddingTop: 24, borderTop: '1px solid var(--night-800)' }}>
        <div style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 10, fontWeight: 500,
          textTransform: 'uppercase', letterSpacing: '0.25em',
          color: featured ? 'var(--fg-2)' : 'var(--fg-4)',
          marginBottom: 16,
        }}>Mensalidade: {monthly}</div>
        <Button href={ctaHref} target="_blank" variant={featured ? 'primary' : 'secondary'} style={{ display: 'block', width: '90%', padding: '16px', fontSize: 15,alignItems: 'center' }}>
          {cta}
        </Button>
      </div>
    </div>
  );
}

const PRICING_PLANS = [
  {
    name: "Bitsz Start",
    price: "R$ 500",
    period: "/setup único",
    tagline: "Ideal para autônomos e comércios locais que precisam de rapidez.",
    features: ['Configuração do domínio', 'Landing Page de Alta Conversão', 'Otimização para Mobile', 'Integração Direta com WhatsApp'],
    monthly: "R$ 69,90",
    cta: "Escolher Start",
    ctaHref: "https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Start",
  },
  {
    name: "Bitsz Business",
    price: "R$ 1.500",
    period: "/setup único",
    tagline: "Para empresas que buscam autoridade e posicionamento de mercado.",
    features: ['Configuração do domínio', 'Site Institucional (Até 3 Páginas)', 'Copywriting de Vendas Profissional', 'SEO Local'],
    monthly: "R$ 89,90",
    cta: "Impulsionar Agora",
    ctaHref: "https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Business",
    featured: true,
  },
  {
    name: "Bitsz Premium",
    price: "R$ 2.000",
    priceLabel: "A partir de",
    period: "/setup único",
    tagline: "Soluções completas para empresas em plena expansão.",
    features: ['Configuração do domínio', 'Site Completo com Catálogo', 'Integração com CRM/Gestão', 'Suporte Prioritário'],
    monthly: "A partir de R$ 139,90",
    cta: "Falar com Especialista",
    ctaHref: "https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Premium",
  },
];

function PricingCarousel() {
  const [active, setActive] = React.useState(1);
  const touchStartX = React.useRef(null);

  const prev = () => setActive(i => Math.max(0, i - 1));
  const next = () => setActive(i => Math.min(PRICING_PLANS.length - 1, i + 1));

  const onTouchStart = (e) => { touchStartX.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touchStartX.current === null) return;
    const diff = touchStartX.current - e.changedTouches[0].clientX;
    if (Math.abs(diff) > 40) diff > 0 ? next() : prev();
    touchStartX.current = null;
  };

  return (
    <div style={{ position: 'relative', overflow: 'hidden', paddingTop: 20 }}
      onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>

      {/* Slides track */}
      <div style={{
        display: 'flex',
        transform: `translateX(-${active * 100}%)`,
        transition: 'transform 380ms cubic-bezier(0.4, 0, 0.2, 1)',
      }}>
        {PRICING_PLANS.map((plan, i) => (
          <div key={i} style={{ minWidth: '100%', padding: '0 20px', boxSizing: 'border-box' }}>
            <PricingCard {...plan} />
          </div>
        ))}
      </div>

      {/* Dot indicators */}
      <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 28 }}>
        {PRICING_PLANS.map((_, i) => (
          <button key={i} onClick={() => setActive(i)} style={{
            width: i === active ? 24 : 8, height: 8,
            borderRadius: 999,
            background: i === active ? 'var(--green-500)' : 'var(--night-600)',
            border: 'none', cursor: 'pointer', padding: 0,
            transition: 'all 300ms ease',
          }} />
        ))}
      </div>

      {/* Arrow buttons */}
      {active > 0 && (
        <button onClick={prev} style={{
          position: 'absolute', top: '45%', left: 4, transform: 'translateY(-50%)',
          background: 'var(--night-800)', border: '1px solid var(--night-600)',
          color: 'var(--fg-2)', width: 36, height: 36, borderRadius: '50%',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, lineHeight: 1,
        }}>&#8249;</button>
      )}
      {active < PRICING_PLANS.length - 1 && (
        <button onClick={next} style={{
          position: 'absolute', top: '45%', right: 4, transform: 'translateY(-50%)',
          background: 'var(--night-800)', border: '1px solid var(--night-600)',
          color: 'var(--fg-2)', width: 36, height: 36, borderRadius: '50%',
          cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, lineHeight: 1,
        }}>&#8250;</button>
      )}
    </div>
  );
}

function Pricing() {
  const [isMobile, setIsMobile] = React.useState(
    typeof window !== 'undefined' ? window.innerWidth < 768 : false
  );

  React.useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener('resize', handler);
    return () => window.removeEventListener('resize', handler);
  }, []);

  return (
    <section id="precos" style={{ padding: isMobile ? '72px 0 80px' : '128px 24px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{
          textAlign: 'center',
          marginBottom: isMobile ? 48 : 80,
          padding: isMobile ? '0 24px' : 0,
        }}>
          <h2 style={{
            fontSize: 'clamp(2rem, 4vw, 3.25rem)',
            fontWeight: 900,
            letterSpacing: '-0.02em',
            lineHeight: 1.1,
            margin: '0 0 20px',
          }}>
            Investimento em{' '}
            <span style={{ color: 'var(--green-500)' }}>Crescimento</span>
          </h2>
          <p style={{ color: 'var(--fg-3)', maxWidth: 560, margin: '0 auto', fontSize: 16 }}>
            Modelos de negócio pensados para escalar a sua empresa de forma profissional e acessível.
          </p>
        </div>

        {isMobile ? (
          <PricingCarousel />
        ) : (
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 28,
            alignItems: 'stretch',
            paddingTop: 20,
          }}>
            <PricingCard
              name="Bitsz Start"
              price="R$ 500"
              period="/setup único"
              tagline="Ideal para autônomos e comércios locais que precisam de rapidez."
              features={['Configuração do domínio','Landing Page de Alta Conversão', 'Otimização para Mobile', 'Integração Direta com WhatsApp']}
              monthly="R$ 69,90"
              cta="Escolher Start"
              ctaHref="https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Start"
            />
            <PricingCard
              name="Bitsz Business"
              price="R$ 1.500"
              period="/setup único"
              tagline="Para empresas que buscam autoridade e posicionamento de mercado."
              features={['Configuração do domínio','Site Institucional (Até 3 Páginas)', 'Copywriting de Vendas Profissional', 'SEO Local']}
              monthly="R$ 89,90"
              cta="Impulsionar Agora"
              ctaHref="https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Business"
              featured
            />
            <PricingCard
              name="Bitsz Premium"
              price="R$ 2.000"
              priceLabel="A partir de"
              period="/setup único"
              tagline="Soluções completas para empresas em plena expansão."
              features={['Configuração do domínio','Site Completo com Catálogo', 'Integração com CRM/Gestão', 'Suporte Prioritário']}
              monthly="A partir de R$ 139,90"
              cta="Falar com Especialista"
              ctaHref="https://wa.me/5511996149633?text=Ol%C3%A1%2C%20quero%20o%20plano%20Bitsz%20Premium"
            />
          </div>
        )}
      </div>
    </section>
  );
}
window.Pricing = Pricing;
window.PricingCard = PricingCard;