// Hero — primary headline + subheadline + tagline rotation.

const Hero = ({ subhead }) => {
  const [taglineIdx, setTaglineIdx] = React.useState(0);
  const defaultSub = 'A personal lab for better homes, healthier routines, useful AI agents, and thoughtful work — kept in the open, edited as I go.';
  const taglines = [
    'Systems for everyday life.',
    'A field notebook for better infrastructure.',
    'Working notes on technology, home, and craft.',
  ];

  return (
    <section style={{ padding: '88px 0 64px', position: 'relative', zIndex: 2 }}>
      <div className="container">
        {/* Top metadata line */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
          <CatalogToken n="HOME · v0.4" state="LIVE" />
          <span className="meta" style={{ color: 'var(--ink-3)' }}>commonworklab.com · field notebook · 2026</span>
        </div>

        <h1 style={{
          fontFamily: 'var(--font-display)', fontWeight: 400,
          fontSize: 'clamp(48px, 7.2vw, 88px)', lineHeight: 1.02,
          letterSpacing: '-0.022em', color: 'var(--ink)',
          margin: '0 0 26px', maxWidth: '18ch', textWrap: 'balance'
        }}>
          Commonwork Lab builds <em>practical systems</em> for <em>modern life.</em>
        </h1>

        <p style={{
          maxWidth: '54ch', color: 'var(--ink-2)',
          fontSize: 'clamp(18px, 1.6vw, 22px)',
          lineHeight: 1.5, margin: 0,
          fontFamily: 'var(--font-text)',
          textWrap: 'pretty',
        }}>
          {subhead || defaultSub}
        </p>

        {/* Action row */}
        <div style={{
          display: 'flex', alignItems: 'center', gap: 18,
          marginTop: 44, flexWrap: 'wrap',
          paddingBottom: 28, borderBottom: '1px solid var(--rule)',
        }}>
          <Button kind="default" onClick={() => document.getElementById('projects')?.scrollIntoView({ behavior: 'smooth' })}>
            See the projects
            <Icon name="arrow-right" size={14} />
          </Button>
          <Button kind="ghost" onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}>
            Subscribe to field notes
          </Button>

          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 12 }}>
            <span className="meta" style={{ textTransform: 'uppercase', letterSpacing: '0.14em', color: 'var(--ink-3)' }}>Tagline</span>
            <button
              onClick={() => setTaglineIdx((i) => (i + 1) % taglines.length)}
              style={{
                fontFamily: 'var(--font-display)', fontStyle: 'italic',
                fontSize: 17, color: 'var(--ink-2)', background: 'none',
                border: 'none', cursor: 'pointer', padding: 0,
                borderBottom: '1px dashed var(--rule-strong)'
              }}
              title="Cycle taglines"
            >
              {taglines[taglineIdx]}
            </button>
          </div>
        </div>

        {/* "Currently" strip — woven into hero rather than its own section */}
        <CurrentlyStrip />
      </div>
    </section>
  );
};

window.Hero = Hero;