// Bounce v2 — shared chrome: nav, footer, page head, accordion, club data

const { BrandMark, Menu, Instagram, Whatsapp, Pin, Mail, Phone, Send, Arrow, Plus, X } = window.Icons;

// Cloudinary-hosted photos: f_auto/q_auto pick the best format+compression per
// browser, g_auto keeps the subject in frame when the container crops it.
const CLOUD_IMG = "https://res.cloudinary.com/du11fvru6/image/upload";
const cldImg = (name, w) => `${CLOUD_IMG}/f_auto,q_auto,c_fill,g_auto,w_${w}/bounce/photos-web/${name}`;

const CLUBS = [
  {
    id: "kiyovu", name: "Kiyovu", type: "Outdoor", courts: 1,
    addr: "KN 2 Ave, Kiyovu, Kigali",
    email: "info@bouncerw.com", phone: "+250 795 465 297",
    maps: "https://maps.google.com/?q=Kiyovu+Kigali",
    photo: cldImg("bounce-kiyovu-court.jpg", 1200),
    hours: [["Mon – Fri", "07:00 — 23:00"], ["Saturday", "07:00 — 23:00"], ["Sunday", "07:00 — 23:00"]],
    note: "Our first club and the first padel court in Rwanda. One floodlit outdoor court, clubhouse, and pro shop.",
  },
  {
    id: "kacyiru", name: "Kacyiru", type: "Hotel", courts: 2,
    addr: "Mövenpick Hotel, Kacyiru, Kigali",
    email: "info@bouncerw.com", phone: "+250 795 465 297",
    maps: "https://maps.google.com/?q=Movenpick+Kigali",
    photo: cldImg("bounce-courts-hero.jpg", 1200),
    hours: [["Mon – Fri", "07:00 — 23:00"], ["Saturday", "07:00 — 23:00"], ["Sunday", "07:00 — 23:00"]],
    note: "Two courts inside the Mövenpick grounds. Hotel guests and members welcome, rackets available at reception.",
  },
];

const NAV = [
  { label: "Home", href: "/" },
  { label: "Courts", href: "branches.html" },
  { label: "Academy", href: "academy.html" },
  { label: "Shop", href: "shop.html" },
  { label: "Contact", href: "contact.html" },
];

const Nav = ({ active = "Home" }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <header className="nav">
      <div className="wrap nav-inner">
        <a href="/" className="brand">
          <span className="brand-mark"><BrandMark size={38}/></span>
          <img className="brand-name-img" src="https://res.cloudinary.com/du11fvru6/image/upload/f_auto,q_auto/bounce/photos-web/bounce-wordmark.png" alt="Bounce"/>
        </a>
        <nav className="nav-links">
          {NAV.map((n) => (
            <a key={n.label} href={n.href} className={"nav-link" + (active === n.label ? " active" : "")}>{n.label}</a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="https://apps.apple.com/app/bounce-rwanda/id6758155937" target="_blank" rel="noopener" className="btn btn-primary btn-sm nav-cta">Book a court</a>
          <button className="nav-mobile-toggle" onClick={() => setOpen(!open)} aria-label="Menu">
            {open ? <X size={18}/> : <Menu size={18}/>}
          </button>
        </div>
      </div>
      <div className={"mobile-menu" + (open ? " open" : "")}>
        {NAV.map((n) => (
          <a key={n.label} href={n.href} className={active === n.label ? "active" : ""}>{n.label}</a>
        ))}
      </div>
      <style>{`
        .nav-cta { height: 42px; }
        @media (max-width: 560px) { .nav-cta { display: none; } }
      `}</style>
    </header>
  );
};

const PageHead = ({ crumb, title, lede, children }) => (
  <section className="page-head">
    <div className="wrap">
      <div className="crumb">{crumb}</div>
      <h1 className="display display-xl">{title}</h1>
      {lede ? <p className="lede">{lede}</p> : null}
      {children}
    </div>
  </section>
);

const SectionHead = ({ eyebrow, title, lede, link }) => (
  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 32, flexWrap: "wrap", marginBottom: 56 }}>
    <div>
      <div className="eyebrow">{eyebrow}</div>
      <h2 className="display display-lg" style={{ marginTop: 22, maxWidth: "16ch" }}>{title}</h2>
      {lede ? <p className="lede" style={{ marginTop: 22 }}>{lede}</p> : null}
    </div>
    {link ? <a href={link.href} className="tlink">{link.label} <Arrow size={14}/></a> : null}
  </div>
);

const Accordion = ({ items }) => {
  const [open, setOpen] = React.useState(null);
  return (
    <div className="faq">
      {items.map((it, i) => (
        <div key={i} className="faq-item" data-open={open === i}>
          <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
            {it.q}
            <span className="faq-icon"><Plus size={16}/></span>
          </button>
          <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
        </div>
      ))}
    </div>
  );
};

const Footer = () => {
  const [sent, setSent] = React.useState(false);
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-top">
          <div>
            <h3 className="display display-md" style={{ maxWidth: "14ch" }}>
              Get on court<br/>this <em style={{ fontStyle: "italic", fontWeight: 500, color: "var(--accent)" }}>week</em>.
            </h3>
            <p className="lede" style={{ marginTop: 20, maxWidth: "34ch" }}>
              Court openings, academy places, and club nights — one email a month, nothing else.
            </p>
            <form className="foot-form" onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
              <div className="input-wrap" style={{ flex: 1, minWidth: 220 }}>
                <Mail size={16}/>
                <input className="input" type="email" required placeholder="you@email.com"/>
              </div>
              <button className="btn btn-primary" type="submit">{sent ? "Signed up" : "Sign up"} <Send size={14}/></button>
            </form>
          </div>
          <div className="foot-clubs">
            {CLUBS.map((c) => (
              <div key={c.id} className="foot-club">
                <div className="foot-club-name">{c.name}</div>
                <div className="foot-club-line">{c.addr}</div>
                <a className="foot-club-line link" href={`mailto:${c.email}`}>{c.email}</a>
                <a className="foot-club-line link" href={`tel:${c.phone.replace(/\s/g, "")}`}>{c.phone}</a>
              </div>
            ))}
          </div>
        </div>

        <div className="foot-partner">
          <div>
            <div className="kicker">Partner with Bounce</div>
            <p style={{ margin: "10px 0 0", color: "var(--ink-dim)", fontSize: 15, maxWidth: "46ch" }}>
              Build a Bounce-spec court at your venue, or sponsor a club night. We'll send the deck.
            </p>
          </div>
          <a href="contact.html#partner" className="btn btn-ghost">Start a conversation <Arrow size={14}/></a>
        </div>

        <div className="foot-bottom">
          <div className="foot-links">
            {NAV.map((n) => <a key={n.label} href={n.href}>{n.label}</a>)}
            <a href="https://apps.apple.com/app/bounce-rwanda/id6758155937" target="_blank" rel="noopener">Book</a>
          </div>
          <div className="socials">
            <a className="social" href="https://instagram.com" target="_blank" rel="noopener" aria-label="Instagram"><Instagram size={16}/></a>
            <a className="social" href="https://wa.me/250795465297" target="_blank" rel="noopener" aria-label="WhatsApp"><Whatsapp size={16}/></a>
          </div>
          <div className="kicker">© {new Date().getFullYear()} Bounce Padel · Kigali, Rwanda</div>
        </div>
      </div>
      <style>{`
        .foot-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); padding-bottom: 64px; }
        .foot-form { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }
        .foot-clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-content: start; }
        .foot-club { display: flex; flex-direction: column; gap: 7px; }
        .foot-club-name { font-family: var(--display); font-size: 26px; text-transform: uppercase; letter-spacing: .4px; line-height: 1; margin-bottom: 4px; }
        .foot-club-line { font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.1px; color: var(--ink-dim); line-height: 1.5; }
        .foot-club-line.link:hover { color: var(--accent); }
        .foot-partner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
        .foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 32px; }
        .foot-links { display: flex; gap: 26px; flex-wrap: wrap; }
        .foot-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--ink-dim); }
        .foot-links a:hover { color: var(--accent); }
        @media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; } }
        @media (max-width: 520px) { .foot-clubs { grid-template-columns: 1fr; } }
      `}</style>
    </footer>
  );
};

Object.assign(window, { CLUBS, NAV, Nav, Footer, PageHead, SectionHead, Accordion, cldImg });