/* soundstate — personal hub UI kit · part 2: listen, lessons, talk, connect, footer, root */

const { Logo: _Logo, Button: _Button, IconButton: _IconButton, Badge: _Badge, Card: _Card,
        SectionLabel: _SectionLabel, Input: _Input, TrackPlayer } = window.SoundstateDesignSystem_2ebd41;

function Listen() {
  // Each track plays from `scUrl` (SoundCloud) or `src` (self-hosted mp3);
  // with neither it runs a simulated preview. Drop Jarrod's real URLs in here.
  const tracks = [
    { id: 'low-tide', title: 'low tide', meta: 'ambient · 2024', durationSec: 134, duration: '2:14' /* scUrl: 'https://soundcloud.com/…' */ },
    { id: 'cassette', title: 'cassette sketch', meta: 'beat · 2025', durationSec: 96, duration: '1:36' /* src: 'https://soundstate.co/audio/cassette-sketch.mp3' */ },
    { id: 'late-signal', title: 'late signal', meta: 'texture · 2025', durationSec: 172, duration: '2:52' },
    { id: 'porchlight', title: 'porchlight', meta: 'guitar · 2024', durationSec: 118, duration: '1:58' },
  ];
  return (
    <div style={{ background: 'var(--bg-band)', borderTop: '1px solid var(--green-100)', borderBottom: '1px solid var(--green-100)', padding: 'var(--space-9) 0' }}>
      <window.Section id="listen">
        <window._SL eyebrow="002 / listen" title="a few things i've been producing"
          note="short clips from recent sessions. press play — one plays at a time. headphones recommended."
          style={{ marginBottom: 'var(--space-5)' }} />
        <TrackPlayer tracks={tracks} />
        <p style={{ marginTop: 'var(--space-4)', fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', color: 'var(--text-faint)' }}>
          clips stream from soundcloud or self-hosted mp3 — one calm player either way
        </p>
      </window.Section>
    </div>
  );
}

function Lessons() {
  return (
    <window.Section style={{ paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-8)' }}>
      <_Card tone="band" inset="lg">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
          <div style={{ maxWidth: '46ch' }}>
            <_Badge tone="clay" dot>coming soon</_Badge>
            <h3 style={{ fontSize: 'var(--text-xl)', margin: 'var(--space-3) 0', fontFamily: 'var(--font-display)', fontWeight: 300 }}>
              learn music production &amp; home-studio setup
            </h3>
            <p style={{ fontSize: 'var(--text-base)', color: 'var(--text-body)', lineHeight: 'var(--leading-normal)' }}>
              i'm putting together online lessons — production workflow, mixing,
              and getting a calm home studio running. join the waitlist and i'll
              reach out when the first sessions open.
            </p>
          </div>
        </div>
        <div style={{ marginTop: 'var(--space-5)', maxWidth: 420 }}>
          <_Input type="email" placeholder="your email" size="lg"
            button={<_Button size="sm">notify me</_Button>} />
        </div>
      </_Card>
    </window.Section>
  );
}

function Talk() {
  return (
    <window.Section style={{ paddingTop: 'var(--space-6)', paddingBottom: 'var(--space-8)' }}>
      <_Card tone="dark" inset="lg" href="#" interactive
        onMouseEnter={(e)=>{const a=e.currentTarget.querySelector('[data-arrow]'); if(a){a.style.transform='translate(3px,-3px)';}}}
        onMouseLeave={(e)=>{const a=e.currentTarget.querySelector('[data-arrow]'); if(a){a.style.transform='translate(0,0)';}}}>
        <div style={{ display: 'flex', justifyContent: 'space-between', gap: 'var(--space-5)', alignItems: 'flex-start' }}>
          <div style={{ maxWidth: '52ch' }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--green-400)' }}>
              featured talk
            </span>
            <h3 style={{ color: 'var(--text-on-dark)', fontSize: 'var(--text-xl)', fontWeight: 300, margin: 'var(--space-3) 0 var(--space-3)' }}>
              why data storage matters for ai integration
            </h3>
            <p style={{ color: 'color-mix(in srgb, var(--text-on-dark) 80%, transparent)', fontSize: 'var(--text-base)', lineHeight: 'var(--leading-normal)' }}>
              a short talk on the unglamorous layer that decides whether an ai
              feature feels reliable — or like it's guessing. format &amp; host tbd.
            </p>
          </div>
          <span data-arrow aria-hidden="true" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-lg)', color: 'var(--green-400)', transition: 'transform var(--dur-base) var(--ease-out)' }}>↗</span>
        </div>
      </_Card>
    </window.Section>
  );
}

function Connect() {
  const links = [
    { name: 'linkedin', label: 'linkedin', href: 'https://www.linkedin.com/' },
    { name: 'mail', label: 'email', href: 'mailto:jarrod@soundstate.co' },
    { name: 'github', label: 'github', href: 'https://github.com/' },
  ];
  return (
    <window.Section id="connect" style={{ paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-9)' }}>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 'var(--space-5)' }}>
        <window._SL align="center" eyebrow="003 / connect" title="let's talk"
          note="open to new work, collaborations, and the occasional studio session." />
        <div style={{ display: 'flex', gap: 'var(--space-3)' }}>
          {links.map((l) => (
            <_IconButton key={l.name} variant="outline" size="lg" label={l.label} href={l.href}>
              <window.Icon name={l.name} size={20} />
            </_IconButton>
          ))}
        </div>
        <a href="mailto:jarrod@soundstate.co" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>jarrod@soundstate.co</a>
      </div>
    </window.Section>
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border-soft)', padding: 'var(--space-6) var(--gutter)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-4)', flexWrap: 'wrap' }}>
        <_Logo size={20} />
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--text-2xs)', color: 'var(--text-faint)' }}>
          © 2026 jarrod knapp · built quietly in colorado
        </span>
      </div>
    </footer>
  );
}

function Site() {
  React.useEffect(() => {
    if (window.lucide && window.lucide.createIcons) {
      window.lucide.createIcons({ attrs: { 'stroke-width': 1.75, width: 20, height: 20 } });
    }
  });
  return (
    <div>
      <window.Nav />
      <window.Hero />
      <window.Bio />
      <window.Projects />
      <Listen />
      <Lessons />
      <Talk />
      <Connect />
      <Footer />
    </div>
  );
}

/* expose SectionLabel under a short alias used above */
window._SL = window.SoundstateDesignSystem_2ebd41.SectionLabel;
Object.assign(window, { Listen, Lessons, Talk, Connect, Footer, Site });