// sections-top.jsx — Nav, Hero, Pacotes, Builder (interactive)

const { useState, useMemo, useEffect } = React;

const Nav = () => (
  <header className="cck-nav">
    <a href="#topo" className="cck-logo">
      <span className="cck-logo-mark" aria-hidden="true">
        <svg viewBox="0 0 56 40" width="56" height="40">
          <ellipse cx="28" cy="20" rx="26" ry="14" fill="none" stroke="#7c1d1d" strokeWidth="1.4"/>
          <ellipse cx="28" cy="20" rx="22" ry="11" fill="none" stroke="#b94a16" strokeWidth=".8"/>
          <path d="M16 22 Q 28 14, 40 22" stroke="#7c1d1d" strokeWidth="1.2" fill="none" strokeLinecap="round"/>
          <circle cx="22" cy="19" r="1.4" fill="#7c1d1d"/>
          <circle cx="34" cy="19" r="1.4" fill="#7c1d1d"/>
        </svg>
      </span>
      <span className="cck-logo-text">
        <span className="cck-logo-name">Comida Caseira</span>
        <span className="cck-logo-place">KOSAI · 湖西</span>
      </span>
    </a>
    <nav className="cck-nav-links">
      <a href="#pacotes">Pacotes</a>
      <a href="#montar">Monte o seu</a>
      <a href="#cardapio">Cardápio</a>
      <a href="#quem">Quem cozinha</a>
      <a href="#faq">FAQ</a>
    </nav>
    <a href="https://wa.me/819017254898" className="cck-nav-cta" target="_blank" rel="noopener">
      Pedir no Zap →
    </a>
  </header>
);

const Hero = () => (
  <section className="cck-hero" id="topo">
    <div className="cck-hero-grid">
      <div className="cck-hero-text">
        <div className="cck-hero-eyebrow">
          <span className="cck-dot"></span>
          Misturas brasileiras congeladas · entrega em todo Japão
        </div>
        <h1 className="cck-hero-h1">
          <span>Hoje</span> <em>você</em>
          <span className="cck-hero-h1-line2">não cozinha.</span>
        </h1>
        <p className="cck-hero-sub">
          Feijoada de panela de pressão. Frango à parmegiana coberto de queijo.
          Picadinho com cheiro de cebola refogada. Feito aqui em Kosai pela{" "}
          <strong>Dona da casa</strong> — congelado na hora, na sua porta em até 7 dias.
        </p>
        <div className="cck-hero-cta">
          <a href="#pacotes" className="cck-btn cck-btn-primary">Ver os 3 pacotes</a>
          <a href="https://wa.me/819017254898" target="_blank" rel="noopener" className="cck-btn cck-btn-ghost">
            Falar no WhatsApp
          </a>
        </div>
        <div className="cck-hero-stats">
          <div>
            <div className="cck-stat-num">¥750</div>
            <div className="cck-stat-lbl">por marmita<br/><span>no Pacote Verde</span></div>
          </div>
          <div>
            <div className="cck-stat-num">5 min</div>
            <div className="cck-stat-lbl">no microondas<br/><span>e janta servida</span></div>
          </div>
          <div>
            <div className="cck-stat-num">7 dias</div>
            <div className="cck-stat-lbl">de antecedência<br/><span>cozinhado sob encomenda</span></div>
          </div>
        </div>
      </div>

      <div className="cck-hero-art">
        <div className="cck-hero-stack">
          <div className="cck-hero-tilt cck-hero-tilt-1">
            <MarmitaBox dish="Feijoada" color="#2d1810" size={260} label="04 · Feijoada"/>
          </div>
          <div className="cck-hero-tilt cck-hero-tilt-2">
            <MarmitaBox dish="Parmegiana" color="#b54a1f" size={240} label="05 · Parmegiana"/>
          </div>
          <div className="cck-hero-tilt cck-hero-tilt-3">
            <MarmitaBox dish="Escondidinho" color="#a55a23" size={220} label="11 · Escondidinho"/>
          </div>
          <Stamp color="#7c1d1d" rotate={-10}>
            <span style={{fontSize:11}}>Feito hoje</span><br/>
            <span style={{fontSize:14,fontWeight:700}}>Congelado hoje</span>
          </Stamp>
        </div>
        <div className="cck-hero-handwritten">
          <span>com tempero de mãe →</span>
        </div>
      </div>
    </div>

    {/* Ticker */}
    <div className="cck-ticker" aria-hidden="true">
      <div className="cck-ticker-track">
        {Array.from({length:3}).map((_,r)=>(
          <div key={r} className="cck-ticker-row">
            <span>Feijoada</span><span>·</span>
            <span>Frango à Parmegiana</span><span>·</span>
            <span>Picadinho de carne</span><span>·</span>
            <span>Escondidinho</span><span>·</span>
            <span>Strogonoff</span><span>·</span>
            <span>Calabresa acebolada</span><span>·</span>
            <span>Lasanha à bolonhesa</span><span>·</span>
            <span>Frango com quiabo</span><span>·</span>
            <span>Costelinha</span><span>·</span>
            <span>Carne de panela</span><span>·</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Promises = () => (
  <section className="cck-promises">
    <div className="cck-promises-grid">
      <div className="cck-promise">
        <div className="cck-promise-num">01</div>
        <h3>Mais barato<br/>que conbini.</h3>
        <p>¥750 por marmita no Pacote Verde. Conbini bento custa ¥800-1.000 e nem chega perto do sabor de casa.</p>
      </div>
      <div className="cck-promise">
        <div className="cck-promise-num">02</div>
        <h3>Cozinha de casa,<br/>não fábrica.</h3>
        <p>Panela no fogão, mão refogando a cebola, foto do dia. Sem ultracongelamento industrial, sem químico.</p>
      </div>
      <div className="cck-promise">
        <div className="cck-promise-num">03</div>
        <h3>Brasil na mesa,<br/>em qualquer cidade.</h3>
        <p>Local em Kosai e Toyohashi. Pro Japão inteiro via takyubin congelado — <em>frete já incluso</em>.</p>
      </div>
      <div className="cck-promise">
        <div className="cck-promise-num">04</div>
        <h3>Garantia<br/><em>¥1.500</em> de volta.</h3>
        <p>Experimentou e não gostou? Devolvemos <em>¥1.500 de crédito</em> no próximo pedido. Sem briga, sem letrinha miúda.</p>
      </div>
    </div>
  </section>
);

const Pacotes = () => (
  <section className="cck-pacotes" id="pacotes">
    <SectionLabel num="01" label="Os pacotes" color="#7c1d1d"/>
    <div className="cck-section-head">
      <h2 className="cck-h2">Três pacotes <em>fixos</em>.<br/>Cada um já com as misturas escolhidas.</h2>
      <p className="cck-h2-sub">Cada pacote vem em <strong>duplas</strong> — 2 marmitas iguais por mistura. <strong>As misturas inclusas são fixas</strong> (do 1 ao N do cardápio). Você ainda pode trocar uma ou duas, se quiser ajustar. Pedidos com 7 dias de antecedência. Frete incluso.</p>
    </div>

    <div className="cck-pacotes-grid">
      {PACOTES.map((p) => (
        <div key={p.id} className={`cck-pacote ${p.destaque ? "cck-pacote-destaque":""}`} style={{"--pc": p.cor, "--pcl": p.corClara}}>
          {p.destaque && <div className="cck-pacote-badge">Mais pedido</div>}
          <div className="cck-pacote-head">
            <div className="cck-pacote-nome">{p.nome}</div>
            <div className="cck-pacote-range">{p.rangeLabel}</div>
          </div>
          <div className="cck-pacote-stats">
            <div><span className="cck-pacote-stat-big">{p.duplas}</span> duplas</div>
            <div className="cck-pacote-x">×</div>
            <div><span className="cck-pacote-stat-big">2</span> = {p.misturas} marmitas</div>
          </div>
          <div className="cck-pacote-preco">
            <span className="cck-pacote-y">¥</span>
            <span className="cck-pacote-valor">{p.preco.toLocaleString("pt-BR").replace(/\./g, ".")}</span>
          </div>
          <div className="cck-pacote-por">
            ≈ ¥{Math.round(p.preco / p.misturas)} por marmita
          </div>
          <p className="cck-pacote-desc">{p.descricao}</p>
          <div className="cck-pacote-trocas">{p.trocas}</div>
          <a href="#montar" className="cck-pacote-cta">
            Ver misturas e pedir
            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
              <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
      ))}
    </div>

    <div className="cck-pacotes-foot">
      <Squiggle color="#b94a16" width={80}/>
      <span>Aceita Rakuten Pay · au PAY · PayPay · Visa/Master · Depósito Yûcho</span>
      <Squiggle color="#b94a16" width={80}/>
    </div>
  </section>
);

// ─────────────────────────────────────────────────────────────────────────────
// Builder: pacote fixo (1 ao N) + linhas de troca (substituir X por Y)
// Regras do cardápio:
//  - Verde: 1 troca grátis · até 4 no total (3 pagas)
//  - Azul:  2 trocas grátis · até 5 no total (3 pagas)
//  - Laranja: 2 trocas grátis · até 6 no total (4 pagas)
//  - Custo: as primeiras N (trocasGratis) são grátis.
//          Cada troca acima desse número = +¥300.
// ─────────────────────────────────────────────────────────────────────────────

// Custo de uma troca específica pela posição na lista.
// idx é zero-based: idx < trocasGratis = grátis · senão +¥300.
function custoTrocaPorIndice(idx, trocasGratis) {
  return idx < trocasGratis ? 0 : 300;
}

const Builder = () => {
  const [pacoteId, setPacoteId] = useState("azul");
  // trocas: array de { de: numero (1..N), para: nome (string) }
  const [trocas, setTrocas] = useState([]);

  const pacote = PACOTES.find(p => p.id === pacoteId);
  const misturasIncluidas = pacote.incluiNumeros.map(n => MISTURAS.find(m => m.n === n));

  // Opções fora do pacote = MISTURAS não inclusas + OPCIONAIS especiais
  const misturasForaPacote = MISTURAS.filter(m => !pacote.incluiNumeros.includes(m.n));
  const opcoesParaTroca = [
    ...misturasForaPacote.map(m => ({ tipo:"mistura", n:m.n, nome:m.nome, tag:m.tag })),
    ...OPCIONAIS.map(o => ({ tipo:"opcional", n:null, nome:o.nome, tag:o.tag }))
  ];

  // Reset trocas ao mudar pacote
  useEffect(() => { setTrocas([]); }, [pacoteId]);

  const adicionarTroca = () => {
    if (trocas.length >= pacote.maxTrocas) return;
    setTrocas([...trocas, { de:null, para:null }]);
  };
  const removerTroca = (idx) => {
    setTrocas(trocas.filter((_, i) => i !== idx));
  };
  const atualizarTroca = (idx, campo, valor) => {
    setTrocas(trocas.map((t,i) => i === idx ? { ...t, [campo]: valor } : t));
  };

  // Calcula custo total: cada troca completa é cobrada conforme sua posição.
  // Trocas incompletas (sem "de" ou "para") não contam pro custo.
  const custoTotalTrocas = trocas.reduce((total, t, idx) => {
    if (!t.de || !t.para) return total;
    return total + custoTrocaPorIndice(idx, pacote.trocasGratis);
  }, 0);

  // Quantas trocas pagas existem (para mostrar no checkout)
  const trocasPagasCount = trocas.filter((t, idx) => t.de && t.para && idx >= pacote.trocasGratis).length;

  const totalPreco = pacote.preco + custoTotalTrocas;

  // Trocas inválidas: misma mistura "de" usada 2x
  const trocasCompletas = trocas.filter(t => t.de && t.para);
  const numerosDeUsados = trocasCompletas.map(t => t.de);
  const temDuplicata = new Set(numerosDeUsados).size !== numerosDeUsados.length;

  const podeEnviar = !temDuplicata && trocas.every(t => (!t.de && !t.para) || (t.de && t.para));

  const buildMessage = () => {
    const linhas = ["Oi! Quero fazer um pedido."];
    linhas.push(`*${pacote.nome}* — ${pacote.duplas} duplas (${pacote.misturas} marmitas) — ¥${pacote.preco.toLocaleString()}`);
    linhas.push(`Inclui as misturas ${pacote.incluiNumeros[0]} ao ${pacote.incluiNumeros[pacote.incluiNumeros.length-1]} (1 dupla de cada).`);

    if (trocasCompletas.length > 0) {
      linhas.push("");
      linhas.push("*Trocas:*");
      // Re-mapeia mantendo o índice ORIGINAL pra cobrar corretamente
      trocas.forEach((t, idx) => {
        if (!t.de || !t.para) return;
        const misturaOriginal = MISTURAS.find(m => m.n === parseInt(t.de));
        const custo = custoTrocaPorIndice(idx, pacote.trocasGratis);
        const sufixo = custo === 0 ? " (inclusa · grátis)" : ` (+¥${custo} · troca adicional)`;
        linhas.push(`• Trocar ${String(misturaOriginal.n).padStart(2,"0")} ${misturaOriginal.nome} → ${t.para}${sufixo}`);
      });
    }

    linhas.push("");
    if (custoTotalTrocas > 0) linhas.push(`Trocas: +¥${custoTotalTrocas.toLocaleString()}`);
    linhas.push(`*Total: ¥${totalPreco.toLocaleString()}*`);
    linhas.push("Frete incluso · 7 dias de antecedência");
    linhas.push("");
    linhas.push("Obrigada! 🇧🇷");
    return encodeURIComponent(linhas.join("\n"));
  };

  return (
    <section className="cck-builder" id="montar">
      <SectionLabel num="02" label="Monte seu pedido" color="#b94a16"/>
      <div className="cck-section-head">
        <h2 className="cck-h2">Os pacotes são <em>fixos</em>.<br/>Trocas, só se quiser ajustar.</h2>
        <p className="cck-h2-sub">Cada pacote já vem com as misturas numeradas — <strong>uma dupla de cada</strong>. {pacote.trocasGratis} {pacote.trocasGratis===1?"troca grátis":"trocas grátis"} {pacote.trocasGratis===1?"inclusa":"inclusas"} no {pacote.nome}; trocas adicionais custam <strong>+¥300 cada</strong>.</p>
      </div>

      <div className="cck-builder-shell">

        {/* Step 1: pacote */}
        <div className="cck-builder-step">
          <div className="cck-step-label"><span>passo 1</span> Qual pacote?</div>
          <div className="cck-builder-pacotes">
            {PACOTES.map(p => (
              <button key={p.id}
                onClick={() => setPacoteId(p.id)}
                className={`cck-builder-pac ${p.id === pacoteId ? "is-on":""}`}
                style={{"--pc": p.cor, "--pcl": p.corClara}}>
                <span className="cck-builder-pac-nome">{p.nome}</span>
                <span className="cck-builder-pac-info">{p.duplas} duplas · ¥{p.preco.toLocaleString()}</span>
              </button>
            ))}
          </div>
        </div>

        {/* Step 2: misturas fixas (read-only) */}
        <div className="cck-builder-step">
          <div className="cck-step-label">
            <span>passo 2</span> Misturas inclusas no {pacote.nome}
            <span className="cck-step-counter" style={{color: pacote.cor}}>
              {pacote.duplas} <em>duplas</em> · {pacote.misturas} <em>marmitas</em>
            </span>
          </div>
          <p className="cck-builder-helper">
            Você recebe <strong>1 dupla de cada</strong> uma destas {pacote.duplas} misturas.
            Tudo cozinhado no dia, congelado na hora.
          </p>
          <div className="cck-fixas-grid">
            {misturasIncluidas.map(m => {
              const trocada = trocasCompletas.find(t => parseInt(t.de) === m.n);
              return (
                <div key={m.n} className={`cck-fixa ${trocada ? "is-trocada":""}`}>
                  <div className="cck-fixa-tile" style={{background: m.cor}}>
                    <span className="cck-fixa-n">{String(m.n).padStart(2,"0")}</span>
                    <span className={`cck-bm-tag cck-bm-tag-${m.tag}`}>{m.tag}</span>
                  </div>
                  <div className="cck-fixa-info">
                    <div className="cck-fixa-nome">
                      {trocada ? (
                        <>
                          <s>{m.nome}</s>
                          <span className="cck-fixa-trocou">→ {trocada.para}</span>
                        </>
                      ) : m.nome}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>

        {/* Step 3: trocas */}
        <div className="cck-builder-step">
          <div className="cck-step-label">
            <span>passo 3</span> Quer trocar alguma mistura?
            <span className="cck-step-counter" style={{color: pacote.cor}}>
              {trocasCompletas.length} <em>de</em> {pacote.trocasGratis} {pacote.trocasGratis===1?"grátis":"grátis"}
              {trocasPagasCount > 0 && <span> · +{trocasPagasCount} paga{trocasPagasCount>1?"s":""}</span>}
            </span>
          </div>
          <p className="cck-builder-helper">
            <strong>{pacote.trocasGratis} {pacote.trocasGratis===1?"troca grátis":"trocas grátis"}</strong> {pacote.trocasGratis===1?"inclusa":"inclusas"} no {pacote.nome}.
            Quer trocar mais? <strong>Cada troca adicional</strong> custa <strong>+¥300</strong>
            <span> (até {pacote.maxTrocas} trocas no total)</span>.
          </p>

          {trocas.length === 0 && (
            <div className="cck-trocas-empty">
              <span>{pacote.nome} sem trocas. Tá perfeito assim?</span>
              <button className="cck-btn cck-btn-ghost cck-btn-sm" onClick={adicionarTroca}>
                + Adicionar troca
              </button>
            </div>
          )}

          {trocas.map((t, idx) => {
            const misturaOriginal = t.de ? MISTURAS.find(m => m.n === parseInt(t.de)) : null;
            const custo = custoTrocaPorIndice(idx, pacote.trocasGratis);
            const ehGratis = custo === 0;
            const duplicado = t.de && numerosDeUsados.filter(n => n === t.de).length > 1;

            return (
              <div key={idx} className={`cck-troca-row ${duplicado ? "is-err":""}`}>
                <div className="cck-troca-num">
                  #{idx+1}
                  <span className={`cck-troca-num-tag ${ehGratis?"is-free":""}`}>
                    {ehGratis ? "grátis" : "+¥300"}
                  </span>
                </div>
                <div className="cck-troca-fields">
                  <div className="cck-troca-field">
                    <label>Trocar a mistura</label>
                    <select value={t.de || ""} onChange={(e)=>atualizarTroca(idx,"de", e.target.value)}>
                      <option value="">— escolha —</option>
                      {misturasIncluidas.map(m => (
                        <option key={m.n} value={m.n}>
                          {String(m.n).padStart(2,"0")} · {m.nome}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="cck-troca-arrow">→</div>
                  <div className="cck-troca-field">
                    <label>Pela</label>
                    <select value={t.para || ""} onChange={(e)=>atualizarTroca(idx,"para", e.target.value)}>
                      <option value="">— escolha —</option>
                      <optgroup label="Outras misturas">
                        {misturasForaPacote.map(m => (
                          <option key={m.n} value={m.nome}>
                            {String(m.n).padStart(2,"0")} · {m.nome}
                          </option>
                        ))}
                      </optgroup>
                      <optgroup label="Opcionais">
                        {OPCIONAIS.map((o,i) => (
                          <option key={i} value={o.nome}>{o.nome}</option>
                        ))}
                      </optgroup>
                    </select>
                  </div>
                </div>
                <div className="cck-troca-meta">
                  {t.de && t.para && (
                    <span className={`cck-troca-custo ${ehGratis?"is-free":""}`}>
                      {ehGratis ? "Grátis" : `+¥${custo}`}
                    </span>
                  )}
                  <button className="cck-troca-remove" onClick={()=>removerTroca(idx)} aria-label="remover troca">×</button>
                </div>
                {duplicado && <div className="cck-troca-err">Essa mistura já foi escolhida em outra troca.</div>}
              </div>
            );
          })}

          {trocas.length > 0 && trocas.length < pacote.maxTrocas && (
            <button className="cck-btn cck-btn-ghost cck-btn-sm cck-trocas-add" onClick={adicionarTroca}>
              + Adicionar {trocas.length < pacote.trocasGratis ? "outra troca grátis" : "troca extra (+¥300)"}
            </button>
          )}
          {trocas.length >= pacote.maxTrocas && (
            <p className="cck-trocas-max">Limite de {pacote.maxTrocas} trocas atingido neste pacote.</p>
          )}
        </div>

        {/* Checkout */}
        <div className="cck-builder-checkout">
          <div className="cck-checkout-total">
            <div className="cck-total-rows">
              <div className="cck-total-row">
                <span>{pacote.nome} ({pacote.duplas} duplas)</span>
                <span>¥{pacote.preco.toLocaleString()}</span>
              </div>
              {trocasPagasCount > 0 && (
                <div className="cck-total-row">
                  <span>{trocasPagasCount} {trocasPagasCount>1?"trocas extras":"troca extra"} (+¥300 cada)</span>
                  <span>+¥{custoTotalTrocas.toLocaleString()}</span>
                </div>
              )}
              <div className="cck-total-row">
                <span>Frete takyubin</span>
                <span className="cck-incluso">incluso</span>
              </div>
            </div>
            <div className="cck-total-grand">
              <span className="cck-total-grand-lbl">total</span>
              <span className="cck-total-grand-val">¥{totalPreco.toLocaleString()}</span>
            </div>
            {podeEnviar ? (
              <a className="cck-checkout-cta cck-checkout-cta-on"
                 href={`https://wa.me/819017254898?text=${buildMessage()}`}
                 target="_blank" rel="noopener">
                Enviar pedido pelo WhatsApp →
              </a>
            ) : (
              <button className="cck-checkout-cta" disabled>
                {temDuplicata ? "Tem troca duplicada — ajuste antes" : "Termine de preencher as trocas"}
              </button>
            )}
            <p className="cck-checkout-footnote">
              A gente confirma cardápio, endereço e forma de pagamento.<br/>
              Cozinhamos sob encomenda — <strong>7 dias até a entrega</strong>.
            </p>
          </div>
        </div>

      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, Promises, Pacotes, Builder });