// sections-mid.jsx — Diferenciais · Portfólio · Processo
const { useState: useStateM } = React;

/* ---------------- DIFERENCIAIS ---------------- */
const FEATURES = [
  { ic: "craft", num: "01", t: "Produção artesanal", d: "Cada peça é feita à mão, com tempo e cuidado. Nada de produção em escala — só dedicação." },
  { ic: "leaf",  num: "02", t: "Ingredientes premium", d: "Chocolate belga, frutas da estação e manteiga de verdade. O sabor começa na escolha." },
  { ic: "heart", num: "03", t: "Atendimento próximo", d: "Acompanhamento pessoal do briefing à entrega, para refletir exatamente a sua visão." },
  { ic: "box",   num: "04", t: "Entrega segura", d: "Montagem impecável no local do evento, com logística refrigerada e especializada." },
];

function Diferenciais() {
  return (
    <section className="section tight container">
      <div className="feat-grid reveal">
        {FEATURES.map((f, i) => {
          const IC = Icon[f.ic];
          return (
            <div className={`feat reveal d${i}`} key={f.t}>
              <div className="num">{f.num}</div>
              <IC className="ic" />
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          );
        })}
      </div>
    </section>
  );
}

/* ---------------- PORTFÓLIO ---------------- */
const CATS = ["Todos", "Casamentos", "Festas infantis", "Corporativo", "Aniversários", "Bem-casados"];
const WORKS = [
  { cat: "Casamentos",      t: "Naked cake & peônias",     dark: false, span: "span-7", h: "h-wide", img: "public/rosas.png" },
  { cat: "Bem-casados",     t: "Caixa de doces finos",     dark: true,  span: "span-5", h: "h-wide", img: "public/doces1.png" },
  { cat: "Festas infantis", t: "Tema jardim encantado",    dark: false, span: "span-4", h: "h-sm", img: "public/doces2.jpg" },
  { cat: "Aniversários",    t: "Bolo drip dourado",        dark: true,  span: "span-4", h: "h-sm", img: "public/aniversario.jpg" },
  { cat: "Corporativo",     t: "Coffee break premium",     dark: false, span: "span-4", h: "h-sm", img: "public/corporativo.jpg" },
  { cat: "Casamentos",      t: "Andar triplo clássico",    dark: false, span: "span-5", h: "h-wide", img: "public/banner3.png" },
  { cat: "Aniversários",    t: "Mesa de doces autoral",    dark: true,  span: "span-7", h: "h-wide", img: "public/banner2.png" },
];

function Portfolio() {
  const [active, setActive] = useStateM("Todos");
  const shown = WORKS.filter((w) => active === "Todos" || w.cat === active);
  return (
    <section className="section container" id="portfolio">
      <SecHead eyebrow="Nossa galeria" title={<React.Fragment>Criações que<br />viram lembrança</React.Fragment>} lead="Uma seleção do que já levamos para casamentos, festas e celebrações. Filtre por ocasião." />
      <div className="filters reveal">
        {CATS.map((c) => (
          <button key={c} className={`filter ${active === c ? "active" : ""}`} onClick={() => setActive(c)}>{c}</button>
        ))}
      </div>
      <div className="gallery reveal d1" key={active}>
        {shown.map((w, i) => (
          <article className={`gal-item ${w.span} ${w.h}`} key={w.t + i}>
            {w.img ? <img src={w.img} alt={w.t} className="hero-img" /> : <Ph label={`${w.cat.toLowerCase()} · foto`} dark={w.dark} icon={false} />}
            <div className="gal-info">
              <span className="plus"><Icon.plus style={{ width: 18, height: 18, color: "#fff" }} /></span>
              <span className="cat">{w.cat}</span>
              <h4>{w.t}</h4>
            </div>
          </article>
        ))}
      </div>
      <div style={{ textAlign: "center", marginTop: 48 }} className="reveal">
        <WaButton msg="Olá! Vi o portfólio e quero um orçamento personalizado." className="btn-dark" size="btn-lg">Quero algo assim</WaButton>
      </div>
    </section>
  );
}

/* ---------------- PROCESSO ---------------- */
const STEPS = [
  { n: "01", ic: "chat",  t: "Consultoria", d: "Conversamos sobre o evento, paleta, sabores e número de convidados para entender sua visão." },
  { n: "02", ic: "taste", t: "Degustação", d: "Você experimenta nossas combinações e escolhe os sabores que mais combinam com a celebração." },
  { n: "03", ic: "brush", t: "Criação", d: "Desenhamos a peça sob medida e produzimos artesanalmente, cuidando de cada detalhe." },
  { n: "04", ic: "truck", t: "Entrega", d: "Montagem final no local do evento, no horário combinado, com segurança total." },
];

function Processo() {
  return (
    <section className="section proc" id="processo">
      <div className="container">
        <SecHead eyebrow="A jornada do sabor" title={<React.Fragment>Como criamos<br />a sua encomenda</React.Fragment>} lead="Um processo próximo e sem surpresas — do primeiro contato à última vela." />
        <div className="proc-grid reveal">
          <div className="proc-line" />
          {STEPS.map((s, i) => {
            const IC = Icon[s.ic];
            return (
              <div className={`proc-step reveal d${i}`} key={s.n}>
                <div className="node">{s.n}</div>
                <IC className="ic" />
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Diferenciais, Portfolio, Processo });