/* global React, useApp, Photo, Icon, PHOTO */
function Sobre() {
  const { nav } = useApp();
  const values = [
    { ic: "leaf", h: "Fresco de verdade", p: "Compramos dos produtores da região e preparamos tudo na hora do pedido." },
    { ic: "heart", h: "Feito com carinho", p: "Cada sanduíche sai da chapa com o capricho de quem ama o que faz." },
    { ic: "sun", h: "Vibe de Búzios", p: "O clima leve e ensolarado da península em cada mordida." },
  ];
  const stats = [["2019", "desde"], ["+45 mil", "sanduíches servidos"], ["4.9★", "avaliação média"]];

  return (
    <main className="page">
      <section className="section">
        <div className="wrap">
          <div className="about-hero">
            <div>
              <span className="dash-label">Nossa história</span>
              <h1 style={{ fontSize: "clamp(36px,5vw,58px)", marginTop: 16 }}>Nascemos para dar aquele <span style={{ color: "var(--amber)" }}>break</span> no seu dia.</h1>
              <p className="muted" style={{ fontSize: 17, marginTop: 18, maxWidth: "46ch" }}>
                O Break começou como um pequeno balcão à beira-mar em Búzios, com uma ideia simples: um sanduíche bem feito muda o seu dia. Pão fresquinho, ingredientes selecionados e aquele sol que só a península tem.
              </p>
              <p className="muted" style={{ fontSize: 17, marginTop: 14, maxWidth: "46ch" }}>
                Hoje levamos esse sabor pra toda a cidade — no delivery, na retirada ou ali no nosso balcão, sempre com o mesmo capricho do primeiro dia.
              </p>
              <div className="about-stats">
                {stats.map(([b, s]) => (
                  <div className="about-stat" key={s}><b>{b}</b><span>{s}</span></div>
                ))}
              </div>
            </div>
            <div>
              <Photo tone="#EFB867" icon="sun" label="Nosso balcão" src={PHOTO.cafe} alt="" style={{ aspectRatio: "4/5", borderRadius: "var(--r-xl)", boxShadow: "var(--shadow-lg)" }} />
            </div>
          </div>
        </div>
      </section>

      {/* values */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="center" style={{ marginBottom: 38 }}>
            <span className="eyebrow">No que acreditamos</span>
            <h2 style={{ fontSize: "clamp(26px,4vw,40px)", marginTop: 12 }}>O que faz o Break, Break</h2>
          </div>
          <div className="values">
            {values.map((v) => (
              <div className="feature" key={v.h}>
                <div className="ic"><Icon name={v.ic} size={24} /></div>
                <h3>{v.h}</h3><p>{v.p}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* location band */}
      <section className="wrap" style={{ marginBottom: 30 }}>
        <div className="band">
          <div className="blur-sun" />
          <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "center" }} className="combo-band-grid">
            <div>
              <span className="eyebrow on-pine">Venha nos visitar</span>
              <h2 style={{ fontSize: "clamp(26px,3.4vw,38px)", marginTop: 12 }}>Onde nos encontrar</h2>
              <div style={{ marginTop: 22, display: "grid", gap: 14 }}>
                <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream-50)" }}><Icon name="pin" size={20} style={{ color: "var(--amber-200)" }} /> Rua das Pedras, 123 — Centro, Búzios/RJ</div>
                <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream-50)" }}><Icon name="clock" size={20} style={{ color: "var(--amber-200)" }} /> Todos os dias, das 11h às 23h</div>
                <div style={{ display: "flex", gap: 12, alignItems: "center", color: "var(--cream-50)" }}><Icon name="whats" size={20} style={{ color: "var(--amber-200)" }} /> (22) 99999-0000</div>
              </div>
              <div style={{ display: "flex", gap: 12, marginTop: 26, flexWrap: "wrap" }}>
                <button className="btn btn-amber" onClick={() => nav("/cardapio")}>Ver cardápio</button>
                <button className="btn btn-ghost" style={{ color: "var(--cream-50)", boxShadow: "inset 0 0 0 1.5px rgba(251,239,215,.4)" }} onClick={() => nav("/checkout")}>Pedir agora</button>
              </div>
            </div>
            <Photo tone="#1C5645" icon="pin" showSun={false} label="Centro · Búzios" src={PHOTO.buzios} alt="" style={{ aspectRatio: "4/3", borderRadius: 18 }} />
          </div>
        </div>
      </section>
    </main>
  );
}
Object.assign(window, { Sobre });