// Section 6 — O que vem no plano. Bento of 6, one brand-gradient feature.
function PlanIncludes() {
  const items = [
    { icon: 'globe', title: 'Domínio próprio', body: '.com.br registrado no seu nome — você é o dono, sem refém.' },
    { icon: 'server', title: 'Hospedagem premium', body: 'CDN global, SSL e 99.9% de uptime. Rápido em qualquer lugar.', feature: true },
    { icon: 'whatsapp', title: 'WhatsApp integrado', body: 'Botão fixo com mensagem pré-pronta pro cliente final.' },
    { icon: 'calendar', title: 'Agendamento online', body: 'Doctoralia, Calendly ou nativo — do jeito que você usa.' },
    { icon: 'edit', title: 'Edições mensais', body: 'Cores, textos e fotos — a gente faz por você, todo mês.' },
    { icon: 'headset', title: 'Suporte humano', body: 'Sem chatbot, sem fila. Fala com gente de verdade.' },
  ];
  return (
    <section className="section" style={{ paddingTop: 0 }}>
      <div className="container">
        <Reveal>
          <span className="eyebrow">Tudo incluso</span>
          <h2 className="h-section" style={{ margin: '14px 0 0', maxWidth: '20ch' }}>Você só se preocupa em <span className="em">receber clientes.</span></h2>
        </Reveal>
        <div className="bento" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 44 }}>
          {items.map((it, i) => (
            <Reveal key={it.title} delay={(i % 3) * 0.07}>
              <PlanCard {...it} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function PlanCard({ icon, title, body, feature }) {
  if (feature) {
    return (
      <div className="card levitate-soft" style={{ padding: 28, height: '100%', background: 'var(--grad-brand)', border: 0, color: '#fff', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', width: 220, height: 220, right: -56, top: -56, background: 'radial-gradient(circle, rgba(191,232,221,.4), transparent 70%)' }} />
        <div style={{ width: 46, height: 46, borderRadius: 13, background: 'rgba(255,255,255,.15)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18, position: 'relative' }}>
          <Icon name={icon} size={23} color="#fff" />
        </div>
        <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23, margin: '0 0 8px', color: '#fff', letterSpacing: '-.01em', position: 'relative' }}>{title}</h3>
        <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'rgba(255,255,255,.85)', position: 'relative' }}>{body}</p>
        <style>{`@keyframes levs { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} } .levitate-soft{ animation: levs 4s ease-in-out infinite; }`}</style>
      </div>
    );
  }
  return (
    <div className="card hover-lift" style={{ padding: 28, height: '100%', transition: 'transform .4s var(--ease-out), box-shadow .4s var(--ease-out)' }}>
      <div style={{ width: 46, height: 46, borderRadius: 13, background: 'var(--mint)', color: 'var(--brand-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 18 }}>
        <Icon name={icon} size={23} color="var(--brand-700)" />
      </div>
      <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 23, color: 'var(--ink-2)', margin: '0 0 8px', letterSpacing: '-.01em' }}>{title}</h3>
      <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, color: 'var(--muted)' }}>{body}</p>
    </div>
  );
}

window.PlanIncludes = PlanIncludes;