// Home page — hero, categories, products, drop, lifestyle, newsletter, footer

function ProductCard({ p, navigate, addToCart, large = false }) {
  const [hover, setHover] = useState(false);
  const [color, setColor] = useState(p.colorways[0]);

  return (
    <article
      className={`pcard ${large ? "pcard--lg" : ""}`}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <a
        href="#"
        className="pcard-img-wrap"
        onClick={(e) => {
          e.preventDefault();
          navigate({ name: "product", id: p.id });
        }}
      >
        <div className={`pcard-img pcard-img--a ${hover ? "is-hidden" : ""}`}>
          <Placeholder label={`${p.name} · front`} hue={p.hue} ratio="4/5" />
        </div>
        <div className={`pcard-img pcard-img--b ${hover ? "is-shown" : ""}`}>
          <Placeholder label={`${p.name} · back`} hue={p.hue + 12} ratio="4/5" accent />
        </div>
        <div className="pcard-box">
          {p.tag ? <div className="pcard-tag">{p.tag}</div> : null}
          {p.compareAt ? <div className="pcard-tag pcard-tag--sale">SALE</div> : null}
        </div>
        {/* {p.tag ? <div className="pcard-tag">{p.tag}</div> : null}
        {p.compareAt ? <div className="pcard-tag pcard-tag--sale">SALE</div> : null} */}

        <div className={`pcard-quick ${hover ? "is-shown" : ""}`}>
          <button
            className="btn btn-primary btn-block"
            onClick={(e) => {
              e.preventDefault();
              e.stopPropagation();
              addToCart(p, { color });
            }}
          >
            + ADD TO BAG
          </button>
        </div>
      </a>
      <div className="pcard-meta">
        <div className="pcard-meta-row">
          <div>
            <div className="pcard-cat">{p.categoryName}</div>
            <a
              href="#"
              className="pcard-name"
              onClick={(e) => {
                e.preventDefault();
                navigate({ name: "product", id: p.id });
              }}
            >
              {p.name}
            </a>
          </div>
          <div className="pcard-price-col">
            {p.compareAt ? (
              <div className="pcard-compare">{fmtPrice(p.compareAt)}</div>
            ) : null}
            <div className="pcard-price">{fmtPrice(p.price)}</div>
          </div>
        </div>
        <div className="pcard-colorways">
          {p.colorways.map((c) => (
            <button
              key={c}
              className={`cw ${c === color ? "is-active" : ""}`}
              onClick={(e) => {
                e.stopPropagation();
                setColor(c);
              }}
              title={c}
            >
              <span className={`cw-dot cw-${c.toLowerCase().replace(/[^a-z]/g, "")}`} />
            </button>
          ))}
          <div className="cw-label">{color}</div>
        </div>
      </div>
    </article>
  );
}

function Hero({ navigate }) {
  return (
    <section className="hero">
      <div className="hero-bg">
        <Placeholder label=" " hue={18} ratio="auto" accent style={{ height: "100%" }} />
      </div>
      <div className="hero-overlay" />
      <div className="container hero-inner">
        <div className="hero-tag">
          <span className="dot-live" /> MYSTERY PIPE BOX · LIVE
        </div>
        <h1 className="hero-title">
          BUILT BY THE<br />
          <span className="hero-title-accent">BROKE.</span> WORN BY THE<br />
          UNBOTHERED.
        </h1>
        <p className="hero-sub">
          Glass, garments and gear from Orange County. Hand-packed, numbered, and built for the long haul.
        </p>
        <div className="hero-ctas">
          <button className="btn btn-primary btn-lg" onClick={() => navigate({ name: "category", id: "glass" })}>
            SHOP GLASS DAB RIGS<Icon.arrow />
          </button>
          <button className="btn btn-ghost btn-lg" onClick={() => navigate({ name: "category", id: "apparel" })}>
            SHOP APPAREL
          </button>
        </div>
      </div>
      <div className="hero-corners">
        {/* <div className="hero-corner hero-corner--tl">
          <div className="hc-label">N 33.77°</div>
          <div className="hc-label">W 118.19°</div>
        </div>
        <div className="hero-corner hero-corner--tr">
          <div className="hc-label">EDITION 04</div>
          <div className="hc-label">SS / 26</div>
        </div> */}
        <div className="hero-corner hero-corner--br">
          <div className="hc-label">scroll ↓</div>
        </div>
      </div>
    </section>
  );
}

function Categories({ navigate }) {
  const cats = window.BBOC_DATA.categories;
  return (
    <section className="section">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">— 01 / SHOP BY CATEGORY</div>
          <h2 className="section-title">PICK YOUR LANE.</h2>
        </div>
        <div className="cat-grid">
          {cats.map((c, i) => (
            <a
              key={c.id}
              href="#"
              className="cat-card"
              onClick={(e) => {
                e.preventDefault();
                navigate({ name: "category", id: c.id });
              }}
              style={{ "--i": i }}
            >
              <div className="cat-card-img">
                <Placeholder label={c.name} hue={[14, 200, 30, 0][i % 4]} ratio="4/5" />
              </div>
              <div className="cat-card-meta">
                <div className="cat-card-num">{String(i + 1).padStart(2, "0")}</div>
                <div className="cat-card-name">{c.name}</div>
                <div className="cat-card-tag">{c.tag} · {c.count}</div>
                <div className="cat-card-arrow">
                  <Icon.arrow />
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Featured({ navigate, addToCart }) {
  const featured = window.BBOC_DATA.products.slice(0, 4);
  return (
    <section className="section">
      <div className="container">
        <div className="section-head section-head--row">
          <div>
            <div className="eyebrow">— 02 / FEATURED HEAT</div>
            <h2 className="section-title">SELLING FAST.</h2>
          </div>
          <a
            href="#"
            className="link-arrow"
            onClick={(e) => {
              e.preventDefault();
              navigate({ name: "category", id: "glass" });
            }}
          >
            View all <Icon.arrow />
          </a>
        </div>
        <div className="pgrid">
          {featured.map((p) => (
            <ProductCard key={p.id} p={p} navigate={navigate} addToCart={addToCart} />
          ))}
        </div>
      </div>
    </section>
  );
}

function DropSection({ navigate }) {
  const d = window.BBOC_DATA.drop;
  return (
    <section className="drop">
      <div className="container drop-inner">
        <div className="drop-left">
          <div className="eyebrow eyebrow--accent">— 03 / LATEST DROP</div>
          <h2 className="drop-title">{d.name}</h2>
          <p className="drop-blurb">{d.blurb}</p>

          <div className="drop-stats">
            <div className="drop-stat">
              <div className="drop-stat-label">Released</div>
              <div className="drop-stat-val">{d.date}</div>
            </div>
            <div className="drop-stat">
              <div className="drop-stat-label">Run</div>
              <div className="drop-stat-val">80 pcs</div>
            </div>
            <div className="drop-stat">
              <div className="drop-stat-label">Status</div>
              <div className="drop-stat-val">
                <span className="dot-live" /> LIVE
              </div>
            </div>
          </div>

          <button className="btn btn-primary btn-lg" onClick={() => navigate({ name: "category", id: "drops" })}>
            SHOP THE DROP <Icon.arrow />
          </button>
        </div>

        <div className="drop-right">
          <Placeholder label="drop hero · varsity" hue={18} ratio="3/4" accent style={{ height: "580px", margin: "0 auto" }} />
          {/* <div className="drop-img drop-img--big">
            <Placeholder label="drop hero · varsity" hue={18} ratio="3/4" accent />
          </div>
          <div className="drop-img drop-img--sm drop-img--a">
            <Placeholder label="drop · detail" hue={28} ratio="1/1" />
          </div>
          <div className="drop-img drop-img--sm drop-img--b">
            <Placeholder label="drop · backprint" hue={14} ratio="1/1" />
          </div> */}
        </div>
      </div>
    </section>
  );
}

function Lifestyle() {
  const items = window.BBOC_DATA.lifestyle;
  return (
    <section className="section section--lifestyle">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">— 04 / MORE THAN PRODUCTS</div>
          <h2 className="section-title">
            CULTURE, HUSTLE,<br /> IDENTITY.
          </h2>
          <p className="section-lede">
            We started in a Orange County garage with $400 and a kiln. Today the same hands pack every order. Same people.
            Same energy. The only thing that changed is the volume.
          </p>
        </div>

        <div className="ls-grid">
          {items.map((it, i) => (
            <figure key={it.id} className={`ls-tile ls-tile--${i}`}>
              <Placeholder
                label={it.caption}
                src={it.image}
                alt={it.caption}
                hue={it.hue}
                ratio={i % 2 ? "4/5" : "1/1"}
                accent={i === 0}
              />
              
            </figure>
          ))}
        </div>

        <div className="ls-quote">
          <div className="ls-quote-mark">"</div>
          <blockquote>
            More than a clothing brand, it's a movement. For every individual willing to sacrifice everything for their goals and dreams.
          </blockquote>
          <div className="ls-quote-cite">— FREDDY, FOUNDER</div>
        </div>
      </div>
    </section>
  );
}

function Newsletter() {
  const [email, setEmail] = useState("");
  const [sent, setSent] = useState(false);
  return (
    <section className="news">
      <div className="container news-inner">
        <div className="news-left">
          <div className="eyebrow">— 05 / THE LIST</div>
          <h2 className="news-title">FIRST DIBS,<br /> NO NOISE.</h2>
          <p className="news-sub">
            Drop notifications before they hit the site. Quiet inbox. Zero spam. Unsubscribe in one click.
          </p>
        </div>
        <form
          className="news-form"
          onSubmit={(e) => {
            e.preventDefault();
            if (email.trim()) setSent(true);
          }}
        >
          {sent ? (
            <div className="news-success">
              <div className="news-success-tick">✓</div>
              <div>
                <div className="news-success-title">YOU'RE IN.</div>
                <div className="news-success-sub">Check your inbox for the secret link.</div>
              </div>
            </div>
          ) : (
            <>
              <div className="news-field">
                <input
                  type="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="your@email.com"
                  required
                />
                <button className="btn btn-primary" type="submit">
                  JOIN <Icon.arrow />
                </button>
              </div>
              <div className="news-fine">By signing up you confirm you're 21+ and agree to our terms.</div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer({ navigate }) {
  const cats = window.BBOC_DATA.categories;
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-top">
          <div className="foot-brand">
            <Monogram size={32} />
            <p className="foot-brand-tag">
              Independent streetwear and glass.<br /> Orange County, CA · est. YEAR.
            </p>
            <div className="foot-social">
              <div className="foot-social-icons" aria-label="Social media links">
                <a href="https://www.instagram.com/brokeboisoc" className="foot-social-icons-link" aria-label="Instagram" title="Instagram">
                  <Icon.instagram />
                </a>
                <a href="https://www.tiktok.com/@freddyfitness420" className="foot-social-icons-link" aria-label="TikTok" title="TikTok">
                  <Icon.tiktok />
                </a>
                <a href="https://www.youtube.com/@brokeboisoc" className="foot-social-icons-link" aria-label="YouTube" title="YouTube">
                  <Icon.youtube />
                </a>
                <a href="https://www.facebook.com/p/BrokeBois-Smoke-Shop-100072527177134/" className="foot-social-icons-link" aria-label="Facebook" title="Facebook">
                  <Icon.facebook />
                </a>
              </div>
            </div>
          </div>

          <div className="foot-cols">
            <div className="foot-col">
              <div className="foot-col-title">Shop</div>
              {cats.map((cat) => (
                <a key={cat.id} href="#" onClick={(e) => { e.preventDefault(); navigate({ name: "category", id: cat.id }); }}>
                  {cat.name}
                </a>
              ))}
            </div>
            <div className="foot-col">
              <div className="foot-col-title">Support</div>
              <a href="#">Shipping</a>
              <a href="#">Returns</a>
              <a href="#">Size guide</a>
              <a href="#">Care</a>
              <a href="#">Contact</a>
            </div>
            <div className="foot-col">
              <div className="foot-col-title">Brand</div>
              <a href="#">Our story</a>
              <a href="#">Lookbook</a>
              <a href="#">Journal</a>
              <a href="#">Stockists</a>
              <a href="#">Press</a>
            </div>
          </div>
        </div>

        <div className="foot-wordmark">
          BROKEBOIS<span className="accent">/</span>OC
        </div>

        <div className="foot-bottom">
          <div className="foot-bottom-left">
            <div>© 2026 BrokeBoisOC LLC. All rights reserved.</div>
            <div className="foot-fine">
              You must be 21 or older to purchase. Smoking accessories are sold for legal tobacco use only.
            </div>
          </div>
          <div className="foot-bottom-right">
            <a href="#">Privacy</a>
            <a href="#">Terms</a>
            <a href="#">Accessibility</a>
            <a href="#">CA-Prop 65</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

function Home({ navigate, addToCart }) {
  return (
    <main>
      <Hero navigate={navigate} />
      <Categories navigate={navigate} />
      <Featured navigate={navigate} addToCart={addToCart} />
      <DropSection navigate={navigate} />
      <Lifestyle />
      <Newsletter />
      <Footer navigate={navigate} />
    </main>
  );
}

Object.assign(window, { Home, ProductCard, Footer });