/* soundstate — personal hub UI kit · part 1: nav, hero, bio, projects */

const { Logo, Button, IconButton, Badge, Card, ProjectCard, SectionLabel, Avatar } =
  window.SoundstateDesignSystem_2ebd41;

/* Lucide icon helper (icons hydrated by lucide.createIcons in the root effect) */
function Icon({ name, size = 18, stroke = 1.75, style = {} }) {
  return (
    <i
      data-lucide={name}
      style={{ display: 'inline-flex', width: size, height: size, ...style }}
      data-icon-size={size}
      data-icon-stroke={stroke}
    />
  );
}

const Section = ({ id, children, style = {} }) => (
  <section id={id} style={{ padding: '0 var(--gutter)', ...style }}>
    <div style={{ maxWidth: 'var(--container)', margin: '0 auto', width: '100%' }}>{children}</div>
  </section>
);

function Nav() {
  const links = [['work', '#work'], ['listen', '#listen'], ['connect', '#connect']];
  return (
    <div style={{
      position: 'sticky', top: 0, zIndex: 20,
      background: 'color-mix(in srgb, var(--paper) 82%, transparent)',
      backdropFilter: 'saturate(1.1) blur(10px)',
      borderBottom: '1px solid var(--border-soft)',
    }}>
      <nav style={{
        maxWidth: 'var(--container-wide)', margin: '0 auto',
        padding: 'var(--space-4) var(--gutter)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="#top" aria-label="soundstate — home"><Logo size={24} /></a>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-5)' }}>
          {links.map(([label, href]) => (
            <a key={href} href={href} style={{
              fontFamily: 'var(--font-sans)', fontSize: 'var(--text-sm)',
              fontWeight: 'var(--weight-medium)', color: 'var(--text-muted)',
            }}
              onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--text-strong)')}
              onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-muted)')}
            >{label}</a>
          ))}
          <Button size="sm" variant="secondary" href="mailto:jarrod@soundstate.co">say hello</Button>
        </div>
      </nav>
    </div>
  );
}

function Hero() {
  return (
    <Section id="top" style={{ paddingTop: 'var(--space-9)', paddingBottom: 'var(--space-8)' }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 'var(--space-7)', flexWrap: 'wrap' }}>
        <div style={{ flex: 1, minWidth: 280 }}>
          <span className="eyebrow" style={{ display: 'inline-flex', gap: '0.55rem', alignItems: 'center' }}>
            <span style={{ width: 18, height: 1, background: 'var(--green-400)' }} /> solo developer · music producer · ai builder
          </span>
          <h1 style={{ fontSize: 'var(--text-4xl)', marginTop: 'var(--space-4)', marginBottom: 'var(--space-4)', lineHeight: 1.02 }}>
            jarrod knapp
          </h1>
          <p style={{ fontSize: 'var(--text-md)', color: 'var(--text-body)', maxWidth: '48ch', marginBottom: 'var(--space-5)' }}>
            i build software, produce music, and connect the two with a little ai.
            this is where the work, the sounds, and a way to reach me all live.
          </p>
          <div style={{ display: 'flex', gap: 'var(--space-3)', flexWrap: 'wrap', alignItems: 'center' }}>
            <Button href="#listen">listen to clips</Button>
            <Button variant="ghost" href="#work">see what i'm building</Button>
          </div>
        </div>
        <div style={{ flexShrink: 0 }}>
          <Avatar initials="jk" size={132} shape="rounded" ring />
        </div>
      </div>
    </Section>
  );
}

function Bio() {
  return (
    <Section style={{ paddingTop: 'var(--space-6)', paddingBottom: 'var(--space-8)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '1fr', gap: 'var(--space-4)',
        fontSize: 'var(--text-md)', color: 'var(--text-body)', lineHeight: 'var(--leading-relaxed)',
        maxWidth: '60ch',
      }}>
        <p>
          i'm a solo software developer focused on ai integration — the unglamorous,
          important work of getting models, data, and real products to fit together.
          lately that's meant building small tools that make the hard parts feel calm.
        </p>
        <p>
          away from the editor i produce music and run a small home studio. the two
          worlds keep informing each other: a producer's patience for iteration, a
          developer's habit of shipping. currently open to new work.
        </p>
      </div>
    </Section>
  );
}

function Projects() {
  const projects = [
    { title: 'underlay-ai', description: "a practice exploring how data storage shapes ai integration — and why the boring foundations decide everything.", href: 'https://underlayai.co', domain: 'underlayai.co', tags: ['ai integration'] },
    { title: 'cadence', description: 'a gamified focus timer that turns deep work into a quiet, satisfying rhythm.', href: 'https://cadence-focus.com', domain: 'cadence-focus.com', tags: ['product', 'side project'] },
    { title: 'design it to grow', description: 'more side projects and job-hunt tech demos will land here as they ship.', comingSoon: true, tags: ['in progress'] },
  ];
  return (
    <Section id="work" style={{ paddingTop: 'var(--space-8)', paddingBottom: 'var(--space-8)' }}>
      <SectionLabel eyebrow="001 / work" title="things i'm building"
        note="a short, growing list. two live, more on the way."
        style={{ marginBottom: 'var(--space-6)' }} />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 'var(--space-4)' }}>
        {projects.map((p) => <ProjectCard key={p.title} {...p} />)}
      </div>
    </Section>
  );
}

Object.assign(window, { Icon, Section, Nav, Hero, Bio, Projects });