// Page components for Latma site

const PRODUCTS = [
  {
    key: 'natural',
    name: 'Iogurte Natural',
    tagline: 'Cremoso, leve e integral',
    weight: '850 g',
    img: 'assets/iogurte-natural.png',
    cardColor: '#3878D6',
    desc: 'Iogurte integral com consistência cremosa e sabor equilibrado. Feito apenas com leite fresco e fermento lácteo.',
    specs: { tipo: 'Integral', sabor: 'Natural', peso: '850 g', porcao: '170 g' },
    ingredientes: 'Leite integral pasteurizado e fermento lácteo.',
  },
  {
    key: 'morango',
    name: 'Iogurte de Morango',
    tagline: 'Doce na medida certa',
    weight: '850 g',
    img: 'assets/iogurte-morango.png',
    cardColor: '#E84A8C',
    desc: 'Iogurte integral com preparado de morango. Consistência cremosa e sabor equilibrado.',
    specs: { tipo: 'Integral', sabor: 'Morango', peso: '850 g', porcao: '170 g' },
    ingredientes: 'Leite integral pasteurizado, açúcar, preparado de morango e fermento lácteo.',
  },
  {
    key: 'ameixa',
    name: 'Iogurte de Ameixa',
    tagline: 'Suave, doce e cremoso',
    weight: '850 g',
    img: 'assets/iogurte-ameixa.png',
    cardColor: '#8B4A9C',
    desc: 'Iogurte integral com preparado de ameixa. Consistência cremosa e sabor equilibrado.',
    specs: { tipo: 'Integral', sabor: 'Ameixa', peso: '850 g', porcao: '170 g' },
    ingredientes: 'Leite integral pasteurizado, açúcar, preparado de ameixa e fermento lácteo.',
  },
  {
    key: 'coalho',
    name: 'Queijo de Coalho',
    tagline: 'Macio e na medida certa',
    weight: '1,2 kg / 600 g',
    img: 'assets/queijo-coalho.png',
    cardColor: '#EFC987',
    desc: 'Textura macia e uniforme, com salga equilibrada. Disponível em embalagens com peso aproximado de 1,2 kg e 600 g. Podendo haver variação de peso entre as peças.',
    specs: { tipo: 'Coalho', textura: 'Macia e uniforme', pesos: '1,2 kg e 600 g', salga: 'Equilibrada' },
    ingredientes: 'Leite pasteurizado, sal, cloreto de cálcio e coalho. Podendo haver variação de peso entre as peças.',
  },
];
window.PRODUCTS = PRODUCTS;

// === Hero Product Showcase (auto-rotating) ===
function HeroShowcase() {
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setIndex(i => (i + 1) % PRODUCTS.length);
    }, 4200);
    return () => clearInterval(id);
  }, [paused]);

  return (
    <div className="hero-visual" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="hero-product-card">
        {PRODUCTS.map((p, i) => (
          <div
            key={p.key}
            className={`hero-product-slide ${i === index ? 'active' : ''}`}
            style={{ background: p.cardColor }}
          >
            <img src={p.img} alt={p.name} className="hero-product-img" />
          </div>
        ))}
        <div className="hero-product-label">
          <div className="name" key={PRODUCTS[index].key}>
            {PRODUCTS[index].name}
            <small>{PRODUCTS[index].weight} · {PRODUCTS[index].tagline}</small>
          </div>
        </div>
        <div className="hero-product-dots">
          {PRODUCTS.map((p, i) => (
            <button
              key={p.key}
              className={`hero-dot ${i === index ? 'active' : ''}`}
              onClick={() => setIndex(i)}
              aria-label={`Mostrar ${p.name}`}
            ></button>
          ))}
        </div>
      </div>
    </div>
  );
}
window.HeroShowcase = HeroShowcase;

// ============ HOME ============
function FeaturedCarousel({ onProductClick }) {
  const trackRef = React.useRef(null);
  const [canPrev, setCanPrev] = React.useState(false);
  const [canNext, setCanNext] = React.useState(true);

  const updateButtons = React.useCallback(() => {
    const el = trackRef.current;
    if (!el) return;
    setCanPrev(el.scrollLeft > 8);
    setCanNext(el.scrollLeft + el.clientWidth < el.scrollWidth - 8);
  }, []);

  React.useEffect(() => {
    const el = trackRef.current;
    if (!el) return;
    updateButtons();
    el.addEventListener('scroll', updateButtons, { passive: true });
    window.addEventListener('resize', updateButtons);
    return () => {
      el.removeEventListener('scroll', updateButtons);
      window.removeEventListener('resize', updateButtons);
    };
  }, [updateButtons]);

  const scrollBy = (dir) => {
    const el = trackRef.current;
    if (!el) return;
    const card = el.querySelector('.product-card');
    const step = card ? card.getBoundingClientRect().width + 20 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };

  return (
    <div className="carousel">
      <div className="carousel-track" ref={trackRef}>
        {PRODUCTS.map(p => (
          <div className="product-card carousel-item" key={p.key} onClick={() => onProductClick(p)} style={{ background: p.cardColor }}>
            <img src={p.img} alt={p.name} className="product-card-img" />
            <div className="product-card-overlay"></div>
            <div className="product-card-meta">
              <div>
                <div className="label">{p.weight}</div>
                <h3>{p.name}</h3>
              </div>
              <div className="more"><ArrowUpRight size={16} /></div>
            </div>
          </div>
        ))}
      </div>
      <button
        className="carousel-btn carousel-btn-prev"
        onClick={() => scrollBy(-1)}
        disabled={!canPrev}
        aria-label="Produto anterior"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M15 18 L9 12 L15 6" />
        </svg>
      </button>
      <button
        className="carousel-btn carousel-btn-next"
        onClick={() => scrollBy(1)}
        disabled={!canNext}
        aria-label="Próximo produto"
      >
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
          <path d="M9 6 L15 12 L9 18" />
        </svg>
      </button>
    </div>
  );
}
window.FeaturedCarousel = FeaturedCarousel;

function HomePage({ onNavigate, onProductClick }) {
  return (
    <div className="page">
      <section className="hero">
        <div className="hero-bg-shape hero-bg-1"></div>
        <div className="hero-bg-shape hero-bg-2"></div>
        <PalmTree color="#1F4FA8" className="hero-palm hero-palm-1" />
        <PalmTree color="#1F4FA8" className="hero-palm hero-palm-2" />
        <Bunting />

        <div className="hero-inner">
          <div>
            <div className="hero-eyebrow">
              <Star size={12} /> Direto de Vitorino Freire · MA
            </div>
            <h1>
              O sabor do <span className="script">Maranhão</span> em cada copo.
            </h1>
            <p className="hero-sub">
              Iogurte e queijo com o leite que sai do curral pela manhã. Sem pressa, sem atalho.
            </p>
            <div className="hero-actions">
              <button className="btn btn-primary" onClick={() => onNavigate('produtos')}>
                Ver produtos <ArrowRight size={14} />
              </button>
              <button className="btn btn-ghost" onClick={() => onNavigate('historia')}>
                Conheça a história <span className="arrow"><ArrowRight size={14} /></span>
              </button>
            </div>
          </div>

          <HeroShowcase />
        </div>
      </section>

      <section className="featured">
        <div className="featured-head">
          <h2>O <em>melhor</em> da nossa<br/>casa para a sua.</h2>
          <p>Nossos produtos carregam o sabor, a textura e o cuidado de quem faz comida boa todos os dias com os melhores ingredientes.</p>
        </div>
        <FeaturedCarousel onProductClick={onProductClick} />
      </section>

      <section className="values">
        <div className="values-grid">
          <div className="value">
            <span className="num">01</span>
            <h3>Leite que vem <em>do nosso quintal</em></h3>
            <p>Trabalhamos com pequenos produtores da região e produção de leite própria, todos a menos de 80 km da fábrica. O leite chega à pasteurização no mesmo dia da ordenha.</p>
          </div>
          <div className="value">
            <span className="num">02</span>
            <h3>Receitas <em>antigas</em>, jeito moderno</h3>
            <p>O queijo de coalho é produzido com leite de alta qualidade e sem outros aditivos além de sal, cloreto de cálcio e coalho. O laboratório só garante que o sabor de antes chegue seguro até a sua mesa.</p>
          </div>
          <div className="value">
            <span className="num">03</span>
            <h3>Sem pressa, <em>sem atalho</em></h3>
            <p>Fermentação lenta, no tempo certo. A gente entrega quando está pronto — não antes. É por isso que o iogurte tem aquela textura.</p>
          </div>
        </div>
      </section>
    </div>
  );
}
window.HomePage = HomePage;

// ============ NOSSA HISTÓRIA ============
function HistoriaPage() {
  return (
    <div className="page">
      <section className="story-hero">
        <Bunting colors={['#3878D6', '#EFC987', '#1F4FA8', '#EFC987', '#3878D6']} />
        <div className="story-hero-inner">
          <div className="eyebrow"><Star size={12} /> Quem Somos</div>
          <h1>Sabor e <span className="script">tradição</span><br/>do <em>Maranhão</em>.</h1>
          <p>A Laticínios Maranhão nasceu com o propósito de valorizar o sabor e a tradição dos produtos maranhenses. Trabalhamos com cuidado em cada etapa do processo, transformando leite de qualidade em queijo de coalho e iogurtes feitos com responsabilidade e orgulho do que produzimos.</p>
        </div>
      </section>

      <section className="story-quote">
        <div className="story-quote-inner story-quote-inner--solo">
          <div>
            <q>O queijo de coalho é produzido com leite de alta qualidade e sem outros aditivos além de leite, sal, cloreto de cálcio e coalho. O laboratório só garante que o sabor de antes chegue seguro até a sua mesa.</q>
            <div className="attr">Latma Laticínios · Vitorino Freire, MA</div>
          </div>
        </div>
      </section>
    </div>
  );
}
window.HistoriaPage = HistoriaPage;

// ============ PRODUTOS ============
function ProdutosPage({ onProductClick }) {
  const [filter, setFilter] = React.useState('todos');
  const filters = [
    { key: 'todos', label: 'Todos' },
    { key: 'iogurte', label: 'Iogurtes' },
    { key: 'queijo', label: 'Queijos' },
  ];

  const filtered = PRODUCTS.filter(p => {
    if (filter === 'todos') return true;
    if (filter === 'iogurte') return p.key === 'natural' || p.key === 'morango' || p.key === 'ameixa';
    if (filter === 'queijo') return p.key === 'coalho';
    return true;
  });

  return (
    <div className="page">
      <section className="products-hero">
        <Bunting colors={['#3878D6', '#E84A8C', '#EFC987', '#5BA85A', '#1F4FA8']} />
        <div className="eyebrow" style={{ marginBottom: 24 }}><Star size={12} /> Linha 2026</div>
        <h1>Nossos <em>produtos</em></h1>
        <p>Tudo que sai da fábrica leva o cuidado de gerações. Clique em qualquer produto para ver ficha técnica e ingredientes.</p>
      </section>

      <div className="products-filter">
        {filters.map(f => (
          <button
            key={f.key}
            className={`filter-chip ${filter === f.key ? 'active' : ''}`}
            onClick={() => setFilter(f.key)}
          >
            {f.label}
          </button>
        ))}
      </div>

      <div className="products-grid">
        {filtered.map(p => (
          <div className="product-detail" key={p.key} onClick={() => onProductClick(p)}>
            <div className="product-detail-img" style={{ background: p.cardColor }}>
              <img src={p.img} alt={p.name} />
              <div className="product-detail-tag">★ Latma</div>
            </div>
            <div className="product-detail-body">
              <div className="meta">
                <span className="weight">{p.weight}</span>
              </div>
              <h3>{p.name}</h3>
              <p>{p.desc}</p>
              <div className="product-detail-cta">
                Ver detalhes <span className="arrow"><ArrowRight size={14} /></span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}
window.ProdutosPage = ProdutosPage;

// ============ CONTATO ============
function ContatoPage() {
  const [form, setForm] = React.useState({ nome: '', email: '', telefone: '', assunto: 'duvida', mensagem: '' });
  const [sent, setSent] = React.useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    // Transforma o estado do formulário em FormData para o PHP entender
    const formData = new FormData();
    Object.keys(form).forEach(key => formData.append(key, form[key]));

    try {
      const response = await fetch('enviar.php', {
        method: 'POST',
        body: formData
      });
      
      const result = await response.json();
      
      if (result.ok) {
        setSent(true);
        setTimeout(() => setSent(false), 5000);
        setForm({ nome: '', email: '', telefone: '', assunto: 'duvida', mensagem: '' });
      } else {
        alert("Erro: " + result.error);
      }
    } catch (error) {
      alert("Erro ao tentar conectar com o servidor.");
    }
  };

  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <div className="page">
      <section className="contact-hero">
        <Bunting colors={['#3878D6', '#EFC987', '#1F4FA8', '#EFC987', '#3878D6']} />
        <div className="eyebrow"><Star size={12} /> Estamos por aqui</div>
        <h1>Vamos <em>conversar?</em></h1>
        <p>Lojista, restaurante, fã de iogurte ou só com uma dúvida sobre o queijo — mande a sua mensagem. A gente responde rápido (e gosta).</p>
      </section>

      <div className="contact-grid">
        <div className="contact-info-card">
          <h2><em>Onde</em> a gente fica</h2>
          <p className="intro">A fábrica fica em Vitorino Freire, e o leite vem do interior — dos pequenos produtores parceiros da região.</p>

          <div className="contact-row">
            <div className="contact-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
              </svg>
            </div>
            <div>
              <div className="label">Fábrica</div>
              <div className="value">Fazenda Santa Luzia · Povoado Santa Luzia<br/>Vitorino Freire · MA · 65.320-000</div>
            </div>
          </div>

          <div className="contact-row">
            <div className="contact-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
              </svg>
            </div>
            <div>
              <div className="label">Instagram</div>
              <div className="value">@laticiniosmaranhao</div>
            </div>
          </div>

          <div className="contact-row">
            <div className="contact-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
              </svg>
            </div>
            <div>
              <div className="label">E-mail</div>
              <div className="value">latma@outlook.com.br</div>
            </div>
          </div>

          <div className="contact-row">
            <div className="contact-icon">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/><polyline points="12,6 12,12 16,14"/>
              </svg>
            </div>
            <div>
              <div className="label">Atendimento</div>
              <div className="value">Seg a Sex · 8h às 18h<br/>Sáb · 8h às 12h</div>
            </div>
          </div>
        </div>

        <form className="contact-form" onSubmit={handleSubmit}>
          <h3>Manda a sua mensagem</h3>
          <p className="sub">Preenche aí que a gente volta em até 1 dia útil.</p>

          <div className="form-group">
            <label>Seu nome</label>
            <input type="text" required value={form.nome} onChange={set('nome')} placeholder="Como podemos te chamar" />
          </div>
          <div className="form-row">
            <div className="form-group">
              <label>E-mail</label>
              <input type="email" required value={form.email} onChange={set('email')} placeholder="você@email.com" />
            </div>
            <div className="form-group">
              <label>Telefone</label>
              <input type="tel" value={form.telefone} onChange={set('telefone')} placeholder="(98) 9 0000-0000" />
            </div>
          </div>
          <div className="form-group">
            <label>Sobre o que é?</label>
            <select value={form.assunto} onChange={set('assunto')}>
              <option value="duvida">Tirar uma dúvida</option>
              <option value="revenda">Quero revender Latma</option>
              <option value="restaurante">Sou restaurante / mercado</option>
              <option value="visita">Quero agendar uma visita</option>
              <option value="imprensa">Imprensa</option>
              <option value="outro">Outro assunto</option>
            </select>
          </div>
          <div className="form-group">
            <label>Mensagem</label>
            <textarea required value={form.mensagem} onChange={set('mensagem')} placeholder="Conta pra gente..."></textarea>
          </div>
          <button type="submit" className="contact-submit">Enviar mensagem</button>

          {sent && (
            <div className="contact-success">
              <CheckIcon size={20} />
              Mensagem enviada! A gente volta logo logo.
            </div>
          )}
        </form>
      </div>
    </div>
  );
}
window.ContatoPage = ContatoPage;