/* Bar Kiosi — section components. Exported to window for app.jsx. */
const { useState, useEffect, useRef } = React;

/* tiny inline icons */
const Icon = {
  cal: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" {...p}><rect x="3" y="4.5" width="18" height="16" rx="2.5"/><path d="M3 9h18M8 2.5v4M16 2.5v4"/></svg>,
  arrow: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" {...p}><path d="M5 12h14M13 6l6 6-6 6"/></svg>,
  msg: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" {...p}><path d="M21 12a8 8 0 0 1-11.6 7.1L4 20l1-5.2A8 8 0 1 1 21 12Z"/></svg>,
  mail: (p) => <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" {...p}><rect x="3" y="5" width="18" height="14" rx="2.5"/><path d="m4 7 8 6 8-6"/></svg>,
};

/* reveal-on-scroll wrapper */
function Reveal({ children, as = "div", d, className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    let done = false;
    const show = () => { if (!done) { done = true; el.classList.add("in"); } };
    const vh = () => window.innerHeight || document.documentElement.clientHeight;
    const inView = () => {
      const r = el.getBoundingClientRect();
      return r.top < vh() * 0.94 && r.bottom > 0;
    };
    if (inView()) { show(); return; }
    let io;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver((es) => {
        es.forEach((e) => { if (e.isIntersecting) { show(); io.disconnect(); } });
      }, { threshold: 0.12, rootMargin: "0px 0px -6% 0px" });
      io.observe(el);
    }
    const onScroll = () => { if (inView()) { show(); io && io.disconnect(); } };
    window.addEventListener("scroll", onScroll, { passive: true });
    // safety net: never leave content hidden in non-scrolling/odd contexts
    const fallback = setTimeout(show, 1600);
    return () => { io && io.disconnect(); window.removeEventListener("scroll", onScroll); clearTimeout(fallback); };
  }, []);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${className}`} data-d={d} {...rest}>{children}</Tag>;
}

/* labeled image placeholder */
function Placeholder({ label, className = "", style }) {
  return (
    <div className={`ph ${className}`} style={style} role="img" aria-label={`Photo placeholder: ${label}`}>
      <span className="ph-label">{label}</span>
    </div>
  );
}

function Badge00({ className }) {
  return (
    <span className={`badge00 ${className || ""}`}>
      <span className="dot" aria-hidden="true"></span>
      <b>0.0%</b> ABV
    </span>
  );
}

/* ---------------- Nav ---------------- */
function Nav({ t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a className="wordmark" href="#top">Bar Kiosi <span className="pct">0.0%</span></a>
        <a className="btn btn-primary" href={`tel:${t.phone.replace(/[^+\d]/g, "")}`}>
          <Icon.cal /> Check a date
        </a>
      </div>
    </nav>
  );
}

/* ---------------- Hero ---------------- */
function Hero({ t }) {
  return (
    <header className="hero section-pad" id="top">
      <div className="wrap hero-grid">
        <div>
          <Reveal as="p" className="eyebrow">Mobile craft bar · Philadelphia</Reveal>
          <Reveal d="1"><Badge00 /></Reveal>
          <Reveal as="h1" d="1" className="h-display">
            Real cocktails.<br /><span className="amber-i">Zero proof.</span>
          </Reveal>
          <Reveal as="p" d="2" className="lede">
            A full craft bar for your event — every drink built to bar standard, just with
            the alcohol left out on purpose. Nobody leaves feeling like they missed out.
          </Reveal>
          <Reveal d="2" className="hero-cta">
            <a className="btn btn-amber" href={`tel:${t.phone.replace(/[^+\d]/g, "")}`}><Icon.cal /> Check a date</a>
            <a className="btn btn-ghost" href="#menu">See the menu <Icon.arrow /></a>
          </Reveal>
          <Reveal as="p" d="3" className="hero-area">
            <span className="pin" aria-hidden="true"></span>{t.serviceArea}
          </Reveal>
        </div>
        <Reveal d="1">
          <Placeholder className="hero-media" label="Hero — bar setup in action">
            <Badge00 />
          </Placeholder>
        </Reveal>
      </div>
    </header>
  );
}

/* ---------------- The idea ---------------- */
const PROPS = [
  { n: "01", h: "Everyone's included", p: "Pregnant guests, sober guests, designated drivers, kids — one bar, no separate table. The whole room drinks the same beautiful menu." },
  { n: "02", h: "No liability", p: "A full bar experience with zero alcohol to manage, serve responsibly, or insure. Nothing to over-pour, nothing to worry about." },
  { n: "03", h: "It's a moment", p: "Hand-cut clear ice, fresh and dehydrated garnishes, proper glassware. Drinks your guests actually stop to photograph." },
];
function Idea() {
  return (
    <section className="idea section-pad" id="idea">
      <div className="wrap">
        <Reveal as="p" className="eyebrow">The idea</Reveal>
        <Reveal as="h2" className="h-section idea-head">
          Zero-proof isn't soda and a <span className="amber-i">sad lime</span>.
        </Reveal>
        <Reveal as="p" d="1" className="lede" style={{ marginTop: "22px" }}>
          It's genuine craft cocktail work — fresh juice, house syrups, proper technique,
          balanced builds — with the alcohol intentionally left out. Same care, same ritual,
          same glass in hand. The booze is the only thing missing, and no one notices.
        </Reveal>
        <div className="props">
          {PROPS.map((x, i) => (
            <Reveal key={x.n} className="prop" d={String(i + 1)}>
              <span className="num">№ {x.n}</span>
              <h3>{x.h}</h3>
              <p>{x.p}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Package ---------------- */
const INCLUDED = [
  { h: "The full cocktail menu", p: "Every build on the menu below, mixed to order for your guests." },
  { h: "A professional bartender", p: "Behind the bar for your event window — pouring, garnishing, hosting." },
  { h: "Clear ice & garnish styling", p: "Hand-cut clear ice plus fresh and dehydrated garnishes and glassware styling." },
  { h: "Full setup & breakdown", p: "I arrive, build the bar, run it, then pack it all out. You don't lift a thing." },
  { h: "A menu tailored to you", p: "We shape the drink list around your event, theme, and guests beforehand." },
];
function Package({ t }) {
  return (
    <section className="section-pad" id="package">
      <div className="wrap">
        <Reveal as="p" className="eyebrow">The package</Reveal>
        <div className="pkg-grid">
          <Reveal className="price-card">
            <span className="flat">One flat rate</span>
            <div className="amount"><span>$</span>{t.price}</div>
            <p className="per">No per-head pricing. One bar, one price.</p>
            <Badge00 />
          </Reveal>
          <div>
            <Reveal as="h2" className="h-section" style={{ marginBottom: "10px" }}>
              Everything that <span className="amber-i">comes with it.</span>
            </Reveal>
            <ul className="incl">
              {INCLUDED.map((x, i) => (
                <Reveal as="li" key={x.h} d={String(Math.min(i + 1, 3))}>
                  <span className="ix">0{i + 1}</span>
                  <div>
                    <h4>{x.h}</h4>
                    <p>{x.p}</p>
                  </div>
                </Reveal>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Icon, Reveal, Placeholder, Badge00, Nav, Hero, Idea, Package });