Quero que você crie uma tela de produto RESPONSIVA focada em MOBILE, replicando o layout das imagens que vou descrever abaixo. Use a seguinte stack e regras:

STACK
- Vite + React + TypeScript.
- TailwindCSS para todo o layout e estilização.
- Nada de libs adicionais de UI (sem Material, Chakra, etc).
- Componentes funcionais com hooks.
- Não coloque comentários no código.

ARQUIVO / ESTRUTURA
- Um único componente principal: `ProductPage`.
- O arquivo pode se chamar `ProductPage.tsx`.
- O layout deve ser mobile-first (pensado para ~390px de largura) e apenas se adaptar bem a telas maiores centralizando o conteúdo (máx. 480–600px).
- Fundo branco, layout bem próximo de app de e-commerce.

CONCEITO VISUAL GERAL
- Página tipo Shopee/Mercado Livre mobile:
  - Topo com área de imagem do produto.
  - Logo abaixo, título, subtítulo e preço.
  - Botões grandes “CARRINHO” e “COMPRAR” fixados na parte inferior da tela em mobile.
  - Seção de avaliações com nota média, barras de distribuição e alguns cards curtos de review.
  - Seção de descrição e especificações técnicas.
  - Seção de “Recursos e Diferenciais”.
  - Seção “Conteúdo da Embalagem”.
  - Seção de FAQ (perguntas frequentes) com acordions.
  - Modal/BottomSheet para seleção de cor e armazenamento (parecido com a 7ª imagem).
  - Modal com informações da loja (como na imagem do “AtacadosBrasil”).
  - Botão/flutuante ou link de “Informações da Loja”.

DADOS DO PRODUTO (FIXOS MAS FÁCEIS DE ALTERAR)
- Nome do produto: `Galaxy Tab S10 FE`.
- Subtítulo: `Seu primeiro tablet com IA`.
- Tela principal: mostrar uma imagem de tablet (usar qualquer imagem estática por enquanto, mas o código deve permitir trocar facilmente a URL da imagem depois).
- Textos principais:
  - Mostrar preço chamativo em vermelho/rosa forte (igual Shopee): `R$ 43,71` para a configuração base.
  - Logo abaixo, texto de preço antigo riscado: `R$ 2.209,00`.
  - Mostrar também “Economize 98%” (ou valor próximo).
  - Badge com “OFERTA RELÂMPAGO”.
  - Badge de contagem regressiva fake (pode ser estático, por exemplo “Termina em 00:02:43” – não precisa contador real).
- Exibir badge de avaliação: `4,8` com `1.547 avaliações`.
- Mostrar alguns trechos de reviews com nome (Lucas M., Juliana L., etc) e texto curto.

VARIAÇÕES / LÓGICA DE PREÇO
- As opções de cor: `Cinza`, `Azul`, `Prata`.
- As opções de armazenamento: `64GB`, `128GB`, `256GB`.

Baseie os preços na 7ª imagem (valores base para cada armazenamento):
- 64GB: R$ 43,71
- 128GB: R$ 59,71
- 256GB: R$ 72,41

Agora adicione uma lógica de variação de “tamanho” que altera o preço em R$ 10,00 a cada passo de tamanho maior. Mesmo que o produto seja um tablet só, quero essa lógica pronta.

Implemente assim:

- Crie um enum ou union de string para tamanho de tela:
  - `"padrao"` (ou `default`)
  - `"medio"`
  - `"grande"`

- Crie a seguinte estrutura em código (você pode ajustar os nomes, mas mantenha os valores):

  const basePrices = {
    "64GB": 43.71,
    "128GB": 59.71,
    "256GB": 72.41,
  };

  const screenExtra = {
    padrao: 0,
    medio: 10,
    grande: 20,
  };

- O preço final exibido deve ser:
  
  `finalPrice = basePrices[storage] + screenExtra[selectedScreenSize]`

- Exiba o preço com formatação de moeda brasileira (R$ X,XX).
- Inicialmente:
  - storage default: `64GB`
  - tamanho de tela default: `padrao`
  - cor default: `Cinza`.

INTERAÇÃO DE VARIAÇÃO (MODAL / BOTTOM SHEET)
- Ao clicar em uma área tipo “Selecione as opções” ou em cima do preço, abrir um modal/bottom sheet (ocupando 70–80% da altura).
- Dentro do modal:
  - Mostrar miniatura do produto.
  - Mostrar o preço atual calculado.
  - Uma seção de seleção de cor (3 cards com bordas arredondadas, mostrando mini imagem e nome da cor).
  - Uma seção de seleção de armazenamento (cards para 64GB, 128GB, 256GB).
  - Uma seleção simples de tamanho de tela (3 botões: “Padrão”, “Médio (+R$ 10)”, “Grande (+R$ 20)”).
  - Botão “Confirmar – R$ XX,XX” fixo na parte inferior do modal, com o valor correspondente do cálculo.
- Ao confirmar, o modal fecha e a escolha atualiza o estado principal da página (cor/tamanho/tela).

BOTÕES DE AÇÃO (CARRINHO / COMPRAR)
- Na parte inferior da tela (fixo), deve haver um container com dois botões:
  - Esquerda: `CARRINHO` (cor branca com borda e texto colorido).
  - Direita: `COMPRAR` (fundo rosa/vermelho forte, texto branco).
- Em telas maiores, esse container pode ficar imediatamente abaixo do conteúdo, mas ainda visualmente separado.

COMPORTAMENTO DO BOTÃO COMPRAR
- O botão “COMPRAR” deve redirecionar para um link do Vega Checkout.
- Crie uma constante no topo do arquivo:

  const VEGA_CHECKOUT_URL = "https://minha-url-do-vega-checkout.com";

- Quando o usuário clicar em COMPRAR, executar:

  `window.location.href = VEGA_CHECKOUT_URL;`

- Não precisa enviar dados da variação; apenas redirecionar.

SEÇÃO DE AVALIAÇÕES
- Mostrar:
  - Nota grande: `4,8`
  - Abaixo, “1.547 avaliações”.
  - Ao lado, barras horizontais para as notas 5, 4, 3, 2, 1 com proporções aproximadas:
    - 5: 1268
    - 4: 186
    - 3: 82
    - 2: 15
    - 1: 5
- Abaixo, listar 3–4 reviews em cards simples:
  - Nome + tempo (ex.: “3 dias atrás”, “2 semanas atrás”).
  - Texto curto de elogio.
  - Pequenas imagens em miniatura em alguns reviews (usar placeholders).

SEÇÃO DESCRIÇÃO E ESPECIFICAÇÕES
- Bloco “Descrição” com texto:
  - “Samsung Galaxy Tab S10 FE com design ultrafino de 6.0mm e bordas reduzidas...”
  - Fale de:
    - Tela 10.9" TFT LCD 90Hz
    - Processador Samsung Exynos 1580
    - 8GB RAM
    - 128GB armazenamento (mas isso é só texto, já temos variação)
    - IP68 contra água e poeira
    - Vision Booster 800 nits
    - S Pen incluída
- Logo abaixo, um card com “Especificações Técnicas” em formato de lista:
  - Tela: 10.9" TFT LCD 90Hz
  - Processador: Samsung Exynos 1580
  - RAM: 8GB
  - Armazenamento: 128GB
  - Resistência: IP68 (água e poeira)
  - S Pen: Incluída
  - Bateria: 8.000 mAh
  - Peso: 465g

SEÇÃO RECURSOS E DIFERENCIAIS
- Lista com ícone de check:
  - Inteligência Artificial Integrada: assistente matemático.
  - Pesquisa Inteligente: Circle to Search com IA do Google.
  - Display Imersivo: bordas ultrafinas e 90Hz.
  - Resistência IP68.
  - Acabamento Premium (6.0mm).
  - S Pen inclusa.

CONTEÚDO DA EMBALAGEM
- Título: “Conteúdo da Embalagem”.
- Lista:
  - Samsung Galaxy Tab S10 FE 64GB
  - S Pen (Caneta Stylus Original)
  - Cabo USB-C
  - Garantia Oficial Samsung (12 meses)
  - Nota Fiscal Eletrônica

FAQ (PERGUNTAS FREQUENTES)
- Criar um componente simples de accordion (sem lib externa):
  - “O produto é original?”
  - “Quanto tempo demora a entrega?”
  - “O tablet vem com nota fiscal?”
  - “Qual a garantia do produto?”
  - “Posso trocar se não gostar?”
  - “Vem S Pen na caixa?”
- Cada pergunta, ao clicar, abre a resposta (texto básico).

INFORMAÇÕES DA LOJA (MODAL)
- Botão ou link “Informações da Loja” perto da descrição ou do título da loja.
- Ao clicar, abrir um modal central:
  - Nome da loja: “AtacadosBrasil”.
  - Subtítulo: “Distribuidor Autorizado Samsung”.
  - Avaliação: 4.9 (15.234 avaliações).
  - Horário de atendimento (Seg–Sex, Sábado, Domingo fechado).
  - Localização: “Av. Paulista, 1000 – Bela Vista, São Paulo – SP”.
  - Lista de benefícios:
    - Política de Devolução: até 7 dias.
    - Garantia do Fabricante: 12 meses.
    - Entrega Expressa: frete grátis com rastreamento.
    - Compra Protegida: pagamento 100% seguro SSL.
  - Rodapé com estatísticas:
    - 2.4M seguidores
    - 52K produtos
    - 98% satisfação.

LAYOUT E TAILWIND
- Use muito `flex`, `gap`, `rounded-xl`, `shadow-sm`/`shadow-md`, `border`, `p-4`, etc.
- Largura máxima do conteúdo: `max-w-md` e `mx-auto`.
- O header com imagem do produto deve ocupar boa parte do topo, com background cinza claro por trás da imagem.
- Botões principais:
  - CARRINHO: `border`, `bg-white`, `text-pink-600`.
  - COMPRAR: `bg-pink-600`, `text-white`, `font-semibold`.
- Use `sticky` ou `fixed` para manter a barra de botões visível no fundo da tela em mobile.

RESPONSIVIDADE
- Mobile é prioridade: tudo deve ficar confortável em 360–430px de largura.
- Em telas maiores, apenas centralize o conteúdo com `max-w-md mx-auto` e aumente um pouco os paddings (não precisa redesign completo).

ENTREGA FINAL
- Entregar o componente `ProductPage` pronto, com todos os estados:
  - `selectedColor`
  - `selectedStorage`
  - `selectedScreenSize`
  - `isOptionsModalOpen`
  - `isStoreModalOpen`
- O preço exibido na tela principal SEMPRE reflete o cálculo baseado nas seleções atuais.
- Não adicionar comentários no código.
