// sections-bottom.jsx — Cardápio, Cozinheira, Como funciona, Depoimentos, Entrega, FAQ, Footer

const { useState: useStateB } = React;

const Cardapio = () => (
  <section className="cck-cardapio" id="cardapio">
    <SectionLabel num="03" label="Cardápio completo" color="#3f6b3a"/>
    <div className="cck-section-head">
      <h2 className="cck-h2">Quinze misturas <em>de sempre</em>,<br/>quatro opcionais que entram quando dá.</h2>
      <p className="cck-h2-sub">O cardápio é fixo — você sabe o que pedir e o que esperar. Sem cardápio rotativo industrial, sem prato surpresa que ninguém pediu.</p>
    </div>

    <div className="cck-menu-grid">
      {MISTURAS.map(m => (
        <article key={m.n} className={`cck-dish ${m.destaque ? "cck-dish-destaque":""}`}>
          <div className="cck-dish-img" style={{background: `linear-gradient(135deg, ${m.cor}, ${shade(m.cor, -25)})`}}>
            <span className="cck-dish-n">{String(m.n).padStart(2,"0")}</span>
            <span className={`cck-dish-tag cck-bm-tag-${m.tag}`}>{m.tag}</span>
            {m.destaque && <span className="cck-dish-star">★ favorito</span>}
            <svg className="cck-dish-deco" viewBox="0 0 100 100" aria-hidden="true">
              <circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,.15)" strokeWidth="1"/>
              <circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,.18)" strokeWidth="1"/>
            </svg>
          </div>
          <div className="cck-dish-body">
            <h3 className="cck-dish-name">{m.nome}</h3>
            <p className="cck-dish-desc">{m.desc}</p>
          </div>
        </article>
      ))}
    </div>

    {/* Opcionais */}
    <div className="cck-opcionais">
      <div className="cck-opcionais-head">
        <div>
          <Ticket color="#b94a16" bg="#f1d9c4">OPCIONAIS</Ticket>
          <h3>Pratos que aparecem como troca ou sob pedido</h3>
        </div>
        <p>Não estão na grade fixa, mas podem entrar no seu pacote. Pergunta no WhatsApp se quer encaixar.</p>
      </div>
      <div className="cck-opcionais-list">
        {OPCIONAIS.map((o, i) => (
          <div key={i} className="cck-opcional">
            <span className="cck-opcional-bullet">+</span>
            <span>{o.nome}</span>
            <span className={`cck-bm-tag cck-bm-tag-${o.tag}`}>{o.tag}</span>
          </div>
        ))}
      </div>
    </div>

    {/* Feijão à parte */}
    <div className="cck-feijao">
      <div className="cck-feijao-art">
        <svg viewBox="0 0 80 80" width="80" height="80" aria-hidden="true">
          <circle cx="40" cy="40" r="34" fill="#2d1810"/>
          {Array.from({length:18}).map((_,i)=>{
            const a = (i*360/18)*Math.PI/180;
            const r = 8 + (i%3)*8;
            return <ellipse key={i} cx={40+Math.cos(a)*r} cy={40+Math.sin(a)*r} rx="3" ry="2" fill="#3a1d12" stroke="#1a0d08" strokeWidth=".5"/>;
          })}
        </svg>
      </div>
      <div className="cck-feijao-text">
        <h3>Feijão à parte? <em>Pode.</em></h3>
        <p>Algumas misturas vão melhor com aquele caldo grosso de feijão preto. Tá disponível.</p>
      </div>
      <div className="cck-feijao-precos">
        <div className="cck-feijao-preco">
          <span className="cck-feijao-y">¥300</span>
          <span className="cck-feijao-lbl">avulso</span>
        </div>
        <div className="cck-feijao-preco">
          <span className="cck-feijao-y">¥250</span>
          <span className="cck-feijao-lbl">dentro do pacote</span>
        </div>
      </div>
    </div>
  </section>
);

// helper for color shading
function shade(hex, amt) {
  const c = hex.replace("#","");
  let r = parseInt(c.slice(0,2),16), g = parseInt(c.slice(2,4),16), b = parseInt(c.slice(4,6),16);
  r = Math.max(0,Math.min(255,r+amt));
  g = Math.max(0,Math.min(255,g+amt));
  b = Math.max(0,Math.min(255,b+amt));
  return "#"+[r,g,b].map(v=>v.toString(16).padStart(2,"0")).join("");
}

const Cozinheira = () => (
  <section className="cck-cozinheira" id="quem">
    <SectionLabel num="04" label="Quem cozinha" color="#7c1d1d"/>
    <div className="cck-coz-grid">
      <div className="cck-coz-photo">
        <div className="cck-coz-photo-frame">
          <img
            src="assets/local.jpg"
            alt="Fachada do restaurante Comida Caseira em Kosai, Shizuoka"
            className="cck-coz-photo-img"
            onError={(e) => {
              e.target.style.display = 'none';
              const fallback = e.target.nextElementSibling;
              if (fallback) fallback.style.display = 'flex';
            }}
          />
          <div className="cck-coz-photo-fallback" style={{display:'none'}}>
            <span>📷</span>
            <p>Coloque a foto da fachada em<br/><code>site/assets/local.jpg</code></p>
          </div>
        </div>
        <Stamp color="#3f6b3a" rotate={8}>
          <span style={{fontSize:10}}>Cozinha em</span><br/>
          <span style={{fontSize:13,fontWeight:700}}>Kosai · 湖西</span>
        </Stamp>
      </div>
      <div className="cck-coz-text">
        <div className="cck-coz-kicker">Não é fábrica.</div>
        <h2 className="cck-h2">A cozinha fica <em>aqui</em>,<br/>em Kosai.</h2>
        <p className="cck-lede">
          A gente cozinha numa cozinha de verdade — a mesma onde o jantar de domingo sai
          desde sempre. Panela de pressão chiando, cebola refogando, mão temperando.
          Cada mistura é feita no dia, congelada na hora e despachada em 48h.
        </p>
        <p className="cck-body-p">
          Não tem ultracongelamento industrial. Não tem prato envelhecido em estoque.
          Tem cheiro de comida brasileira saindo da janela de uma casa em Shizuoka,
          e a sua família comendo isso amanhã à noite.
        </p>
        <div className="cck-coz-quotes">
          <blockquote>
            "Eu sou de Marília. Vim em 1997. Cozinho a mesma feijoada que minha mãe me
            ensinou — só que agora no Japão, pras famílias daqui."
          </blockquote>
        </div>
      </div>
    </div>
  </section>
);

const ComoFunciona = () => (
  <section className="cck-comofunciona">
    <SectionLabel num="05" label="Como funciona" color="#b94a16"/>
    <div className="cck-cf-grid">
      <div className="cck-cf-step">
        <div className="cck-cf-num">
          <span>01</span>
          <svg viewBox="0 0 80 40" width="80" height="40" className="cck-cf-arrow" aria-hidden="true">
            <path d="M5 20 Q 40 5, 75 20" stroke="#b94a16" strokeWidth="1.5" fill="none" strokeDasharray="3 4"/>
            <path d="M70 14 L 78 20 L 70 26" stroke="#b94a16" strokeWidth="1.5" fill="none"/>
          </svg>
        </div>
        <h3>Você pede no Zap</h3>
        <p>Escolhe o pacote, manda as misturas pelo WhatsApp. A gente confirma valor, endereço e forma de pagamento.</p>
        <div className="cck-cf-detail">⏱ 5 minutos</div>
      </div>
      <div className="cck-cf-step">
        <div className="cck-cf-num">
          <span>02</span>
          <svg viewBox="0 0 80 40" width="80" height="40" className="cck-cf-arrow" aria-hidden="true">
            <path d="M5 20 Q 40 35, 75 20" stroke="#b94a16" strokeWidth="1.5" fill="none" strokeDasharray="3 4"/>
            <path d="M70 14 L 78 20 L 70 26" stroke="#b94a16" strokeWidth="1.5" fill="none"/>
          </svg>
        </div>
        <h3>A gente cozinha</h3>
        <p>No dia certo, na panela. Tempera, refoga, cozinha em fogo brando. Embala em marmita de alumínio e congela imediatamente.</p>
        <div className="cck-cf-detail">⏱ 7 dias antes da entrega</div>
      </div>
      <div className="cck-cf-step">
        <div className="cck-cf-num"><span>03</span></div>
        <h3>Chega congelado</h3>
        <p>Kosai e Toyohashi: entrega direta. Outras regiões: takyubin <em>クール</em> congelado, frete incluso no pacote. Você recebe lacrado em −18°C.</p>
        <div className="cck-cf-detail">⏱ Chegou? 5 minutos no microondas e janta.</div>
      </div>
    </div>
  </section>
);

const Depoimentos = () => (
  <section className="cck-depoimentos">
    <SectionLabel num="06" label="Quem já testou" color="#3f6b3a"/>
    <div className="cck-section-head">
      <h2 className="cck-h2">Cliente fala melhor <em>do que eu</em>.</h2>
    </div>
    <div className="cck-dep-grid">
      {DEPOIMENTOS.map((d,i) => (
        <figure key={i} className="cck-dep">
          <div className="cck-dep-quote-mark">"</div>
          <blockquote>{d.texto}</blockquote>
          <figcaption>
            <strong>{d.nome}</strong>
            <span>{d.cidade}</span>
            <span className="cck-dep-pkg">{d.pacote}</span>
          </figcaption>
        </figure>
      ))}
    </div>
  </section>
);

const Entrega = () => (
  <section className="cck-entrega">
    <SectionLabel num="07" label="Entrega & pagamento" color="#7c1d1d"/>
    <div className="cck-ent-grid">
      <div className="cck-ent-mapa">
        <h3>Onde a gente entrega</h3>
        <div className="cck-ent-mapa-art">
          <svg viewBox="0 0 320 280" width="100%" preserveAspectRatio="xMidYMid meet">
            {/* abstract Japan island */}
            <path d="M40 200 Q 60 140, 110 130 Q 150 125, 180 110 Q 220 90, 260 110 Q 295 130, 285 170 Q 270 220, 220 230 Q 170 245, 130 235 Q 80 230, 40 200 Z"
              fill="#fbeec2" stroke="#7c1d1d" strokeWidth="1.5" strokeDasharray="0"/>
            {/* Kosai dot */}
            <circle cx="195" cy="170" r="6" fill="#b94a16"/>
            <circle cx="195" cy="170" r="14" fill="none" stroke="#b94a16" strokeWidth="1.2" opacity=".5"/>
            <circle cx="195" cy="170" r="24" fill="none" stroke="#b94a16" strokeWidth="1" opacity=".3"/>
            <text x="205" y="165" fontFamily="ui-serif, Georgia, serif" fontSize="14" fontStyle="italic" fill="#7c1d1d">Kosai</text>
            <text x="205" y="180" fontFamily="ui-monospace, Menlo, monospace" fontSize="9" fill="#7c1d1d" letterSpacing=".1em">湖西 · sede</text>
            {/* Toyohashi dot */}
            <circle cx="175" cy="178" r="3" fill="#3f6b3a"/>
            <text x="120" y="200" fontFamily="ui-serif, Georgia, serif" fontSize="11" fill="#3f6b3a">Toyohashi</text>
            {/* Hamamatsu dot */}
            <circle cx="215" cy="165" r="3" fill="#3f6b3a"/>
            <text x="220" y="155" fontFamily="ui-serif, Georgia, serif" fontSize="11" fill="#3f6b3a">Hamamatsu</text>
            {/* takyubin lines */}
            <path d="M195 170 Q 130 100, 70 170" stroke="#b94a16" strokeWidth="1" fill="none" strokeDasharray="2 3" opacity=".5"/>
            <path d="M195 170 Q 240 130, 280 160" stroke="#b94a16" strokeWidth="1" fill="none" strokeDasharray="2 3" opacity=".5"/>
            <text x="40" y="240" fontFamily="ui-monospace, Menlo, monospace" fontSize="9" fill="#7c1d1d" opacity=".6" letterSpacing=".15em">TAKYUBIN クール</text>
          </svg>
        </div>
        <div className="cck-ent-zonas">
          <div className="cck-zona">
            <span className="cck-zona-dot" style={{background:"#b94a16"}}></span>
            <strong>Kosai · Toyohashi · Hamamatsu</strong>
            <span>entrega direta, sem frete</span>
          </div>
          <div className="cck-zona">
            <span className="cck-zona-dot" style={{background:"#3f6b3a"}}></span>
            <strong>Resto do Japão</strong>
            <span>takyubin congelado · frete já incluso no pacote</span>
          </div>
        </div>
      </div>
      <div className="cck-ent-pgto">
        <h3>Como pagar</h3>
        <p className="cck-ent-p">Pago da forma que for melhor pra você. Combinamos no WhatsApp depois de fechar o pedido.</p>
        <div className="cck-pgto-grid">
          {[
            {n:"Rakuten Pay", c:"#bf0000"},
            {n:"au PAY", c:"#eb5505"},
            {n:"PayPay", c:"#ee0033"},
            {n:"Visa", c:"#1a1f71"},
            {n:"Mastercard", c:"#cc0000"},
            {n:"Yûcho · ゆうちょ", c:"#0c8e3c"},
          ].map(p => (
            <div key={p.n} className="cck-pgto" style={{borderColor:p.c}}>
              <span className="cck-pgto-dot" style={{background:p.c}}></span>
              <span>{p.n}</span>
            </div>
          ))}
        </div>
        <div className="cck-ent-aviso">
          <strong>7 dias de antecedência</strong> pra cozinhar e congelar com calma.
          Pedidos confirmados de segunda a sábado.
        </div>
      </div>
    </div>
  </section>
);

const FAQSection = () => {
  const [open, setOpen] = useStateB(0);
  return (
    <section className="cck-faq" id="faq">
      <SectionLabel num="08" label="Perguntas frequentes" color="#b94a16"/>
      <div className="cck-section-head">
        <h2 className="cck-h2">Tudo que costumam <em>perguntar antes</em> de pedir.</h2>
      </div>
      <div className="cck-faq-list">
        {FAQ.map((f,i) => (
          <div key={i} className={`cck-faq-item ${open===i?"is-open":""}`}>
            <button className="cck-faq-q" onClick={()=>setOpen(open===i?-1:i)}>
              <span className="cck-faq-num">{String(i+1).padStart(2,"0")}</span>
              <span className="cck-faq-text">{f.q}</span>
              <span className="cck-faq-toggle">{open===i?"−":"+"}</span>
            </button>
            <div className="cck-faq-a">
              <p>{f.a}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

const FinalCTA = () => (
  <section className="cck-finalcta">
    <div className="cck-finalcta-inner">
      <div className="cck-finalcta-eyebrow">
        <span className="cck-dot"></span>
        Pronto pra abrir o freezer e o jantar tá pronto?
      </div>
      <h2 className="cck-finalcta-h">
        Hoje você <em>não</em> cozinha.<br/>
        Amanhã também não.
      </h2>
      <p className="cck-finalcta-sub">
        Manda mensagem no Zap, combina o pacote, paga do jeito que preferir.
        Em até 7 dias tá no seu freezer.
      </p>
      <div className="cck-finalcta-row">
        <a href="https://wa.me/819017254898" target="_blank" rel="noopener" className="cck-btn cck-btn-primary cck-btn-lg">
          <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" style={{marginRight:8}}>
            <path fill="currentColor" d="M19.05 4.91A9.82 9.82 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.91-7.01zM12.04 20.15h-.01a8.23 8.23 0 0 1-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.22 8.22 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.25-8.24 2.2 0 4.27.86 5.83 2.42a8.18 8.18 0 0 1 2.41 5.83c0 4.54-3.7 8.23-8.24 8.23zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.78.97-.14.16-.29.18-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.14-.25-.02-.38.11-.5.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43-.14-.01-.31-.01-.48-.01-.16 0-.43.06-.66.31-.23.25-.86.84-.86 2.06 0 1.21.88 2.38 1.01 2.55.12.16 1.74 2.66 4.21 3.73.59.25 1.05.4 1.41.52.59.19 1.13.16 1.55.1.47-.07 1.47-.6 1.67-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/>
          </svg>
          090 1725 4898
        </a>
        <a href="#montar" className="cck-btn cck-btn-ghost cck-btn-lg">Montar pacote aqui</a>
      </div>
      <div className="cck-finalcta-foot">
        Ou procure <strong>Comida Caseira Kosai</strong> no Facebook
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="cck-footer">
    <div className="cck-footer-grid">
      <div className="cck-footer-brand">
        <div className="cck-footer-logo">
          Comida Caseira <span>Kosai</span>
        </div>
        <div className="cck-footer-kanji">コミダ・カゼイラ · 湖西</div>
        <p>Misturas brasileiras congeladas. Cozinhadas em Kosai, Shizuoka. Entrega em todo Japão via takyubin.</p>
      </div>
      <div className="cck-footer-col">
        <h4>Contato</h4>
        <a href="https://wa.me/819017254898">WhatsApp · 090 1725 4898</a>
        <a href="#">Facebook · Comida Caseira Kosai</a>
      </div>
      <div className="cck-footer-col">
        <h4>Atende</h4>
        <span>Segunda a sábado · 9h-19h</span>
        <span>Pedidos com 7 dias de antecedência</span>
      </div>
      <div className="cck-footer-col">
        <h4>Pagamento</h4>
        <span>Rakuten Pay · au PAY · PayPay</span>
        <span>Visa · Mastercard · Yûcho</span>
      </div>
    </div>
    <div className="cck-footer-bottom">
      <span>© 2026 Comida Caseira Kosai</span>
      <span>Feito com tempero de mãe ✿</span>
    </div>
  </footer>
);

Object.assign(window, { Cardapio, Cozinheira, ComoFunciona, Depoimentos, Entrega, FAQSection, FinalCTA, Footer });