/* Bar Kiosi — menu, gallery, testimonial, booking, footer. Exported to window. */

const MENU = [
  {
    n: "01", name: "Margarita",
    desc: "Housemade NA tequila, orange liqueur, lime, agave, and a salt rim.",
    spicy: "Make it spicy — jalapeños and a Tajín rim.",
  },
  {
    n: "02", name: "Mojito",
    desc: "Housemade NA rum, fresh mint, lime, cane syrup, and club soda.",
  },
  {
    n: "03", name: "Paloma",
    desc: "Housemade NA tequila, grapefruit, cane syrup, garnished with a pineapple slice.",
  },
  {
    n: "04", name: "Refreshers",
    desc: "Simple pours for when you just need something cold in hand.",
    refreshers: ["Soda", "Seltzer", "Ice Water"],
  },
];

function Menu() {
  return (
    <section className="menu section-pad" id="menu">
      <div className="wrap">
        <Reveal as="p" className="eyebrow">The menu</Reveal>
        <Reveal as="h2" className="h-section">
          Four builds, <span className="amber-i">zero compromise.</span>
        </Reveal>
        <div className="menu-grid">
          {MENU.map((m, i) => (
            <Reveal className="card" key={m.n} d={String((i % 2) + 1)}>
              <div className="card-top">
                <span className="ix">№ {m.n}</span>
                <span className="tag00">0.0%</span>
              </div>
              <h3>{m.name}</h3>
              <p className="desc">{m.desc}</p>
              {m.spicy && (
                <div className="spicy">
                  <span className="lab">Option</span>
                  <p>{m.spicy}</p>
                </div>
              )}
              {m.refreshers && (
                <div className="refreshers">
                  {m.refreshers.map((r) => <span key={r}>{r}</span>)}
                </div>
              )}
            </Reveal>
          ))}
          <Reveal className="card card-custom" d="1">
            <div>
              <span className="ix">№ 05</span>
              <h3 style={{ marginTop: "8px" }}>Custom builds welcome</h3>
              <p>Have a signature in mind? Theme the menu to your event — colors, flavors, a named drink for the couple. We'll design it together.</p>
            </div>
            <a className="btn btn-amber" href="#book">Build a menu <Icon.arrow /></a>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Gallery ---------------- */
const GALLERY = [
  "Bar setup, full spread",
  "Drink with garnish",
  "Clear-ice detail",
  "Me, working the bar",
  "The spread",
  "A happy guest",
];
function Gallery({ t }) {
  return (
    <section className="section-pad" id="gallery">
      <div className="wrap">
        <Reveal as="p" className="eyebrow">The look</Reveal>
        <Reveal as="h2" className="h-section">
          Drinks people <span className="amber-i">photograph.</span>
        </Reveal>
        <div className="gallery-grid">
          {GALLERY.map((g, i) => (
            <Reveal key={g} d={String((i % 3) + 1)} style={{ display: "contents" }}>
              <Placeholder label={g} />
            </Reveal>
          ))}
        </div>
        {t.showTestimonial && (
          <Reveal className="quote">
            <blockquote>
              <span className="mark">“</span>{t.testimonialQuote}<span className="mark">”</span>
            </blockquote>
            <cite>{t.testimonialAuthor}</cite>
          </Reveal>
        )}
      </div>
    </section>
  );
}

/* ---------------- Booking ---------------- */
function Booking({ t }) {
  const tel = t.phone.replace(/[^+\d]/g, "");
  const sms = `sms:${tel}?&body=${encodeURIComponent("Hi Bar Kiosi! I'd like to check a date for my event.")}`;
  const mail = `mailto:${t.email}?subject=${encodeURIComponent("Event date check — Bar Kiosi")}`;
  return (
    <section className="booking section-pad" id="book">
      <div className="wrap booking-grid">
        <div>
          <Reveal as="p" className="eyebrow">Book the bar</Reveal>
          <Reveal as="h2" className="h-section">Tell me about <span className="amber-i">your event.</span></Reveal>
          <Reveal as="p" d="1" className="lede">
            Showers, weddings, corporate events, milestone parties — a real bar without the
            alcohol. Send me the date and I'll reply within 24 hours.
          </Reveal>
          <Reveal d="2" className="booking-cta">
            <a className="btn btn-amber" href={sms}><Icon.msg /> Text to book</a>
            <a className="btn btn-outline-ice" href={mail}><Icon.mail /> Email instead</a>
          </Reveal>
        </div>
        <Reveal d="1" className="booking-card">
          <div className="row"><span className="k">Text / call</span><span className="v">{t.phone}</span></div>
          <div className="row"><span className="k">Email</span><span className="v">{t.email}</span></div>
          <div className="row"><span className="k">Serves</span><span className="v" style={{ textAlign: "right", maxWidth: "16ch" }}>{t.serviceArea}</span></div>
          <div className="row"><span className="k">Reply time</span><span className="v">Within 24 hours</span></div>
        </Reveal>
      </div>
    </section>
  );
}

/* ---------------- Footer ---------------- */
function Footer({ t }) {
  const ig = t.instagram.replace(/^@/, "");
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="footer-top">
          <div>
            <a className="wordmark" href="#top">Bar Kiosi <span className="pct">0.0%</span></a>
            <p className="tag">Zero Proof. Zero exceptions.</p>
          </div>
          <nav className="footer-links" aria-label="Footer">
            <a href={`tel:${t.phone.replace(/[^+\d]/g, "")}`}>{t.phone}</a>
            <a href={`mailto:${t.email}`}>{t.email}</a>
            <a href={`https://instagram.com/${ig}`} target="_blank" rel="noopener">@{ig}</a>
            <a href="https://barkiosi.com" target="_blank" rel="noopener">barkiosi.com</a>
          </nav>
        </div>
        <div className="footer-rule" aria-hidden="true"></div>
        <div className="footer-bottom">
          <p className="footer-thirsty">Don't leave <span className="amber-i">thirsty.</span></p>
          <p className="footer-meta">© {new Date().getFullYear()} Bar Kiosi · {t.serviceArea}</p>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Menu, Gallery, Booking, Footer });