// blyzr café — in-app concept page + "we're scouting the location" note.
// Reached via the top-bar "Café" link.

const Cafe = ({ onSend, onHome }) => {
  const MOMENTS = [
    { h: 25,  img: 'cafe-images/blyzr6.jpg', n: 'The Tasting Bar', d: "A rotating counter of just-launched products to try for free — indie-chef debuts and the week's discoveries, each addable in a tap." },
    { h: 135, img: 'cafe-images/blyzr1.jpg', n: 'The Orb Counter', d: 'Order point — a glowing orb marks where you pay and where staff hand off.' },
    { h: 55,  img: 'cafe-images/blyzr2.jpg', n: 'The Recipe Table', d: "A long oak table where the week's dish is cooked and sampled. Pull up a stool." },
    { h: 240, img: 'cafe-images/blyzr3.jpg', n: 'The Pantry Wall', d: 'Floor-to-ceiling shelves — the catalog made physical, restocked in view.' },
    { h: 320, img: 'cafe-images/blyzr4.jpg', n: 'The Pickup Nook', d: 'App orders, bagged and lime-tagged, by the door. In and out in ten seconds.' },
    { h: 200, img: 'cafe-images/blyzr7.jpg', n: 'The Lounge', d: 'Soft seating for the long stay — a quick chat over coffee or a full day of work, with power and light at every seat.' },
  ];

  const trackRef = React.useRef(null);
  const [lightbox, setLightbox] = React.useState(null);
  const slideBy = (dir) => {
    const el = trackRef.current; if (!el) return;
    const slide = el.querySelector('.cafe-slide');
    const step = slide ? slide.getBoundingClientRect().width + 16 : el.clientWidth * 0.85;
    el.scrollBy({ left: dir * step, behavior: 'smooth' });
  };
  const move = (d) => setLightbox((i) => (i + d + MOMENTS.length) % MOMENTS.length);
  React.useEffect(() => {
    if (lightbox === null) return;
    const onKey = (e) => {
      if (e.key === 'Escape') setLightbox(null);
      else if (e.key === 'ArrowRight') move(1);
      else if (e.key === 'ArrowLeft') move(-1);
    };
    window.addEventListener('keydown', onKey);
    const canvas = document.querySelector('.canvas');
    if (canvas) canvas.style.overflow = 'hidden';
    return () => { window.removeEventListener('keydown', onKey); if (canvas) canvas.style.overflow = ''; };
  }, [lightbox]);

  return (
    <>
      <CanvasHeader
        crumb="blyzr café · coming soon"
        title="A place to <em>stand still.</em>"
        subtitle="The app, made a room — a grocery you can sit inside, with a coffee, the week's recipe cooking, and a smell you'll remember on the street."
        right={<button className="btn btn-ghost" onClick={onHome}>Back to shopping</button>}
      />

      {/* Hero — the room */}
      <img src="cafe-images/blyzr5.jpg" alt="The blyzr café — pantry wall, long oak recipe table, and the orb counter under north light" style={{ width: '100%', height: 360, objectFit: 'cover', borderRadius: 20, display: 'block', marginBottom: 32 }}/>

      {/* Location scouting */}
      <div className="cafe-scout">
        <div style={{ maxWidth: 560 }}>
          <div className="eyebrow" style={{ marginBottom: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="pulse-dot"/> We're scouting
          </div>
          <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 38, lineHeight: 1.05, letterSpacing: '-0.025em', marginBottom: 12 }}>
            Looking for our first home.
          </div>
          <p style={{ fontSize: 15.5, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>
            Somewhere with morning light, room to breathe, and a street worth sitting on. East London first — then wherever you tell us to go.
          </p>
          <div style={{ display: 'flex', gap: 8, marginTop: 22, flexWrap: 'wrap' }}>
            <button className="btn btn-accent" onClick={() => onSend('I have a location idea for the blyzr café')}>
              Suggest a spot <Icon.arrow style={{ width: 14, height: 14 }}/>
            </button>
            <button className="btn btn-outline" onClick={() => onSend('Tell me when the blyzr café opens')}>Get opening updates</button>
          </div>
        </div>
        <div className="cafe-scout-orb"><Orb size={150}/></div>
      </div>

      {/* Tasting bar — newly launched */}
      <div className="cafe-tasting glass">
        <div style={{ maxWidth: 520 }}>
          <div className="eyebrow" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}>
            <span className="dept-dot" style={{ '--h': 25, width: 16, height: 16 }}/> The Tasting Bar
          </div>
          <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 30, lineHeight: 1.1, letterSpacing: '-0.02em', marginBottom: 10 }}>
            Try what's new, before anyone else.
          </div>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: 'var(--ink-2)', margin: 0 }}>
            A rotating counter of just-launched products — indie-chef debuts, seasonal arrivals, the week's discoveries. Tiny portions, free to taste, one tap to add any to your basket. Blyzr is the experience, not the stacked shelf — the AI keeps the warehouse full so the room can be for tasting.
          </p>
          <button className="btn btn-outline" style={{ marginTop: 18 }} onClick={() => onSend("What's new on the blyzr Tasting Bar?")}>
            See this week's launches <Icon.arrow style={{ width: 14, height: 14 }}/>
          </button>
        </div>
        <div className="cafe-tasting-orb"><span className="dept-dot" style={{ '--h': 25, width: 92, height: 92 }}/></div>
      </div>

      {/* How it'll feel */}
      <div className="sec-head" style={{ marginTop: 48 }}><h3>How it'll feel</h3><span className="meta">look · feel · smell</span></div>
      <div className="grid-3">
        <div className="cafe-card"><div className="cafe-k">Look</div><div className="cafe-t">Lime-washed plaster, pale oak, hairline steel. Produce like a gallery, one lime wall, the orb glowing at the counter.</div></div>
        <div className="cafe-card"><div className="cafe-k">Feel</div><div className="cafe-t">Unhurried and generous. North light, low warm pendants, a warm analog hum. Nobody rushes you out.</div></div>
        <div className="cafe-card"><div className="cafe-k">Smell</div><div className="cafe-t">“Morning Market” — citrus zest and fig leaf over warm sourdough and orange blossom, on coffee and cedar.</div></div>
      </div>

      {/* Inside the room — carousel */}
      <div className="sec-head" style={{ marginTop: 44 }}><h3>Inside the room</h3><span className="meta">six moments · drag, or tap to expand</span></div>
      <div className="cafe-carousel">
        <button className="carousel-arrow left" onClick={() => slideBy(-1)} aria-label="Previous">‹</button>
        <div className="cafe-carousel-track" ref={trackRef}>
          {MOMENTS.map((m, idx) => (
            <figure key={m.n} className="cafe-slide" onClick={() => setLightbox(idx)}>
              <div className="cafe-slide-imgwrap">
                <img src={m.img} alt={m.n}/>
                <span className="cafe-slide-expand" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M21 16v3a2 2 0 0 1-2 2h-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
                </span>
              </div>
              <figcaption className="cafe-slide-cap">
                <div className="cafe-moment-n">{m.n}</div>
                <div className="cafe-moment-d">{m.d}</div>
              </figcaption>
            </figure>
          ))}
        </div>
        <button className="carousel-arrow right" onClick={() => slideBy(1)} aria-label="Next">›</button>
      </div>

      {/* Closing CTA */}
      <div className="glass" style={{ marginTop: 36, padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
          <OrbMini/>
          <div>
            <div style={{ fontFamily: 'var(--f-display)', fontStyle: 'italic', fontSize: 22 }}>Know the perfect corner?</div>
            <div className="muted" style={{ fontSize: 13, marginTop: 2 }}>Tell us where the blyzr café should open.</div>
          </div>
        </div>
        <button className="btn btn-accent" onClick={() => onSend('I have a location idea for the blyzr café')}>
          Suggest a spot <Icon.arrow style={{ width: 14, height: 14 }}/>
        </button>
      </div>

      {lightbox !== null && (
        <div className="cafe-lightbox" onClick={() => setLightbox(null)}>
          <button className="lightbox-close" onClick={() => setLightbox(null)} aria-label="Close">×</button>
          <button className="lightbox-nav left" onClick={(e) => { e.stopPropagation(); move(-1); }} aria-label="Previous">‹</button>
          <figure className="lightbox-fig" onClick={(e) => e.stopPropagation()}>
            <img src={MOMENTS[lightbox].img} alt={MOMENTS[lightbox].n}/>
            <figcaption>
              <div className="lightbox-title">{MOMENTS[lightbox].n}</div>
              <div className="lightbox-desc">{MOMENTS[lightbox].d}</div>
              <div className="lightbox-count mono">{lightbox + 1} / {MOMENTS.length}</div>
            </figcaption>
          </figure>
          <button className="lightbox-nav right" onClick={(e) => { e.stopPropagation(); move(1); }} aria-label="Next">›</button>
        </div>
      )}
    </>
  );
};

window.Cafe = Cafe;

/* ============================================
   LEGAL — Privacy / Terms / Cookies, in plain voice
   ============================================ */
const LEGAL = {
  privacy: {
    title: 'Privacy.',
    short: "We collect what we need to shop for you, never sell it, and you can wipe it whenever you like.",
    sections: [
      { k: 'What we keep',     v: "Your basket, pantry, saved recipes, and delivery address — the things that make blyzr useful. Nothing more." },
      { k: 'What we never do', v: "Sell your data, hand it to advertisers, or track you once you've left the app. Not now, not later." },
      { k: 'Your controls',    v: "Export everything or delete your account in a tap from Settings. Deletion is real — it's gone within 30 days." },
      { k: 'Questions',        v: "privacy@blyzr.app — a person answers." },
    ],
  },
  terms: {
    title: 'Terms.',
    short: "Be decent, we'll deliver groceries. The slightly longer version is below.",
    sections: [
      { k: 'The deal',       v: "You order, we shop and deliver. Prices and delivery slots are confirmed at checkout and can move with the market." },
      { k: 'Substitutions',  v: "If something's out of stock we suggest a swap — you approve it or skip it. You only pay for what arrives." },
      { k: 'Fair use',       v: "One account per person, no reselling, and please don't try to break the orb. We can pause accounts that abuse the service." },
      { k: 'Liability',      v: "We stand behind freshness and delivery. Where the law allows, that's the limit of what we owe you." },
    ],
  },
  cookies: {
    title: 'Cookies.',
    short: "A handful, and none of them follow you around.",
    sections: [
      { k: 'Essential',     v: "Keep you signed in and your basket intact between visits. The app doesn't work without these." },
      { k: 'Preferences',   v: "Remember your address, theme, and last delivery slot so you're not re-entering them." },
      { k: 'No ad-tracking',v: "No third-party advertising, no cross-site trackers. What happens in blyzr stays in blyzr." },
      { k: 'Your choice',   v: "Clear them anytime in your browser — we'll just ask you to sign in again." },
    ],
  },
};

const Legal = ({ tab = 'privacy', onHome }) => {
  const [t, setT] = React.useState(tab);
  React.useEffect(() => { setT(tab); }, [tab]);
  const d = LEGAL[t] || LEGAL.privacy;
  const tabs = [['privacy', 'Privacy'], ['terms', 'Terms'], ['cookies', 'Cookies']];

  return (
    <>
      <CanvasHeader
        crumb="legal · the short version"
        title={d.title}
        right={<button className="btn btn-ghost" onClick={onHome}>Back to shopping</button>}
      />
      <div className="biz-tabs">
        {tabs.map(([id, label]) => (
          <button key={id} className={`biz-tab ${t === id ? 'active' : ''}`} onClick={() => setT(id)}>{label}</button>
        ))}
      </div>
      <div className="legal-short glass">
        <div className="eyebrow" style={{ marginBottom: 10, display: 'flex', alignItems: 'center', gap: 8 }}><OrbMini/> The short version</div>
        <div className="legal-short-t">{d.short}</div>
      </div>
      <div className="legal-sections">
        {d.sections.map((s) => (
          <div key={s.k} className="legal-row">
            <div className="legal-k">{s.k}</div>
            <div className="legal-v">{s.v}</div>
          </div>
        ))}
      </div>
      <div className="mono muted" style={{ fontSize: 10.5, letterSpacing: '0.12em', textTransform: 'uppercase', marginTop: 32 }}>
        Last updated · June 2026 · plain-English summary, full text on request
      </div>
    </>
  );
};

window.Legal = Legal;