/* ── Merch · EPK · Contact · Footer · App ── */

/* ── MERCH ── */
function MerchSection() {
  return (
    <section id="merch" data-screen-label="06 Merch" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 3 }}>
          {/* Merch card */}
          <MerchCard
            num={6} title="MERCH"
            body="Physical media, clothing, and limited-edition releases from The Breakdown. Available through our official store at Elastic Stage."
            cta="VISIT THE STORE"
            ctaHref="https://elasticstage.com/thebreakdown/"
            items={['Physical albums and singles', 'Limited edition releases', 'Band merchandise and clothing', 'Exclusive collectibles']}
            icon="fas fa-compact-disc"
          />
          {/* EPK card */}
          <EpkCard />
        </div>
      </div>
    </section>
  );
}

function MerchCard({ num, title, body, cta, ctaHref, items, icon }) {
  return (
    <div style={{ background: '#0d0d0d', border: '1px solid #1a1a1a', padding: '56px 48px' }}>
      <div style={{ marginBottom: 40 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 14 }}>
          {String(num).padStart(2, '0')} &mdash; {title}
        </div>
        <h2 style={{ fontSize: 'clamp(1.8rem, 3.5vw, 2.4rem)', fontWeight: 900, letterSpacing: '4px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1, marginBottom: 20, animation: 'tb-flicker 2.5s infinite' }}>{title}</h2>
        <p style={{ fontSize: 13, lineHeight: 1.8, color: '#999', maxWidth: 400 }}>{body}</p>
      </div>
      <ul style={{ listStyle: 'none', padding: 0, marginBottom: 40 }}>
        {items.map((item, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '12px 0', borderBottom: '1px solid #161616', fontSize: 12, color: '#bbb', letterSpacing: '0.5px' }}>
            <i className={icon} style={{ color: C.blue, width: 16, textAlign: 'center', fontSize: 11 }}></i>
            {item}
          </li>
        ))}
      </ul>
      <Btn href={ctaHref}><i className="fas fa-external-link-alt" style={{ fontSize: 10 }}></i>{cta}</Btn>
    </div>
  );
}

function EpkCard() {
  const [hov, setHov] = React.useState(false);
  return (
    <a href="https://thinkable-arthropod-0ec.notion.site/The-Breakdown-EPK"
      target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ display: 'block', background: hov ? '#0f0f0f' : C.black, border: `1px solid ${hov ? '#333' : '#1a1a1a'}`, padding: '56px 48px', textDecoration: 'none', transition: 'all 0.3s', position: 'relative', overflow: 'hidden' }}>
      {/* Big background text */}
      <div style={{ position: 'absolute', bottom: -10, right: 24, fontSize: '10rem', fontWeight: 900, letterSpacing: '-4px', color: '#0f0f0f', lineHeight: 1, userSelect: 'none', transition: 'color 0.3s', color: hov ? '#111' : '#0d0d0d' }}>EPK</div>

      <div style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 14 }}>07 &mdash; EPK</div>
        <h2 style={{ fontSize: 'clamp(1.8rem, 3.5vw, 2.4rem)', fontWeight: 900, letterSpacing: '4px', textTransform: 'uppercase', color: '#e0e0e0', lineHeight: 1, marginBottom: 24, animation: 'tb-flicker 2.5s infinite' }}>ELECTRONIC<br/>PRESS KIT</h2>
        <p style={{ fontSize: 13, lineHeight: 1.8, color: '#999', marginBottom: 40, maxWidth: 340 }}>
          Bios, photos, press clippings, and everything you need. Available on Notion.
        </p>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, fontSize: 11, fontWeight: 700, letterSpacing: '2.5px', textTransform: 'uppercase', color: hov ? '#e0e0e0' : C.muted, borderBottom: `1px solid ${hov ? '#e0e0e0' : '#333'}`, paddingBottom: 3, transition: 'all 0.3s' }}>
          VIEW EPK <i className="fas fa-external-link-alt" style={{ fontSize: 9 }}/>
        </div>
      </div>
    </a>
  );
}

/* ── CONTACT ── */
function ContactSection() {
  const [subscribeOpen, setSubscribeOpen] = React.useState(false);
  return (
    <section id="contact" data-screen-label="08 Contact" style={{ padding: '100px 0', background: C.black, borderTop: '1px solid #161616' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '0 40px' }}>
        <SectionHeader num={8} title="CONTACT" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 2 }}>

          {/* Contact */}
          <ContactBlock title="GET IN TOUCH" body="For bookings, press, and all other enquiries.">
            <ContactLink href="mailto:thebreakdownband@outlook.com">thebreakdownband@outlook.com</ContactLink>
          </ContactBlock>

          {/* Follow + Subscribe (ghosted) */}
          <div style={{ background: '#0d0d0d', border: '1px solid #1a1a1a', padding: '40px 36px' }}>
            <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 16 }}>FOLLOW</div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 36 }}>
              <SocialIcon icon="fab fa-instagram" href="#" title="Instagram"/>
              <SocialIcon icon="fab fa-youtube" href={STREAM_LINKS.youtube} title="YouTube"/>
              <SocialIcon icon="fab fa-spotify" href={STREAM_LINKS.spotify} title="Spotify"/>
              <SocialIcon icon="fab fa-soundcloud" href={STREAM_LINKS.soundcloud} title="SoundCloud"/>
              <SocialIcon icon="fab fa-facebook" href="#" title="Facebook"/>
            </div>
            <div style={{ borderTop: '1px solid #111', paddingTop: 28 }}>
              <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 10 }}>MAILING LIST</div>
              <p style={{ fontSize: 12, color: '#666', lineHeight: 1.7, marginBottom: 20 }}>First access to shows, releases, and everything else.</p>
              <Btn small onClick={() => setSubscribeOpen(true)}>SUBSCRIBE</Btn>
            </div>
          </div>
        </div>
      </div>
      {subscribeOpen && <SubscribeModal onClose={() => setSubscribeOpen(false)}/>}
    </section>
  );
}

function ContactBlock({ title, body, children }) {
  return (
    <div style={{ background: '#0d0d0d', border: '1px solid #1a1a1a', padding: '40px 36px' }}>
      <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '3px', textTransform: 'uppercase', color: C.muted, marginBottom: 16 }}>{title}</div>
      <p style={{ fontSize: 12, color: '#666', lineHeight: 1.7, marginBottom: 20 }}>{body}</p>
      {children}
    </div>
  );
}

function ContactLink({ href, children }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ color: '#e0e0e0', textDecoration: 'none', fontSize: 12, borderBottom: `1px solid ${hov ? '#e0e0e0' : '#333'}`, paddingBottom: 2, transition: 'border-color 0.3s', letterSpacing: '0.5px' }}>
      {children}
    </a>
  );
}

function SocialIcon({ icon, href, title }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={href} title={title} target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ width: 40, height: 40, border: `1px solid ${hov ? '#e0e0e0' : '#2a2a2a'}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: hov ? '#0a0a0a' : '#666', background: hov ? '#e0e0e0' : 'transparent', fontSize: 15, textDecoration: 'none', transition: 'all 0.25s' }}>
      <i className={icon}/>
    </a>
  );
}

/* ── FOOTER ── */
function Footer() {
  return (
    <footer style={{ padding: '48px 40px', borderTop: '1px solid #1a1a1a', background: C.black }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 20 }}>
        <img src="assets/icon.png" alt="The Breakdown" style={{ height: 32, animation: 'tb-flicker-logo 4s infinite', opacity: 0.7 }}/>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <span style={{ fontSize: 9, letterSpacing: '2px', textTransform: 'uppercase', color: '#333' }}>
            © 2026 The Breakdown. All rights reserved.
          </span>
          <a href="https://thinkable-arthropod-0ec.notion.site/The-Breakdown-EPK" target="_blank" rel="noreferrer"
            style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: '#444', textDecoration: 'none', transition: 'color 0.3s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#e0e0e0'}
            onMouseLeave={e => e.currentTarget.style.color = '#444'}>
            EPK
          </a>
          <a href="mailto:info@thebreakdown.band"
            style={{ fontSize: 9, fontWeight: 700, letterSpacing: '2px', textTransform: 'uppercase', color: '#444', textDecoration: 'none', transition: 'color 0.3s' }}
            onMouseEnter={e => e.currentTarget.style.color = '#e0e0e0'}
            onMouseLeave={e => e.currentTarget.style.color = '#444'}>
            CONTACT
          </a>
        </div>
      </div>
    </footer>
  );
}

/* ── APP ── */
function App() {
  const [active, setActive] = React.useState('hero');
  const [subscribeOpen, setSubscribeOpen] = React.useState(false);

  // Scroll-spy
  React.useEffect(() => {
    const ids = ['hero', 'news', 'live', 'music', 'video', 'discography', 'photos', 'merch', 'contact'];
    const observers = ids.map(id => {
      const el = document.getElementById(id);
      if (!el) return null;
      const obs = new IntersectionObserver(([entry]) => {
        if (entry.isIntersecting) setActive(id);
      }, { threshold: 0.2 });
      obs.observe(el);
      return obs;
    });
    return () => observers.forEach(o => o && o.disconnect());
  }, []);

  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.pageYOffset - 68;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <SiteNav active={active} onNav={scrollTo} onSubscribe={() => setSubscribeOpen(true)} />
      <main style={{ paddingTop: 68 }}>
        <Hero onNav={scrollTo} />
        <NewsSection />
        <LiveSection />
        <MusicSection />
        <VideoSection />
        <DiscographySection />
        <PhotosSection />
        <MerchSection />
        <ContactSection />
        <Footer />
      </main>
      {subscribeOpen && <SubscribeModal onClose={() => setSubscribeOpen(false)} />}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);