// ============ SECTIONS ============

const { useState: useS, useEffect: useE } = React;

// ---------- Navbar ----------
function Navbar() {
  const [scrolled, setScrolled] = useS(false);
  const [open, setOpen] = useS(false);
  useE(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useE(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""} ${open ? "nav-open" : ""}`}>
      <div className="nav-inner">
        <a href="#" className="nav-logo" onClick={close}>
          <span className="nav-mark">A</span>
          Aroma <em>&</em> Grão
        </a>
        <ul className="nav-links">
          <li><a href="#sobre">Sobre</a></li>
          <li><a href="#cardapio">Cardápio</a></li>
          <li><a href="#unidades">Unidades</a></li>
          <li><a href="#franquias">Franquias</a></li>
          <li><a href="#franquias" className="cta">Seja franqueado</a></li>
        </ul>
        <button
          className={`nav-toggle ${open ? "active" : ""}`}
          aria-label={open ? "Fechar menu" : "Abrir menu"}
          aria-expanded={open}
          onClick={() => setOpen(v => !v)}
        >
          <span></span><span></span><span></span>
        </button>
      </div>
      <div className={`nav-mobile ${open ? "open" : ""}`} onClick={close}>
        <ul onClick={e => e.stopPropagation()}>
          <li><a href="#sobre" onClick={close}>Sobre</a></li>
          <li><a href="#cardapio" onClick={close}>Cardápio</a></li>
          <li><a href="#unidades" onClick={close}>Unidades</a></li>
          <li><a href="#franquias" onClick={close}>Franquias</a></li>
          <li><a href="#franquias" className="cta" onClick={close}>Seja franqueado</a></li>
        </ul>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero() {
  const now = new Date();
  const weekdays = ["dom","seg","ter","qua","qui","sex","sáb"];
  const stamp = `${weekdays[now.getDay()]} · ${String(now.getDate()).padStart(2,"0")}/${String(now.getMonth()+1).padStart(2,"0")}`;
  return (
    <section className="hero">
      <LeafBranch className="hero-leaf" />
      <div className="hero-inner">
        <div className="hero-copy">
          <Reveal delay={0.1}>
            <h1 className="hero-title">
              Mais que <span className="accent-stroke">café</span>.<br/>
              Um <em>ritual.</em>
            </h1>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="hero-sub">
              Pausa, aconchego e conexão em cada xícara. Grãos torrados artesanalmente, preparados com a
              calma que o seu dia precisa.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <div className="hero-cta">
              <a href="#cardapio" className="btn btn-primary btn-lg">Ver cardápio <Arrow/></a>
              <a href="#unidades" className="btn btn-ghost btn-lg">Encontre uma unidade</a>
            </div>
          </Reveal>
          <Reveal delay={0.4}>
            <div className="hero-foot">
              <div className="hero-foot-item">
                <span className="num">12</span>
                <span className="lab">unidades</span>
              </div>
              <div className="hero-foot-item">
                <span className="num">6<em style={{color:"var(--accent)",fontStyle:"italic"}}>y</em></span>
                <span className="lab">de história</span>
              </div>
              <div className="hero-foot-item">
                <span className="num">+500k</span>
                <span className="lab">cafés servidos</span>
              </div>
            </div>
          </Reveal>
        </div>
        <Reveal delay={0.2} className="hero-image">
          <div className="hero-image-card">
            <img src="imgs/hero-barista.jpg" alt="Barista despejando leite vaporizado em uma xícara, criando latte art" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} />
          </div>
          <div className="hero-stamp" aria-hidden="true">
            <div style={{position:"absolute", inset:0}}>
              <CircleText text="· GRÃO DO MÊS · MOGIANA 2026 " radius={44} fontSize={9} />
            </div>
            <div className="hero-stamp-inner">Novo</div>
          </div>
          <div className="hero-image-caption">
            <span className="cap-title">"A melhor hora do dia."</span>
            Blend signature — <br/>Mogiana, 82pts SCA
          </div>
        </Reveal>
      </div>
      <div className="hero-scroll-hint">
        <span>Role para explorar</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

// ---------- Ribbon ----------
function Ribbon() {
  const stats = [
    { n: "12",      l: "unidades" },
    { n: "06",      l: "anos de história" },
    { n: "03",      l: "estados" },
    { n: "+500k",   l: "cafés servidos" },
  ];
  return (
    <section className="ribbon">
      <div className="container">
        <div className="ribbon-grid">
          {stats.map((s,i) => (
            <Reveal key={s.l} delay={i*0.08} className="ribbon-item">
              <div className="ribbon-num">{s.n}</div>
              <div className="ribbon-lab">{s.l}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- About ----------
function About() {
  const values = [
    { num: "01", name: "Grãos rastreados de fazendas sustentáveis" },
    { num: "02", name: "Torra artesanal em micro-lotes" },
    { num: "03", name: "Receitas autorais, ingredientes frescos" },
    { num: "04", name: "Ambiente pensado para ficar" },
  ];
  return (
    <section className="sec about" id="sobre">
      <div className="container">
        <div className="about-grid">
          <Reveal className="about-visual">
            <div className="v-main"><img src="imgs/about-fazenda.jpg" alt="Fazenda de café ao amanhecer, pés com frutos maduros e neblina sobre as montanhas" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} /></div>
            <div className="v-accent"><img src="imgs/about-graos.jpg" alt="Grãos de café torrados sobre tábua de madeira rústica com colher de cobre" style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} /></div>
            <div className="v-badge">
              <span className="b-num">6</span>
              <span className="b-lab">anos</span>
            </div>
            <div className="v-quote">
              <span className="qmark">"</span>
              Café bom não se apressa. Ele se recebe.
            </div>
          </Reveal>
          <div>
            <Reveal><span className="eyebrow">Nossa história</span></Reveal>
            <Reveal delay={0.1}>
              <h2 className="sec-title" style={{marginTop:"24px"}}>
                Onde cada grão<br/><em>conta uma história.</em>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <div className="about-text">
                <p>
                  A Aroma & Grão nasceu de uma proposta simples: transformar o café em experiência.
                  Acreditamos que uma boa xícara é mais do que uma bebida — é uma pausa no dia, um
                  momento de conexão com quem importa.
                </p>
                <p>
                  Desde o primeiro gole, queremos que você sinta a diferença. Grãos selecionados em
                  fazendas sustentáveis, torrados artesanalmente em micro-lotes, preparados com a
                  dedicação de quem ama o que faz.
                </p>
              </div>
            </Reveal>
            <Reveal delay={0.35}>
              <div className="about-values">
                {values.map(v => (
                  <div className="value-item" key={v.num}>
                    <span className="v-num">{v.num}</span>
                    <span className="v-name">{v.name}</span>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Menu ----------
function Menu() {
  const [cat, setCat] = useS("quentes");
  const items = MENU_ITEMS.filter(i => i.category === cat);
  const tones = ["coffee","cream","dark","accent","bean","leaf"];
  const today = new Date();
  const weekdays = ["Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado"];
  return (
    <section className="sec menu" id="cardapio">
      <div className="container">
        <div className="menu-head">
          <div className="sec-head">
            <Reveal><span className="eyebrow">Cardápio — edição atual</span></Reveal>
            <Reveal delay={0.1}>
              <h2 className="sec-title" style={{marginTop:"24px"}}>
                Sabores que<br/><em>encantam.</em>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="sec-desc">
                Cada receita foi desenhada para despertar os sentidos. Servidos fresquinhos,
                preparados na hora, acompanham sua pausa do dia.
              </p>
            </Reveal>
          </div>
          <Reveal className="menu-date">
            <strong>{weekdays[today.getDay()]}</strong>
            Hoje · servindo das 10h às 22h
          </Reveal>
        </div>

        <Reveal>
          <div className="menu-tabs">
            {MENU_CATEGORIES.map((c,i) => (
              <button
                key={c.id}
                className={`menu-tab ${cat === c.id ? "active" : ""}`}
                onClick={() => setCat(c.id)}
              >
                <span className="t-num">{String(i+1).padStart(2,"0")}</span>
                {c.label}
              </button>
            ))}
          </div>
        </Reveal>

        <div className="menu-grid">
          {items.map((it, i) => {
            return (
              <Reveal key={it.name} delay={i * 0.05} className="menu-item">
                <div className="menu-item-img">
                  {it.img ? <img src={it.img} alt={it.name} style={{width:"100%",height:"100%",objectFit:"cover",display:"block"}} /> : <Placeholder tone={tones[i % tones.length]} />}
                </div>
                <div className="menu-item-info">
                  <div className="menu-item-top">
                    <span className="menu-item-name">{it.name}</span>
                    {it.tag && <span className="menu-item-tag">{it.tag}</span>}
                  </div>
                  <p className="menu-item-desc">{it.desc}</p>
                  {it.origin && <div className="menu-item-origin">Origem: {it.origin}</div>}
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ---------- Experience ----------
function Experience() {
  const feats = [
    { n: "01", t: "Grãos de origem rastreada", text: "De fazendas sustentáveis do Cerrado Mineiro e Mogiana. Torra artesanal em micro-lotes que preserva cada nota." },
    { n: "02", t: "Ambiente feito para ficar",  text: "Cada unidade desenhada pelo estúdio da casa. Luz quente, madeiras claras, acústica pensada para conversa." },
    { n: "03", t: "Espaço para seu dia",        text: "Wi-Fi premium, tomadas em todas as mesas e o café que alimenta suas melhores ideias — ou sua tarde preguiçosa." },
  ];
  return (
    <section className="sec experience">
      <div className="container" style={{position:"relative", zIndex:2}}>
        <div className="sec-head" style={{textAlign:"center", margin:"0 auto 20px"}}>
          <Reveal><span className="eyebrow">A experiência</span></Reveal>
          <Reveal delay={0.1}>
            <h2 className="sec-title" style={{marginTop:"24px"}}>
              Cada detalhe pensado<br/>para <em>encantar você.</em>
            </h2>
          </Reveal>
          <Reveal delay={0.2}>
            <p className="sec-desc" style={{margin:"0 auto"}}>
              Do grão à xícara, tudo é feito com cuidado artesanal — para proporcionar momentos
              únicos de prazer e conexão.
            </p>
          </Reveal>
        </div>
        <div className="exp-grid">
          {feats.map((f,i) => (
            <Reveal key={f.n} delay={i*0.12} className="exp-feat">
              <div className="exp-num">{f.n}</div>
              <h3 className="exp-title">{f.t}</h3>
              <p className="exp-text">{f.text}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Locations ----------
function Locations() {
  const [st, setSt] = useS("todos");
  const grouped = LOCATIONS.reduce((acc, loc) => {
    if (st !== "todos" && loc.state !== st) return acc;
    (acc[loc.state] = acc[loc.state] || []).push(loc);
    return acc;
  }, {});
  const stateNames = { SP: "São Paulo", PR: "Paraná", SC: "Santa Catarina" };

  return (
    <section className="sec locations" id="unidades">
      <div className="container">
        <div className="loc-head">
          <div className="sec-head">
            <Reveal><span className="eyebrow">Diretório — 12 unidades</span></Reveal>
            <Reveal delay={0.1}>
              <h2 className="sec-title" style={{marginTop:"24px"}}>
                Encontre o seu<br/><em>Aroma & Grão.</em>
              </h2>
            </Reveal>
          </div>
          <Reveal className="loc-filter">
            {STATE_FILTERS.map(f => (
              <button key={f.id} className={st === f.id ? "active" : ""} onClick={() => setSt(f.id)}>
                {f.label}
              </button>
            ))}
          </Reveal>
        </div>

        <div className="loc-directory">
          {Object.entries(grouped).map(([stateId, items]) => (
            <Reveal key={stateId} className="loc-state-group">
              <div className="loc-state-head">
                <span className="loc-state-name">{stateNames[stateId]}</span>
                <span className="loc-state-count">{String(items.length).padStart(2,"0")} unidade{items.length>1 ? "s" : ""}</span>
              </div>
              <div className="loc-rows">
                {items.map((loc,i) => (
                  <div className="loc-row" key={loc.mall}>
                    <div className="loc-mall">{loc.mall}</div>
                    <div className="loc-line"><span className="k">End.</span>{loc.address}</div>
                    <div className="loc-line"><span className="k">Hr</span>{loc.hours}</div>
                    <div className="loc-line"><span className="k">Tel</span>{loc.phone}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Franchise ----------
function Franchise() {
  const [sent, setSent] = useS(false);
  const stats = [
    { n: "12",       l: "unidades ativas" },
    { n: "35%",      l: "crescimento anual" },
    { n: "18", suffix: " meses", l: "payback médio" },
    { n: "R$ 280k",  l: "investimento inicial" },
  ];
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => { setSent(false); e.target.reset(); }, 2800);
  };
  return (
    <section className="sec franchise" id="franquias">
      <div className="container" style={{position:"relative", zIndex:2}}>
        <div className="franchise-grid">
          <div>
            <Reveal><span className="eyebrow">Franquias · 2026</span></Reveal>
            <Reveal delay={0.1}>
              <h2 className="sec-title" style={{marginTop:"24px"}}>
                Faça parte dessa<br/><em>história de sucesso.</em>
              </h2>
            </Reveal>
            <Reveal delay={0.2}>
              <p className="sec-desc" style={{color:"rgba(244,236,224,0.7)"}}>
                Junte-se à rede de cafeterias premium que mais cresce no Sul-Sudeste. Suporte
                completo do ponto à operação — um modelo de negócio comprovado e rentável.
              </p>
            </Reveal>
            <Reveal delay={0.3}>
              <div className="fran-stats">
                {stats.map(s => (
                  <div className="fran-stat" key={s.l}>
                    <div className="num">{s.n}{s.suffix && <em style={{fontSize:"1.4rem",fontStyle:"italic"}}>{s.suffix}</em>}</div>
                    <div className="lab">{s.l}</div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>

          <Reveal delay={0.2} className="fran-form">
            <div className="fran-form-title">Quero ser franqueado</div>
            <div className="fran-form-subtitle">Retornamos em até 48h</div>
            <form onSubmit={submit}>
              <div className="row">
                <div className="group">
                  <label>Nome</label>
                  <input type="text" placeholder="Seu nome completo" required />
                </div>
                <div className="group">
                  <label>Telefone</label>
                  <input type="tel" placeholder="(00) 00000-0000" required />
                </div>
              </div>
              <div className="group">
                <label>E-mail</label>
                <input type="email" placeholder="seu@email.com" required />
              </div>
              <div className="row">
                <div className="group">
                  <label>Cidade desejada</label>
                  <input type="text" placeholder="Cidade / Estado" />
                </div>
                <div className="group">
                  <label>Capital</label>
                  <select>
                    <option>Até R$ 200k</option>
                    <option>R$ 200k — 400k</option>
                    <option>R$ 400k — 600k</option>
                    <option>Acima de R$ 600k</option>
                  </select>
                </div>
              </div>
              <div className="group">
                <label>Conte um pouco sobre você</label>
                <textarea rows={2} placeholder="Seu interesse, experiência prévia, etc." />
              </div>
              <button type="submit" className={`fran-submit ${sent ? "sent" : ""}`}>
                {sent ? "✓ Recebido — até 48h" : <>Enviar interesse <Arrow/></>}
              </button>
            </form>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- Instagram ----------
function Instagram() {
  const posts = [
    { src: "imgs/insta-01-mesa.jpg",      caption: "manhã de sexta",   span: "big"  }, // 2×2
    { src: "imgs/insta-02-colheita.jpg",  caption: "colheita 2026",    span: "sq"   },
    { src: "imgs/insta-03-sobremesa.jpg", caption: "sobremesa da casa",span: "sq"   },
    { src: "imgs/insta-04-latte-art.jpg", caption: "latte art",        span: "tall" }, // 1×2
    { src: "imgs/insta-05-saco.jpg",      caption: "grãos da semana",  span: "sq"   },
    { src: "imgs/insta-06-fachada.jpg",   caption: "nova unidade",     span: "wide" }, // 2×1
  ];
  return (
    <section className="instagram" id="instagram">
      <div className="container">
        <div className="insta-head">
          <div className="sec-head" style={{marginBottom:0, maxWidth:"560px"}}>
            <Reveal><span className="eyebrow">Instagram</span></Reveal>
            <Reveal delay={0.1}>
              <h2 className="sec-title" style={{marginTop:"24px"}}>
                Momentos que valem<br/><em>um registro.</em>
              </h2>
            </Reveal>
          </div>
          <Reveal>
            <a href="#" className="insta-handle">@aromaegrao →</a>
          </Reveal>
        </div>
      </div>
      <div className="container">
        <Reveal>
          <div className="insta-grid">
            {posts.map((p,i) => (
              <div className={`insta-cell ic-${p.span}`} key={i}>
                <img src={p.src} alt={p.caption} />
                <div className="ic-overlay">{p.caption}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#" className="nav-logo">
              <span className="nav-mark" style={{background:"var(--paper-light)", color:"var(--ink)"}}>A</span>
              Aroma <em>&</em> Grão
            </a>
            <p>Transformamos café em experiência. Pausa, aconchego e conexão em cada xícara — desde 2020.</p>
          </div>
          <div>
            <h4>Navegação</h4>
            <ul>
              <li><a href="#sobre">Sobre nós</a></li>
              <li><a href="#cardapio">Cardápio</a></li>
              <li><a href="#unidades">Unidades</a></li>
              <li><a href="#franquias">Franquias</a></li>
            </ul>
          </div>
          <div>
            <h4>Institucional</h4>
            <ul>
              <li><a href="#">Privacidade</a></li>
              <li><a href="#">Termos de uso</a></li>
              <li><a href="#">Imprensa</a></li>
            </ul>
          </div>
          <div>
            <h4>Contato</h4>
            <div className="footer-contact">
              <span><span className="k">Email</span>contato@aromaegrao.com.br</span>
              <span><span className="k">Tel</span>(11) 3456-7890</span>
              <span><span className="k">Sede</span>São Paulo, SP</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <p>© 2026 Aroma & Grão · Todos os direitos reservados</p>
          <div className="footer-social">
            <a href="#">Instagram</a>
            <a href="#">Facebook</a>
            <a href="#">TikTok</a>
            <a href="#">LinkedIn</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- Floating buttons ----------
function FloatBtns() {
  return (
    <div className="float-btns">
      <a href="#" className="float-wa" aria-label="WhatsApp" title="WhatsApp">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M20 3.5A10.5 10.5 0 003.5 15.9L2 22l6.3-1.7A10.5 10.5 0 1020 3.5zM12 19.5a7.5 7.5 0 01-3.9-1.1l-.3-.2-3.3.9.9-3.2-.2-.3A7.5 7.5 0 1112 19.5zm4-5.2c-.2-.1-1.3-.6-1.5-.7s-.3-.1-.5.1-.6.7-.7.9-.3.1-.5 0a6.3 6.3 0 01-3.1-2.7c-.2-.4.2-.4.6-1.2a.4.4 0 000-.4l-.7-1.6c-.2-.4-.4-.4-.5-.4H9a.9.9 0 00-.7.3 2.8 2.8 0 00-.9 2.1 4.9 4.9 0 001 2.6 11.4 11.4 0 004.3 3.8c2.6 1 2.6.7 3.1.7a2.6 2.6 0 001.7-1.2 2.1 2.1 0 00.1-1.2c-.1-.1-.3-.2-.5-.3z"/></svg>
      </a>
    </div>
  );
}

Object.assign(window, { Navbar, Hero, Ribbon, About, Menu, Experience, Locations, Franchise, Instagram, Footer, FloatBtns });