// Club shop — kit launch banner (home page) + full shop page.
// Reads KITS / KIT_SIZES from data.jsx. Buy buttons point at each kit's
// SumUp link (`buyUrl` in data.jsx); until those are filled in they no-op.

// Poster image with a graceful fallback while the real PNG isn't in /assets yet.
const KitPoster = ({ kit, rounded = false }) => {
  const [failed, setFailed] = React.useState(false);
  if (failed) {
    return (
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(160deg, ${kit.accent} 0%, var(--ink) 95%)`,
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        textAlign: 'center', padding: 24, gap: 10,
      }}>
        <WrenBadge size={56} />
        <div className="display" style={{ fontSize: 40, color: '#fff', lineHeight: 0.95 }}>
          {kit.name.toUpperCase()}
        </div>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.85)' }}>
          {kit.season} · {kit.colourway.toUpperCase()}
        </div>
        <div className="mono" style={{
          marginTop: 8, fontSize: 9, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.6)',
          border: '1px dashed rgba(255,255,255,0.4)', padding: '6px 10px',
        }}>
          ADD {kit.img.split('/').pop()} TO /ASSETS
        </div>
      </div>
    );
  }
  return (
    <img
      src={kit.img}
      alt={`Blackpool Wren Rovers ${kit.name} ${kit.season}`}
      onError={() => setFailed(true)}
      style={{
        position: 'absolute', inset: 0, width: '100%', height: '100%',
        objectFit: 'cover', objectPosition: 'center top',
        borderRadius: rounded ? 4 : 0,
      }}
    />
  );
};

// ---------------------------------------------------------------------------
// KitLaunch — bold "new kits" banner that sits near the top of the home page.
// ---------------------------------------------------------------------------
const KitLaunch = ({ setPage }) => (
  <section style={{ position: 'relative', background: 'var(--ink)', color: '#fff', overflow: 'hidden' }}>
    {/* atmospheric glow */}
    <div style={{
      position: 'absolute', left: '-10%', top: '20%', width: 520, height: 520,
      background: 'radial-gradient(circle, rgba(200,16,46,0.35) 0%, transparent 70%)', filter: 'blur(20px)',
    }} />
    <div style={{
      position: 'absolute', right: '-10%', top: '10%', width: 520, height: 520,
      background: 'radial-gradient(circle, rgba(31,79,181,0.35) 0%, transparent 70%)', filter: 'blur(20px)',
    }} />

    <StripeRule height={6} />
    <div className="container" style={{ position: 'relative', padding: '64px 28px 72px' }}>
      <div data-section-head style={{
        display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 18, marginBottom: 36,
      }}>
        <div>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.24em', color: 'var(--red)', fontWeight: 700 }}>
            ▸ OUT NOW · 2026/27 SEASON
          </div>
          <h2 className="display" style={{
            fontSize: 'clamp(44px, 8vw, 104px)', margin: '12px 0 0', lineHeight: 0.9, textTransform: 'uppercase',
          }}>
            The new kits<br />have landed.
          </h2>
        </div>
        <p style={{ maxWidth: 360, margin: 0, color: 'rgba(255,255,255,0.75)', fontSize: 15, lineHeight: 1.6 }}>
          Home and away shirts for the new season — for players, parents and supporters. Secure checkout via SumUp.
        </p>
      </div>

      {/* Two poster cards */}
      <div data-kit-launch-grid style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
        {KITS.map(kit => (
          <div key={kit.id} style={{
            background: '#000', border: '1px solid rgba(255,255,255,0.12)', overflow: 'hidden',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{ position: 'relative', aspectRatio: '74/104', width: '100%' }}>
              <KitPoster kit={kit} />
              <div style={{
                position: 'absolute', top: 0, left: 0,
                background: kit.accent, color: '#fff', padding: '6px 14px',
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10, fontWeight: 700, letterSpacing: '0.18em',
              }}>{kit.id === 'home' ? 'HOME' : 'AWAY'}</div>
            </div>
            <div style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              padding: '18px 20px', gap: 12, borderTop: '1px solid rgba(255,255,255,0.12)',
            }}>
              <div>
                <div className="display" style={{ fontSize: 26, lineHeight: 1 }}>{kit.name.toUpperCase()}</div>
                <div className="mono" style={{ fontSize: 10, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.55)', marginTop: 4 }}>
                  FROM {kit.juniorPrice} · SENIOR {kit.price}
                </div>
              </div>
              <Btn variant="primary" size="md" onClick={() => {
                if (kit.buyUrl && kit.buyUrl !== '#') window.open(kit.buyUrl, '_blank', 'noopener');
                else setPage('shop');
              }}>Buy Now</Btn>
            </div>
          </div>
        ))}
      </div>

      <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
        <Btn variant="outlineLight" size="lg" onClick={() => setPage('shop')}>Visit the Club Shop</Btn>
      </div>
    </div>
    <StripeRule height={6} />
  </section>
);

// ---------------------------------------------------------------------------
// ShopSection — the dedicated Shop page.
// ---------------------------------------------------------------------------
const KitProduct = ({ kit }) => {
  const live = kit.buyUrl && kit.buyUrl !== '#';
  const go = () => { if (live) window.open(kit.buyUrl, '_blank', 'noopener'); };

  return (
    <div data-kit-product style={{
      background: '#fff', border: '1px solid var(--line-soft)', overflow: 'hidden',
      display: 'grid', gridTemplateColumns: '1fr 1fr',
    }}>
      {/* Poster */}
      <div style={{ position: 'relative', aspectRatio: '74/104', background: '#000' }}>
        <KitPoster kit={kit} />
      </div>

      {/* Details */}
      <div style={{ padding: '32px 32px', display: 'flex', flexDirection: 'column' }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.22em', color: kit.accent, fontWeight: 700 }}>
          {kit.season} · {kit.colourway.toUpperCase()}
        </div>
        <h3 className="display" style={{ fontSize: 48, margin: '8px 0 0', lineHeight: 0.95, textTransform: 'uppercase' }}>
          {kit.name}
        </h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--muted)', margin: '14px 0 0' }}>{kit.blurb}</p>

        {/* Price */}
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 18, marginTop: 22 }}>
          <div>
            <div className="display" style={{ fontSize: 46, lineHeight: 1 }}>{kit.price}</div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--muted)', marginTop: 2 }}>SENIOR</div>
          </div>
          <div>
            <div className="display" style={{ fontSize: 46, lineHeight: 1, color: 'var(--muted)' }}>{kit.juniorPrice}</div>
            <div className="mono" style={{ fontSize: 9, letterSpacing: '0.16em', color: 'var(--muted)', marginTop: 2 }}>JUNIOR</div>
          </div>
        </div>


        {/* Buy */}
        <div style={{ marginTop: 'auto', paddingTop: 26 }}>
          <button onClick={go} disabled={!live} style={{
            width: '100%', padding: '16px 24px',
            background: live ? 'var(--red)' : 'var(--paper-2)',
            color: live ? '#fff' : 'var(--muted)',
            border: 'none', cursor: live ? 'pointer' : 'not-allowed',
            fontFamily: 'inherit', fontSize: 14, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          }}>
            {live ? `Buy Now — ${kit.price}` : 'Buy Now (link coming soon)'} {live && <span>→</span>}
          </button>
          <div className="mono" style={{
            fontSize: 9.5, letterSpacing: '0.14em', color: 'var(--muted)', marginTop: 10, textAlign: 'center',
          }}>
            SECURE CHECKOUT VIA SUMUP · {kit.sponsor.toUpperCase()} KIT
          </div>
        </div>
      </div>
    </div>
  );
};

const ShopSection = () => (
  <section style={{ background: 'var(--paper)', padding: '64px 0 96px' }} id="shop">
    <div className="container">
      <SectionHead
        kicker="Club Shop · 2026/27"
        title="Wear it. Live it. Rovers."
        right={
          <p style={{ maxWidth: 380, margin: 0, color: 'var(--muted)', fontSize: 14, lineHeight: 1.55 }}>
            Official home and away shirts, available in adult and junior sizes. Every purchase backs the club.
          </p>
        }
      />

      <div style={{ display: 'grid', gap: 24 }}>
        {KITS.map(kit => <KitProduct key={kit.id} kit={kit} />)}
      </div>

      {/* How it works / collection */}
      <div style={{
        marginTop: 28, background: 'var(--ink)', color: '#fff',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
      }} data-shop-info>
        {[
          ['SECURE PAYMENT', 'Checkout is handled by SumUp — card payments taken safely online.'],
          ['SIZES S–XXL + JUNIOR', 'Adult and junior sizes available. Not sure on a size? Ask at training.'],
          ['COLLECT OR POST', 'Collect from the club, or add postage at checkout. We’ll be in touch to arrange.'],
        ].map(([h, b]) => (
          <div key={h} style={{ background: 'var(--ink)', padding: '26px 24px' }}>
            <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', color: 'var(--red)', fontWeight: 700 }}>{h}</div>
            <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.75)', margin: '10px 0 0' }}>{b}</p>
          </div>
        ))}
      </div>

      <div className="mono" style={{
        marginTop: 16, fontSize: 10, letterSpacing: '0.14em', color: 'var(--muted)', textAlign: 'center',
      }}>
        QUESTIONS ABOUT THE SHOP? EMAIL OLIVERPERKINS@BLACKPOOLWRENROVERS.CO.UK
      </div>
    </div>
  </section>
);

Object.assign(window, { KitLaunch, ShopSection });