// Stray Cats Ice Cream — full responsive single-page site (Direction A: Playful & Bold).
// Uses the shared brand kit (sc-brand.jsx) for palette, fonts and SVG marks.
// Layout/responsiveness is driven by classes in the host stylesheet.

const MENU = [
  { t: 'Soft Serve', d: 'Vanilla · Chocolate · Twist. Cup or waffle cone, dipped on request.', p: '$4.50 / $5.50', c: '#FBF3E0' },
  { t: 'Hand-Dipped Scoops', d: 'Eight flavours in rotation. Single, double, or a flight of three.', p: '$4 / $6 / $8', c: '#E68AA0' },
  { t: 'Slush', d: 'Blue raspberry, cherry, mango. The cool-down classic.', p: '$3.50', c: '#8A9BD0' },
  { t: 'Sundaes & Floats', d: 'Stacked, sauced, sprinkled. Root-beer floats too.', p: '$6.50', c: '#C68A4A' },
];

const NAV = [
  { label: 'Menu', href: '#menu' },
  { label: 'Mission', href: '#mission' },
  { label: 'Find Us', href: '#find' },
];

const SOCIAL = [
  { label: 'Instagram', href: 'https://www.instagram.com/straycatsicecream/', icon: 'ig' },
  { label: 'Facebook', href: 'https://www.facebook.com/straycatsicecream', icon: 'fb' },
  { label: 'TikTok (coming soon)', href: null, icon: 'tt' },
];

function SocialIcon({ icon }) {
  if (icon === 'ig') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
      <rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.3" cy="6.7" r="1.2" fill="currentColor" stroke="none" />
    </svg>
  );
  if (icon === 'fb') return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M14 8.5h2.2V5.4c-.4-.05-1.6-.15-3-.15-3 0-5 1.8-5 5.1V13H5.5v3.2H8.2V24h3.3v-7.8h2.7l.4-3.2h-3.1v-2.3c0-.95.26-1.6 1.6-1.6Z" />
    </svg>
  );
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M16.5 3c.35 2.1 1.7 3.6 3.8 3.85v2.6c-1.4.05-2.7-.35-3.85-1.1v5.95c0 3.45-2.5 5.7-5.55 5.7C7.7 22 5.5 19.8 5.5 16.95c0-2.95 2.4-5.1 5.45-4.85v2.7c-.4-.1-.85-.15-1.25-.05-1.1.2-1.9 1.05-1.85 2.25.05 1.3 1.1 2.2 2.35 2.2 1.35 0 2.35-1 2.35-2.65V3Z" />
    </svg>
  );
}

function PinIcon({ size = 15 }) { return (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" aria-hidden="true"><path d="M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12Z" /><circle cx="12" cy="10" r="2.4" /></svg>
); }
function ClockIcon() { return (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2" strokeLinecap="round" /></svg>
); }
function PhoneIcon({ size = 15 }) { return (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" aria-hidden="true"><path d="M5 4h3.5l1.5 4.5-2 1.5a12 12 0 0 0 6 6l1.5-2 4.5 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" strokeLinejoin="round" /></svg>
); }

const PHONE_DISPLAY = '(639) 383-4669';
const PHONE_TEL = '+16393834669';
const MAP_URL = 'https://www.google.com/maps/search/?api=1&query=50.478139,-104.607172';

function Site() {
  const [open, setOpen] = React.useState(false);
  const [joined, setJoined] = React.useState(false);

  const onJoin = (e) => { e.preventDefault(); setJoined(true); };

  return (
    <div>
      {/* ── TOP BAR ── */}
      <div className="topbar">
        <div className="wrap topbar-inner">
          <div className="tb-info">
            <a href={MAP_URL} target="_blank" rel="noopener noreferrer"><PinIcon /> 190 Broad Street</a>
            <a href={'tel:' + PHONE_TEL} className="tb-phone"><PhoneIcon /> {PHONE_DISPLAY}</a>
            <span className="tb-hours"><ClockIcon /> Open daily · 11am – 8pm</span>
          </div>
          <div className="tb-social">
            {SOCIAL.map((s) => s.href ? (
              <a key={s.icon} href={s.href} target="_blank" rel="noopener noreferrer" aria-label={s.label} title={s.label}><SocialIcon icon={s.icon} /></a>
            ) : (
              <span key={s.icon} className="soon" aria-label={s.label} title={s.label}><SocialIcon icon={s.icon} /></span>
            ))}
          </div>
        </div>
      </div>

      {/* ── NAV ── */}
      <nav className={'nav' + (open ? ' open' : '')}>
        <div className="wrap nav-inner">
          <a className="brandlock" href="#top" onClick={() => setOpen(false)}>
            <CatHead size={44} />
            <div className="nm">
              <div className="a">Stray Cats</div>
              <div className="b">Ice Cream</div>
            </div>
          </a>
          <div className="nav-links">
            {NAV.map((n) => <a key={n.href} href={n.href}>{n.label}</a>)}
            <a className="pill" href="https://www.instagram.com/straycatsicecream/" target="_blank" rel="noopener noreferrer">@straycatsicecream</a>
          </div>
          <button className="hamburger" aria-label="Menu" onClick={() => setOpen(!open)}>
            <span></span><span></span><span></span>
          </button>
        </div>
        <div className="mobile-menu">
          {NAV.map((n) => <a key={n.href} href={n.href} onClick={() => setOpen(false)}>{n.label}</a>)}
          <a href="https://www.instagram.com/straycatsicecream/" target="_blank" rel="noopener noreferrer" onClick={() => setOpen(false)}>@straycatsicecream</a>
        </div>
      </nav>

      <span id="top"></span>

      {/* ── HERO ── */}
      <header className="wrap hero">
        <PawPrint size={42} color={PAL.red} style={{ top: '8%', right: '30%', opacity: .22, transform: 'rotate(-18deg)' }} className="paw" />
        <PawPrint size={30} color={PAL.ink} style={{ top: '40%', right: '40%', opacity: .16, transform: 'rotate(22deg)' }} className="paw" />
        <div>
          <span className="tag-chip"><PawPrint size={16} color={PAL.red} /> Supporting local cat rescue</span>
          <h1>Scoops<br />for a <span className="em">cause</span></h1>
          <p>A little dessert every day — served out of a cream shipping container, with a portion of every scoop going to stray cats in the neighbourhood.</p>
          <div className="hero-cta">
            <a className="btn primary" href="#menu">See the menu</a>
            <a className="btn" href="#find">Find the container</a>
          </div>
        </div>
        <div className="hero-art">
          <div className="halo"></div>
          <CatMark size={300} cherry={PAL.red} style={{ position: 'relative', filter: 'drop-shadow(0 12px 18px rgba(0,0,0,0.2))', maxWidth: '78%', height: 'auto' }} />
        </div>
      </header>

      {/* ── MARQUEE ── */}
      <div className="marquee" aria-hidden="true">
        <div className="track">
          {[0, 1].map((dup) => (
            <span key={dup}>
              {['Soft Serve', 'Hand-Dipped Scoops', 'Slush', 'Sundaes', 'Floats', 'Good for Cats'].map((t, i) => (
                <span key={i}>{t}<span className="star">✦</span></span>
              ))}
            </span>
          ))}
        </div>
      </div>

      {/* ── MENU ── */}
      <section id="menu" className="wrap sec">
        <h2>The Menu</h2>
        <p className="sub">Made to order at the window. Cash &amp; tap.</p>
        <div className="menu-grid">
          {MENU.map((m, i) => (
            <div className="menu-card" key={i}>
              <div className="menu-dot" style={{ background: m.c }}></div>
              <div style={{ flex: 1 }}>
                <div className="top">
                  <span className="t">{m.t}</span>
                  <span className="p">{m.p}</span>
                </div>
                <p className="d">{m.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ── FLAVOUR WALL ── */}
      <section className="wrap sec">
        <div className="flav-head">
          <h2 style={{ fontSize: 'clamp(30px,4vw,36px)' }}>Today's Scoops</h2>
          <span className="script">flavours rotate weekly!</span>
        </div>
        <div className="flav-grid">
          {FLAVOURS.map((f, i) => (
            <div className="flav" key={i}>
              <span className="sw" style={{ background: f.c }}></span>
              <span className="nm">{f.name}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ── MISSION ── */}
      <section id="mission" className="mission">
        <div className="wrap mission-inner">
          <div>
            <div className="script">why we're here</div>
            <h2>Eat ice cream.<br />Help cats.</h2>
            <p>Stray Cats is youth-led and community-focused. A portion of every order helps fund food, fostering, and vet care for stray and rescue cats nearby — while giving local young people their first job and a reason to smile behind the window.</p>
          </div>
          <div className="stat">
            <div style={{ display: 'flex', justifyContent: 'center' }}><PawPrint size={54} color={PAL.red} /></div>
            <div style={{ fontFamily: FONTS.display, fontSize: 34, color: PAL.red, lineHeight: 1, textTransform: 'uppercase', margin: '14px 0 0' }}>Every scoop<br />helps</div>
            <div className="lbl">A portion of every order goes to support local cat rescue</div>
          </div>
        </div>
      </section>

      {/* ── FIND US ── */}
      <section id="find" className="wrap sec find">
        <div>
          <h2>Find the<br />container</h2>
          <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 16 }}>
            <a className="info-row" href={MAP_URL} target="_blank" rel="noopener noreferrer">
              <span className="info-ic" style={{ background: PAL.red, color: '#fff' }}><PinIcon size={26} /></span>
              <div>
                <div className="a">190 Broad Street</div>
                <div className="b">Regina, SK · Look for the cream container with the cat</div>
              </div>
            </a>
            <a className="info-row" href={'tel:' + PHONE_TEL}>
              <span className="info-ic" style={{ background: PAL.gold, color: PAL.ink }}><PhoneIcon size={26} /></span>
              <div>
                <div className="a">{PHONE_DISPLAY}</div>
                <div className="b">Tap to call — questions, catering &amp; events</div>
              </div>
            </a>
            <div className="info-row">
              <span className="info-ic" style={{ background: PAL.ink, color: '#fff', fontFamily: FONTS.display, fontSize: 20 }}>7</span>
              <div>
                <div className="a">Open Every Day</div>
                <div className="b">11:00 am – 8:00 pm · Monday to Sunday</div>
              </div>
            </div>
          </div>
        </div>
        <div className="find-art">
          <ContainerShop width={460} />
        </div>
      </section>

      {/* ── EMAIL ── */}
      <section className="wrap">
        <div className="email-band">
          <div>
            <h2>Get the scoop</h2>
            <p>Flavour drops &amp; where we're parked, straight to your inbox.</p>
          </div>
          {joined ? (
            <div className="email-ok">Thanks! You're on the list. 🐾</div>
          ) : (
            <form className="email-form" onSubmit={onJoin}>
              <input type="email" required placeholder="you@email.com" />
              <button className="btn primary" type="submit">Join</button>
            </form>
          )}
        </div>
      </section>

      {/* ── FOOTER ── */}
      <footer className="wrap foot">
        <div className="lk">
          <CatHead size={36} />
          <span>Stray Cats Ice Cream · Est. 2026</span>
        </div>
        <div className="social">
          <a href="https://www.instagram.com/straycatsicecream/" target="_blank" rel="noopener noreferrer">IG @straycatsicecream</a>
          <a href="https://www.facebook.com/straycatsicecream" target="_blank" rel="noopener noreferrer">FB straycatsicecream</a>
          <span className="soon">TikTok (soon)</span>
        </div>
      </footer>
    </div>
  );
}

window.Site = Site;