// Sections 9–13: Compliance, Author, Offer, FAQ, Final CTA + Footer

function Compliance() {
  const cards = [
    { tag: 'CFM',     h: 'Regulação médica brasileira',     b: 'Resolução 2.336/2023, 2.314/2022, 2.454/2026' },
    { tag: 'LGPD',    h: 'Lei Geral de Proteção de Dados',  b: 'Anonimização obrigatória, sem dados de paciente, conforme Lei 13.709' },
    { tag: 'CID-10',  h: 'Classificação brasileira de doenças', b: 'Versão BR oficial, vigente até 2027' },
    { tag: 'TISS/TUSS', h: 'Padrão da saúde suplementar',   b: 'Códigos de procedimento, Tabela ANS, CBHPM integrado' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 820 }}>
          <div className="pill"><span className="dot" />O DIFERENCIAL ABSOLUTO</div>
          <h2 className="h-1">O único kit construído sob a Resolução CFM 2.336/2023 e a LGPD.</h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 16, marginTop: 56,
        }} className="grid-comp">
          {cards.map((c, i) => (
            <div key={c.tag} className={`card fade-up d${i+1}`} style={{ padding: '26px 22px' }}>
              <div style={{
                display: 'inline-flex', padding: '5px 10px', borderRadius: 6,
                background: 'rgba(255,91,44,0.12)',
                border: '1px solid rgba(255,91,44,0.3)',
                fontFamily: 'Geist Mono, monospace',
                fontSize: 11, letterSpacing: '0.1em', color: 'var(--coral)',
                fontWeight: 500,
              }}>{c.tag}</div>
              <h4 style={{ fontSize: 17, fontWeight: 600, letterSpacing: '-0.02em', margin: '16px 0 10px', lineHeight: 1.25 }}>{c.h}</h4>
              <p style={{ color: 'var(--fg-dim)', fontSize: 13.5, lineHeight: 1.55, margin: 0 }}>{c.b}</p>
            </div>
          ))}
        </div>

        <div className="fade-up" style={{
          marginTop: 24,
          padding: '22px 26px',
          borderRadius: 16,
          background: 'rgba(255,91,44,0.08)',
          border: '1px solid rgba(255,91,44,0.28)',
          display: 'flex', gap: 16, alignItems: 'flex-start',
        }}>
          <div style={{
            flex: 'none', width: 36, height: 36,
            display: 'grid', placeItems: 'center', color: 'var(--coral)',
          }}>
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M12 4v16M9 20h6M3 7h18M5 7l-3 5a3 3 0 0 0 6 0L5 7M19 7l-3 5a3 3 0 0 0 6 0L19 7" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </div>
          <p style={{ margin: 0, color: 'var(--fg)', fontSize: 14.5, lineHeight: 1.6 }}>
            <strong style={{ color: 'var(--coral)' }}>Aviso ético:</strong> Este Kit é uma ferramenta de produtividade. Os prompts auxiliam a redação e organização de documentos médicos — não substituem o julgamento clínico do profissional.
          </p>
        </div>
      </div>
      <style>{`
        @media (max-width: 980px) { .grid-comp { grid-template-columns: repeat(2,1fr) !important; } }
        @media (max-width: 560px) { .grid-comp { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function Author() {
  return (
    <section className="section light" id="autora">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 760 }}>
          <div className="pill light"><span className="dot" />QUEM CONSTRUIU</div>
          <h2 className="h-1">Dra. Juliana Romanato.</h2>
          <p className="lede light">Médica radiologista. Não é guru de produtividade. Não é coach de IA.</p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, marginTop: 64, alignItems: 'flex-start',
        }} className="grid-2">
          <div className="fade-up d1">
            {/* Portrait — Dra. Juliana */}
            <div style={{
              aspectRatio: '4 / 5',
              borderRadius: 16,
              overflow: 'hidden',
              border: '1px solid rgba(21,17,13,0.08)',
              boxShadow: '0 30px 80px -40px rgba(21,17,13,0.35)',
              position: 'relative',
            }}>
              <img
                src="assets/juliana.png"
                alt="Dra. Juliana Romanato"
                style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
              />
            </div>
          </div>

          <div className="fade-up d2">
            <blockquote style={{
              margin: 0,
              fontStyle: 'italic',
              fontSize: 'clamp(20px, 1.9vw, 26px)',
              lineHeight: 1.4,
              letterSpacing: '-0.02em',
              fontWeight: 500,
              borderLeft: '2px solid var(--coral)',
              paddingLeft: 22,
              color: 'var(--ink)',
            }}>
              "Eu construí esse Kit pra mim mesma, primeiro. Cansei de levar prontuário pra casa. Os prompts funcionaram. Resolvi vender pros colegas que estão na mesma situação."
            </blockquote>

            <div style={{ marginTop: 32, display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                'Médica radiologista e nuclear, com especialização em imagem diagnóstica. Consultora de imagem certificada AICI.',
                'Em 2024, começou a integrar ChatGPT na rotina. Em 6 meses, parou de levar trabalho pra casa. Compartilhou os prompts com colegas. Eles começaram a usar também.',
                'A MEDUX nasceu disso. O Kit é o primeiro produto. Não é traduzido. Não é adaptado. Foi construído aqui, pra médico que atua aqui.',
              ].map((p, i) => (
                <p key={i} style={{ margin: 0, fontSize: 16, lineHeight: 1.6, color: 'var(--ink-dim)' }}>{p}</p>
              ))}
            </div>

            <div style={{
              marginTop: 28,
              padding: '20px 22px',
              borderRadius: 14,
              background: 'rgba(21,17,13,0.04)',
              border: '1px solid rgba(21,17,13,0.08)',
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 12,
            }} className="creds-grid">
              {[
                'CRM-SP 116.842',
                'Radiologia & Medicina Nuclear',
                'Consultora AICI',
                '@juromanatobranding',
              ].map(t => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <Icon.Check size={15} />
                  <span style={{ fontSize: 14 }}>{t}</span>
                </div>
              ))}
            </div>

            <a href="https://www.instagram.com/juromanatobranding/" target="_blank" rel="noopener noreferrer" style={{
              marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 8,
              color: 'var(--coral)', fontWeight: 500, fontSize: 14,
              borderBottom: '1px solid currentColor', paddingBottom: 2,
            }}>
              Conheça o trabalho da Dra. Juliana no Instagram <Icon.ArrowRight size={14} />
            </a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) { .grid-2 { grid-template-columns: 1fr !important; } .creds-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

function Offer() {
  const inclusos = [
    '200 prompts em 10 categorias',
    'Dashboard MEDUX (acesso vitalício)',
    'Funciona em ChatGPT, Claude, Gemini',
    'Atualizações futuras incluídas',
    'Suporte por e-mail',
  ];
  return (
    <section className="section dark-rounded" id="oferta" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="mesh-bg" style={{ opacity: 0.95 }} />
      {/* Grid lines for depth */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none',
        backgroundImage: 'linear-gradient(rgba(255,91,44,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,91,44,0.04) 1px, transparent 1px)',
        backgroundSize: '64px 64px',
        maskImage: 'radial-gradient(60% 50% at 50% 50%, #000 30%, transparent 80%)',
        WebkitMaskImage: 'radial-gradient(60% 50% at 50% 50%, #000 30%, transparent 80%)',
      }} />
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, textAlign: 'center', margin: '0 auto', maxWidth: 760 }}>
          <div className="pill"><span className="dot" />A OFERTA</div>
          <h2 className="h-1">Tudo que você viu acima. <span className="coral-grad">R$147.</span></h2>
        </div>

        <div className="fade-up d1 offer-card" style={{
          maxWidth: 560,
          margin: '56px auto 0',
          padding: 'clamp(28px, 4vw, 44px)',
          borderRadius: 24,
          background: 'linear-gradient(180deg, rgba(22,19,15,0.92) 0%, rgba(11,9,8,0.96) 100%)',
          border: '1px solid rgba(255,91,44,0.28)',
          position: 'relative',
        }}>
          {/* Animated rotating coral aura */}
          <div aria-hidden="true" className="offer-aura" />
          {/* Breathing gradient border */}
          <div aria-hidden="true" className="offer-breathe" />
          {/* Soft corner glints */}
          <div aria-hidden="true" className="offer-glint glint-tl" />
          <div aria-hidden="true" className="offer-glint glint-br" />

          <div style={{
            position: 'absolute', top: -16, left: '50%', transform: 'translateX(-50%)',
            zIndex: 3,
            background: 'linear-gradient(180deg, #FF7A4D, #FF5B2C)',
            color: '#fff',
            padding: '8px 18px', borderRadius: 999,
            fontFamily: 'Geist Mono, monospace',
            fontSize: 11, letterSpacing: '0.16em', fontWeight: 500,
            boxShadow: '0 0 24px -2px var(--coral-glow), 0 0 0 1px rgba(255,255,255,0.06) inset',
          }}>PREÇO DE LANÇAMENTO</div>

          <div style={{ textAlign: 'center', marginTop: 8, position: 'relative', zIndex: 2 }}>
            <div className="mono" style={{ color: 'var(--fg-mute)', fontSize: 15, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <span style={{ position: 'relative' }}>
                R$197
                <span style={{ position: 'absolute', left: -2, right: -2, top: '50%', height: 1.5, background: 'var(--coral)', transform: 'rotate(-8deg)' }} />
              </span>
            </div>
            <div className="price-big" style={{
              fontSize: 'clamp(76px, 10vw, 124px)',
              fontWeight: 700, letterSpacing: '-0.05em', lineHeight: 1,
              marginTop: 6,
              background: 'linear-gradient(180deg, #FFB897 0%, #FF7A4D 40%, #FF5B2C 100%)',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
              filter: 'drop-shadow(0 0 24px rgba(255,91,44,0.45))',
            }}>R$147</div>
            <div style={{ color: 'var(--fg-dim)', marginTop: 10, fontSize: 15 }}>à vista no <strong style={{ color: 'var(--fg)' }}>Pix</strong> ou em até <strong style={{ color: 'var(--fg)' }}>6x de R$27,58</strong></div>
          </div>

          <hr style={{ border: 0, height: 1, background: 'var(--line)', margin: '28px 0', position: 'relative', zIndex: 2 }} />

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, position: 'relative', zIndex: 2 }}>
            {inclusos.map((t, i) => (
              <div key={t} className="incl-row" style={{
                display: 'flex', alignItems: 'center', gap: 14,
                animation: `inclSlide .6s cubic-bezier(.2,.7,.2,1) ${i * 0.08}s both`,
              }}>
                <span style={{
                  flex: 'none', width: 22, height: 22, borderRadius: 50,
                  background: 'rgba(255,91,44,0.16)',
                  border: '1px solid rgba(255,91,44,0.4)',
                  display: 'grid', placeItems: 'center',
                }}>
                  <Icon.Check size={12} />
                </span>
                <span style={{ fontSize: 15 }}>{t}</span>
              </div>
            ))}
          </div>

          <a href="https://pay.kiwify.com.br/iIkOFg8" target="_blank" rel="noopener noreferrer" className="btn btn-primary xl glow shimmer-btn" style={{ marginTop: 32, position: 'relative', zIndex: 2 }}>
            Liberar acesso por R$147
            <Icon.ArrowRight />
          </a>

          <div className="mono meta-row" style={{
            marginTop: 16,
            fontSize: 11, letterSpacing: '0.14em', color: 'var(--fg-mute)',
            position: 'relative', zIndex: 2,
          }}>
            <span>ACESSO IMEDIATO</span>
            <span>GARANTIA 7 DIAS</span>
          </div>

          <div className="mono" style={{
            textAlign: 'center', marginTop: 22, paddingTop: 22,
            borderTop: '1px solid var(--line)',
            fontSize: 10, letterSpacing: '0.16em', color: 'var(--fg-mute)',
            position: 'relative', zIndex: 2,
          }}>COMPRA PROCESSADA POR KIWIFY</div>
        </div>

        <div className="fade-up d2" style={{
          maxWidth: 760, margin: '28px auto 0',
          padding: '22px 26px',
          borderRadius: 16,
          background: 'linear-gradient(180deg, rgba(61,139,61,0.10), rgba(61,139,61,0.04))',
          border: '1px solid rgba(80,170,90,0.32)',
          display: 'flex', gap: 14, alignItems: 'flex-start',
        }}>
          <div style={{
            flex: 'none', width: 30, height: 30, borderRadius: 50,
            background: '#3DB67A', color: '#fff',
            display: 'grid', placeItems: 'center',
            boxShadow: '0 0 18px -2px rgba(61,182,122,0.6)',
          }}>
            <Icon.Check size={14} color="#fff" />
          </div>
          <p style={{ margin: 0, color: 'var(--fg)', fontSize: 14.5, lineHeight: 1.6 }}>
            <strong style={{ color: '#7BD49F' }}>Garantia incondicional de 7 dias.</strong> <span style={{ color: 'var(--fg-dim)' }}>Compre, baixe, use por 7 dias. Se não economizar pelo menos 30 minutos no seu primeiro plantão depois da compra, peça reembolso e devolvemos 100% do valor. Sem perguntas. Sem fricção. Sem letrinha miúda.</span>
          </p>
        </div>
      </div>

      <style>{`
        @keyframes inclSlide {
          from { opacity: 0; transform: translateX(-12px); }
          to   { opacity: 1; transform: translateX(0); }
        }
        .offer-card .pay-chip:hover { border-color: rgba(255,91,44,0.5); color: var(--fg); transform: translateY(-1px); }
        .offer-aura {
          position: absolute; inset: -40%;
          background: conic-gradient(from 0deg, rgba(255,91,44,0.0) 0deg, rgba(255,91,44,0.5) 90deg, rgba(255,91,44,0.0) 180deg, rgba(255,140,80,0.4) 270deg, rgba(255,91,44,0.0) 360deg);
          filter: blur(70px); opacity: 0.5;
          animation: rotateAura 18s linear infinite;
          z-index: 0; pointer-events: none;
        }
        /* Breathing gradient border */
        .offer-breathe {
          position: absolute; inset: 0; border-radius: 24px; padding: 1.5px;
          background: linear-gradient(135deg,
            rgba(255,122,77,0.85) 0%,
            rgba(255,176,136,0.25) 35%,
            rgba(255,91,44,0.15) 60%,
            rgba(255,160,100,0.85) 100%);
          -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          -webkit-mask-composite: xor; mask-composite: exclude;
          opacity: 0.85;
          animation: breathe 5.5s ease-in-out infinite;
          z-index: 1; pointer-events: none;
        }
        @keyframes breathe {
          0%, 100% { opacity: 0.55; filter: blur(0.2px); }
          50%      { opacity: 1;    filter: blur(0px) drop-shadow(0 0 6px rgba(255,122,77,0.45)); }
        }
        /* Soft glint blooms in opposite corners */
        .offer-glint {
          position: absolute; width: 200px; height: 200px; border-radius: 50%;
          background: radial-gradient(circle, rgba(255,140,80,0.55) 0%, rgba(255,91,44,0) 60%);
          filter: blur(20px);
          z-index: 0; pointer-events: none;
        }
        .glint-tl { top: -80px; left: -80px; animation: glintA 7s ease-in-out infinite; }
        .glint-br { bottom: -80px; right: -80px; animation: glintB 7s ease-in-out infinite; }
        @keyframes glintA {
          0%, 100% { opacity: 0.35; transform: scale(0.9); }
          50%      { opacity: 0.75; transform: scale(1.15); }
        }
        @keyframes glintB {
          0%, 100% { opacity: 0.7;  transform: scale(1.1); }
          50%      { opacity: 0.3;  transform: scale(0.9);  }
        }
        @keyframes rotateAura { to { transform: rotate(360deg); } }
        .offer-card:hover { transform: translateY(-2px); }
        .offer-card { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
        .shimmer-btn { position: relative; overflow: hidden; }
        .shimmer-btn::before {
          content: ''; position: absolute; top: 0; left: -120%; height: 100%; width: 60%;
          background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
          transform: skewX(-18deg);
          animation: btnShimmer 3.6s ease-in-out infinite;
        }
        @keyframes btnShimmer { 0% { left: -120%; } 60% { left: 140%; } 100% { left: 140%; } }

        @media (max-width: 600px) {
          .offer-card { margin-left: 4px !important; margin-right: 4px !important; }
        }
      `}</style>
    </section>
  );
}

function FAQ() {
  const items = [
    { q: 'Para qual médico esse Kit é feito?', a: 'Médicos brasileiros, de qualquer especialidade, que atendem rotina ambulatorial, hospitalar ou pronto-socorro e querem reduzir o tempo gasto em prontuário, laudo, atestado e mensagens de paciente. Os prompts foram redigidos em português, com referência a CFM, LGPD, CID-10 e TISS/TUSS.' },
    { q: 'Preciso pagar ChatGPT Plus, Claude Pro ou Gemini Advanced?', a: 'Não. O Kit funciona inclusive nas versões gratuitas. As versões pagas dão respostas mais rápidas e contexto maior, mas não são obrigatórias.' },
    { q: 'Funciona para minha especialidade?', a: 'Os 200 prompts estão organizados em 10 contextos (anamnese, evolução, laudo, documentos, educação, mensagens, pesquisa, decisão clínica, redes sociais, gestão). Eles servem qualquer especialidade. Você ajusta o conteúdo clínico.' },
    { q: 'E quanto à Resolução CFM 2.336/2023 e à LGPD?', a: 'Os prompts foram desenhados para anonimização obrigatória dos dados de paciente, conforme Lei 13.709 (LGPD), e para conformidade com a Resolução CFM 2.336/2023 sobre uso de inteligência artificial na prática médica.' },
    { q: 'Quanto tempo leva pra começar a usar?', a: 'Em torno de 4 minutos. Você compra, recebe o e-mail, faz login no Dashboard, escolhe um prompt, copia e cola no ChatGPT, Claude ou Gemini.' },
    { q: 'O acesso é vitalício mesmo?', a: 'Sim. Pagamento único de R$147. Acesso ao Dashboard sem renovação, sem mensalidade. Atualizações futuras dos prompts incluídas.' },
    { q: 'Como funciona o pagamento?', a: 'Pagamento único de R$147 via Kiwify. À vista no Pix ou em até 6x de R$27,58 sem juros no cartão de crédito.' },
    { q: 'E se eu não gostar?', a: 'Você tem 7 dias de garantia incondicional. Se não economizar pelo menos 30 minutos no primeiro plantão depois da compra, peça reembolso e devolvemos 100% do valor.' },
    { q: 'O Kit substitui meu julgamento clínico?', a: 'Não. O Kit é uma ferramenta de produtividade. Os prompts auxiliam a redação e organização de documentos médicos. Toda decisão clínica permanece sob responsabilidade do médico.' },
    { q: 'Como funciona o suporte?', a: 'Suporte por e-mail em até 24h úteis em contato@medux.com.br. Tira dúvidas sobre uso do Dashboard, instalação e ajustes nos prompts.' },
  ];
  const [open, setOpen] = React.useState(0);

  return (
    <section className="section light" id="faq">
      <div className="container">
        <div className="fade-up" style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 18, maxWidth: 760 }}>
          <div className="pill light"><span className="dot" />DÚVIDAS COMUNS</div>
          <h2 className="h-1">Antes de comprar.</h2>
        </div>

        <div className="fade-up d1" style={{ maxWidth: 880, margin: '48px auto 0' }}>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{
                borderTop: i === 0 ? '1px solid rgba(21,17,13,0.1)' : 'none',
                borderBottom: '1px solid rgba(21,17,13,0.1)',
              }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', textAlign: 'left',
                  padding: '22px 4px',
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
                  fontSize: 17, fontWeight: 500, letterSpacing: '-0.015em',
                  color: 'var(--ink)',
                }}>
                  <span>{it.q}</span>
                  <span style={{
                    flex: 'none', width: 30, height: 30, borderRadius: 50,
                    border: '1px solid rgba(21,17,13,0.15)',
                    display: 'grid', placeItems: 'center',
                    transition: 'background .2s, color .2s, border-color .2s',
                    background: isOpen ? 'var(--coral)' : 'transparent',
                    color: isOpen ? '#fff' : 'var(--ink)',
                    borderColor: isOpen ? 'var(--coral)' : 'rgba(21,17,13,0.15)',
                  }}>
                    {isOpen ? <Icon.Minus /> : <Icon.Plus />}
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 400 : 0,
                  overflow: 'hidden',
                  transition: 'max-height .35s ease',
                }}>
                  <p style={{
                    margin: 0,
                    padding: '0 4px 24px',
                    fontSize: 15, lineHeight: 1.65, color: 'var(--ink-dim)',
                    maxWidth: '70ch',
                  }}>{it.a}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="section dark-rounded" style={{ position: 'relative', overflow: 'hidden' }}>
      <div className="mesh-bg" style={{ opacity: 0.85 }} />
      <div className="container" style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
        <h2 className="h-display fade-up" style={{ maxWidth: '20ch', margin: '0 auto' }}>
          A pergunta continua a mesma.<br />
          <span className="coral-grad">Você sabe usar IA?</span>
        </h2>
        <p className="lede fade-up d1" style={{ margin: '28px auto 0', textAlign: 'center', maxWidth: '60ch' }}>
          R$147. 200 prompts. Acesso imediato. Os médicos que sabem usar começaram em 2024. Você pode começar em 4 minutos.
        </p>
        <div className="fade-up d2" style={{ display: 'flex', justifyContent: 'center', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
          <a href="https://pay.kiwify.com.br/iIkOFg8" target="_blank" rel="noopener noreferrer" className="btn btn-primary lg glow">
            Liberar acesso por R$147
            <Icon.ArrowRight />
          </a>
          <a href="#faq" className="btn btn-ghost lg">
            Ver FAQ
            <Icon.ArrowDown />
          </a>
        </div>
        <div className="mono fade-up d3 meta-row" style={{
          marginTop: 26, fontSize: 12, letterSpacing: '0.16em',
          color: 'var(--fg-mute)', textTransform: 'uppercase',
        }}>
          <span>ACESSO IMEDIATO</span>
          <span>7 DIAS DE GARANTIA</span>
          <span>PIX OU CARTÃO EM ATÉ 6X</span>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', background: 'var(--bg-2)' }}>
      <div className="container" style={{ padding: '64px var(--gutter) 28px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1.3fr', gap: 40,
        }} className="grid-foot">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
              <img src="assets/medux-logo.png" alt="Medux" style={{ height: 26, width: 'auto', display: 'block' }} />
            </div>
            <p style={{ color: 'var(--fg-dim)', fontSize: 14, marginTop: 14, maxWidth: '32ch', lineHeight: 1.55 }}>
              Devolvendo o controle da carreira ao médico brasileiro.
            </p>
            <a href="https://www.instagram.com/meduxpro/" target="_blank" rel="noopener noreferrer" aria-label="Instagram @meduxpro" style={{
              marginTop: 16, display: 'inline-grid', placeItems: 'center',
              width: 36, height: 36, borderRadius: 8,
              border: '1px solid var(--line)', color: 'var(--fg-dim)',
            }}>
              <Icon.Instagram />
            </a>
          </div>

          {[
            { h: 'Produto', items: ['O que está incluso', 'Como funciona', 'Garantia', 'FAQ'] },
            { h: 'Legal',   items: ['Política de Privacidade', 'Termos de Uso', 'LGPD', 'Contato'] },
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--fg-mute)' }}>{col.h.toUpperCase()}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(i => (
                  <li key={i}><a href="#" style={{ color: 'var(--fg-dim)', fontSize: 14 }}>{i}</a></li>
                ))}
              </ul>
            </div>
          ))}

          <div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '0.16em', color: 'var(--fg-mute)' }}>NEWSLETTER</div>
            <p style={{ color: 'var(--fg-dim)', fontSize: 14, marginTop: 14 }}>Atualizações do Kit</p>
            <form style={{ display: 'flex', gap: 8, marginTop: 12 }} onSubmit={e => e.preventDefault()}>
              <input
                type="email"
                placeholder="seu@email.com"
                style={{
                  flex: 1, padding: '12px 14px',
                  background: 'rgba(255,255,255,0.04)',
                  border: '1px solid var(--line-2)',
                  borderRadius: 10, color: 'var(--fg)',
                  fontSize: 14, fontFamily: 'inherit',
                }}
              />
              <button type="submit" className="btn btn-primary" style={{ padding: '12px 16px', fontSize: 13 }}>Inscrever</button>
            </form>
          </div>
        </div>

        <hr className="hr-line" style={{ marginTop: 56 }} />

        <div className="mono" style={{
          marginTop: 24,
          display: 'flex', flexWrap: 'wrap', gap: 14, justifyContent: 'space-between',
          fontSize: 11, letterSpacing: '0.08em', color: 'var(--fg-mute)',
        }}>
          <span>CNPJ 62.713.973/0001-25 · SÃO PAULO, SP · CONTATO@MEDUX.COM.BR</span>
          <span>© 2026 MEDUX. TODOS OS DIREITOS RESERVADOS.</span>
        </div>
        <p style={{ color: 'var(--fg-mute)', fontSize: 12, marginTop: 14, maxWidth: '80ch', lineHeight: 1.55 }}>
          Este produto é educacional e não substitui o julgamento clínico do profissional médico.
        </p>
      </div>
      <style>{`
        @media (max-width: 980px) { .grid-foot { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 560px) { .grid-foot { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

window.Compliance = Compliance;
window.Author = Author;
window.Offer = Offer;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;