// Saancha Shoes — Homepage
function Home() {
  const { navigate } = useStore();
  const products = window.PRODUCTS;
  const shoes = products.filter(p => p.group === 'shoes');

  const heroShoe = shoes[0];

  const constructionMethods = [
    {
      id: 'goodyear',
      label: 'Goodyear Welt',
      desc: 'A strip of leather (the welt) is stitched to the upper and insole, then the outsole is lock-stitched to the welt. A cork bed fills the cavity. Fully resoleable. The gold standard of bench-made footwear since 1869.',
    },
    {
      id: 'blake',
      label: 'Blake Stitch',
      desc: 'A single stitch joins upper, insole, and outsole from the inside. Half the weight of Goodyear. Favoured by Italian shoemakers for its clean, close-cut profile and flexible forefoot.',
    },
    {
      id: 'storm',
      label: 'Storm Welt',
      desc: 'A Goodyear welt with an L-shaped lip that seals against the upper. Originally developed for English country boots crossing wet heath. Impermeable to rain, mud, and the monsoon.',
    },
    {
      id: 'tubular',
      label: 'Tubular',
      desc: 'The upper is wrapped around the last and stitched directly to the sole. No welt, no insole board. The lightest construction. Traditional for moccasins, driving shoes, and loafers.',
    },
  ];

  return (
    <>
      {/* ── 01: Hero ── */}
      <section>
        <div className="container hero-grid">
          <div className="hero-text">
            <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)' }}>
              <span style={{ color: 'var(--color-accent)' }}>01_</span>THE WORKSHOP
            </div>
            <h1>The Last Word<br />in Leather</h1>
            <p>Ten shoes. One workshop. Islamabad.</p>
            <div style={{ marginTop: 'var(--space-lg)' }}>
              <button className="btn btn-outline btn-lg" onClick={() => navigate({ name: 'category', group: 'shoes' })}>
                See the Collection <Ic.arrowR />
              </button>
            </div>
          </div>
          <div className="hero-visual" style={{ border: 'none', padding: 0, background: 'transparent' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr', gridTemplateRows: '1fr 1fr', gap: 'var(--rule-width)', aspectRatio: '4/3' }}>
              {shoes.slice(0, 5).map((s, i) => (
                <div key={s.id} onClick={() => navigate({ name: 'product', id: s.id })} style={{
                  overflow: 'hidden', cursor: 'pointer',
                  border: 'var(--rule-width) solid var(--color-border)',
                  background: 'var(--color-paper-2)',
                  ...(i === 0 ? { gridRow: '1 / 3', gridColumn: '1' } : {})
                }}>
                  <img src={s.img} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                </div>
              ))}
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'var(--color-accent)', marginTop: 'var(--space-sm)', textAlign: 'right' }}>fig. 1 — The Collection</div>
          </div>
        </div>
      </section>

      {/* ── 02: The Collection ── */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)' }}>
              <span style={{ color: 'var(--color-accent)' }}>02_</span>THE COLLECTION
            </div>
            <h2 style={{ marginTop: 'var(--space-sm)' }}>Ten Shoes. Infinite Patina.</h2>
            <p style={{ color: 'var(--color-text-soft)', maxWidth: 'var(--width-prose)' }}>
              Every Saancha shoe is cut, lasted, and finished by hand in our Islamabad workshop. No two pairs wear the same way — each develops a patina unique to its owner.
            </p>
          </div>
          <div className="product-grid">
            {shoes.map(p => <ProductCard key={p.id} product={p} />)}
          </div>
        </div>
      </section>

      {/* ── 03: Construction ── */}
      <section className="section" style={{ background: 'var(--color-paper-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)' }}>
              <span style={{ color: 'var(--color-accent)' }}>03_</span>CONSTRUCTION
            </div>
            <h2 style={{ marginTop: 'var(--space-sm)' }}>How a Shoe is Built</h2>
            <p style={{ color: 'var(--color-text-soft)', maxWidth: 'var(--width-prose)' }}>
              Four methods. Each with its own anatomy. Each suited to a different purpose.
            </p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 'var(--space-md)' }}>
            {constructionMethods.map(m => (
              <div key={m.id} style={{ background: 'var(--color-surface)', padding: 'var(--space-xl)', borderBottom: 'var(--rule-width-heavy) solid transparent' }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--color-accent)', marginBottom: 'var(--space-sm)' }}>
                  {m.label}
                </div>
                <p style={{ fontFamily: 'var(--font-serif)', fontSize: 'var(--text-sm)', color: 'var(--color-text-soft)', lineHeight: 1.6, margin: 0 }}>
                  {m.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── 04: The Last ── */}
      <section className="section">
        <div className="container" style={{ maxWidth: 'var(--width-prose)', textAlign: 'center' }}>
          <BrandSeal size={72} />
          <div className="eyebrow-gold" style={{ color: 'var(--color-text-mute)', marginTop: 'var(--space-xl)', marginBottom: 'var(--space-md)' }}>
            <span style={{ color: 'var(--color-accent)' }}>04_</span>THE LAST
          </div>
          <h2 style={{ marginBottom: 'var(--space-lg)' }}>Saancha</h2>
          <p style={{ fontSize: 'var(--text-lg)', lineHeight: 1.7, color: 'var(--color-text-soft)', maxWidth: '600px', marginLeft: 'auto', marginRight: 'auto' }}>
            In Urdu, <em>saancha</em> means mould. The last — a carved wooden form around which every shoe is built — determines shape, fit, proportion, and how light falls across the leather. A good last is the difference between a shoe you wear and a shoe that wears you.
          </p>
          <p style={{ fontSize: 'var(--text-base)', lineHeight: 1.7, color: 'var(--color-text-mute)', maxWidth: '600px', marginLeft: 'auto', marginRight: 'auto' }}>
            Every Saancha shoe begins on a single last, shaped by hand in our Islamabad workshop. No two makers share the same last. This one is ours.
          </p>
        </div>
      </section>

      <TrustStrip />
    </>
  );
}

/* ── Product Card (matches brutalist CSS) ── */
function ProductCard({ product }) {
  const { navigate, addToCart, wish, toggleWish } = useStore();
  const toast = useToast();
  const wished = wish.has(product.id);

  return (
    <div className="product-card" onClick={() => navigate({ name: 'product', id: product.id })}>
      <div className="img-wrap">
        <img src={product.img} alt={product.name} loading="lazy" />
        <button
          className={'wishlist' + (wished ? ' is-on' : '')}
          onClick={e => { e.stopPropagation(); toggleWish(product.id); }}
          aria-label="Wishlist"
          style={{
            position: 'absolute', top: 'var(--space-sm)', right: 'var(--space-sm)',
            width: 36, height: 36, display: 'grid', placeItems: 'center',
            background: 'var(--color-surface)', border: 'var(--rule-width) solid var(--color-border)',
          }}
        >
          <Ic.heart fill={wished ? 'currentColor' : 'none'} />
        </button>
      </div>
      <div className="spec-strip">{product.construction}</div>
      <div className="info">
        <div className="name">{product.name}</div>
        <div className="muted">{product.leather}</div>
        <div className="price">
          {product.sale && <span className="regular">{fmt(product.regular)}</span>}
          {fmt(product.price)}
        </div>
      </div>
    </div>
  );
}

/* ── Trust Strip ── */
function TrustStrip() {
  return (
    <section className="section" style={{ padding: 'var(--space-2xl) 0' }}>
      <div className="container" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 'var(--space-md)' }}>
        {[
          { icon: 'truck', lbl: 'Free Shipping', sub: 'On orders over Rs 5,000' },
          { icon: 'refresh', lbl: '14-Day Returns', sub: 'No questions. Free pickup.' },
          { icon: 'shield', lbl: 'Craft Warranty', sub: '2 years on construction' },
          { icon: 'award', lbl: 'Made in Islamabad', sub: 'By hand. One pair at a time.' },
        ].map((t, i) => (
          <div key={i} style={{ background: 'var(--color-surface)', padding: 'var(--space-lg)', display: 'flex', alignItems: 'center', gap: 'var(--space-md)' }}>
            {Ic[t.icon]()}
            <div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-xs)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 2 }}>{t.lbl}</div>
              <div style={{ fontSize: 'var(--text-sm)', color: 'var(--color-text-mute)' }}>{t.sub}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Home = Home;
window.ProductCard = ProductCard;
window.TrustStrip = TrustStrip;