// lab-parts.jsx — reusable UI atoms: Button, Tag, SectionHead, Header, Footer
// ---------------------------------------------------------------------------

const PartArrow = ({ size = 12, color = 'currentColor' }) => (
  <svg width={size} height={size * 0.72} viewBox="0 0 14 10" fill="none" aria-hidden="true">
    <path d="M0 5h11M7 1l4 4-4 4" stroke={color} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

// ---------------------------------------------------------------------------
// Button — radius 8 with right-side arrow chip.
//   primary | secondary | inverted (on coral/ink)
// ---------------------------------------------------------------------------
function Button({ children, variant = 'primary', size = 'md', href, target, onClick, fullWidth = false }) {
  const [hov, setHov] = React.useState(false);
  const dims = size === 'sm'
    ? { h: 46, fs: 14, padX: 18, chip: 24 }
    : size === 'lg'
      ? { h: 64, fs: 16, padX: 30, chip: 32 }
      : { h: 56, fs: 15, padX: 24, chip: 28 };

  let bg, fg, bd, chipBg, chipFg;
  if (variant === 'primary') {
    bg = hov ? '#A85A40' : '#CC785C'; fg = '#FFFFFF'; bd = 'transparent';
    chipBg = hov ? '#FFFFFF' : 'rgba(255,255,255,0.16)'; chipFg = hov ? '#A85A40' : '#FFFFFF';
  } else if (variant === 'secondary') {
    bg = hov ? '#F4F1EA' : '#FFFFFF'; fg = '#1A1A1A'; bd = '#E5E2DC';
    chipBg = hov ? '#CC785C' : '#F4F1EA'; chipFg = hov ? '#FFFFFF' : '#CC785C';
  } else {
    bg = hov ? '#F4F1EA' : '#FFFFFF'; fg = '#A85A40'; bd = 'transparent';
    chipBg = hov ? '#CC785C' : '#F3DCD0'; chipFg = hov ? '#FFFFFF' : '#A85A40';
  }

  const Tag = href ? 'a' : 'button';
  const extra = href && target === '_blank' ? { target: '_blank', rel: 'noopener noreferrer' } : {};
  return (
    <Tag href={href} onClick={onClick} {...extra}
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
        height: dims.h, padding: `0 ${Math.max(8, dims.padX - 8)}px 0 ${dims.padX}px`,
        width: fullWidth ? '100%' : 'auto', background: bg, color: fg,
        border: `1px solid ${bd}`, borderRadius: 8,
        fontFamily: 'var(--ff-pair)', fontWeight: 700, fontSize: dims.fs, letterSpacing: '0.04em',
        textDecoration: 'none', cursor: 'pointer', appearance: 'none',
        transition: 'background 180ms var(--ease-out), color 180ms var(--ease-out), border-color 180ms var(--ease-out), transform 180ms var(--ease-out)',
        transform: hov ? 'translateY(-1px)' : 'none', whiteSpace: 'nowrap',
      }}>
      <span>{children}</span>
      <span style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: dims.chip, height: dims.chip, background: chipBg, color: chipFg, borderRadius: 4,
        transition: 'background 180ms var(--ease-out), color 180ms var(--ease-out)', flexShrink: 0,
      }}>
        <PartArrow size={dims.chip * 0.45} />
      </span>
    </Tag>
  );
}

// ---------------------------------------------------------------------------
// Tag — small UPPER pill. tone: mono | coral | cream | ink | green
// ---------------------------------------------------------------------------
function Tag({ children, tone = 'mono' }) {
  const map = {
    mono:  { bg: '#FFFFFF', fg: '#1A1A1A', bd: '#E5E2DC' },
    coral: { bg: '#F3DCD0', fg: '#A85A40', bd: 'transparent' },
    cream: { bg: '#F4F1EA', fg: '#1A1A1A', bd: 'transparent' },
    ink:   { bg: '#1A1A1A', fg: '#FFFFFF', bd: 'transparent' },
    green: { bg: 'rgba(60,140,92,0.12)', fg: '#3C8C5C', bd: 'transparent' },
  };
  const tt = map[tone] || map.mono;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', height: 26, padding: '0 11px',
      background: tt.bg, color: tt.fg, border: `1px solid ${tt.bd}`, borderRadius: 4,
      fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 11,
      letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

// ---------------------------------------------------------------------------
// SectionHead — marker → big bilingual title → optional lead.
// ---------------------------------------------------------------------------
function SectionHead({ no, label, jpLabel = null, titleEn = null, title, lead = null, align = 'left', onDark = false, maxLead = 680 }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', gap: 22, textAlign: align,
      alignItems: align === 'center' ? 'center' : 'flex-start',
      maxWidth: align === 'center' ? 820 : 'none',
      marginLeft: align === 'center' ? 'auto' : 0, marginRight: align === 'center' ? 'auto' : 0,
    }}>
      <SectionMarker no={no} label={label} jpLabel={jpLabel} onDark={onDark} />
      <h2 style={{
        margin: 0, fontFamily: 'var(--ff-pair)', fontWeight: 700,
        fontSize: 'var(--fs-section-title)', letterSpacing: 'var(--tr-section)',
        lineHeight: 1.24, color: onDark ? '#FFFFFF' : '#1A1A1A',
      }}>
        {titleEn ? (
          <div style={{
            fontFamily: 'var(--ff-latin)', fontWeight: 800,
            fontSize: 'calc(var(--fs-section-title) * 0.58)', letterSpacing: '-0.015em',
            color: '#CC785C', marginBottom: 10, lineHeight: 1.05,
          }}>{titleEn}</div>
        ) : null}
        {title}
      </h2>
      {lead ? (
        <p style={{
          margin: 0, fontFamily: 'var(--ff-body)', fontWeight: 400, fontSize: 16,
          lineHeight: 1.95, color: onDark ? 'rgba(255,255,255,0.82)' : '#3a3a3a',
          maxWidth: maxLead, textWrap: 'pretty',
        }}>{lead}</p>
      ) : null}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Header — sticky top nav. Logo left, JP nav, CTA right.
// ---------------------------------------------------------------------------
function Header({ activeId = '', onNav }) {
  const items = [
    { id: 'pain',     label: '課題' },
    { id: 'why',      label: 'なぜlanitech' },
    { id: 'plans',    label: 'プラン' },
    { id: 'usecases', label: '活用' },
    { id: 'security', label: 'セキュリティ' },
    { id: 'faq',      label: 'FAQ' },
  ];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.92)', backdropFilter: 'blur(10px)',
      WebkitBackdropFilter: 'blur(10px)', borderBottom: '1px solid var(--cc-hairline)',
    }}>
      <div className="lab-header-inner" style={{
        maxWidth: 'var(--max-layout)', margin: '0 auto', padding: '13px 48px',
        display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 32,
      }}>
        <a href="#top" onClick={(e)=>{e.preventDefault(); onNav && onNav('top');}} style={{ textDecoration: 'none' }}>
          <LabLogo size={0.92} />
        </a>
        <nav className="lab-nav" style={{ display: 'flex', justifyContent: 'flex-end', gap: 26 }}>
          {items.map(it => {
            const active = activeId === it.id;
            return (
              <a key={it.id} href={`#${it.id}`}
                 onClick={(e)=>{e.preventDefault(); onNav && onNav(it.id);}}
                 style={{
                   fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 13, letterSpacing: '0.06em',
                   color: active ? '#CC785C' : '#1A1A1A', textDecoration: 'none', paddingBottom: 4,
                   borderBottom: `2px solid ${active ? '#CC785C' : 'transparent'}`,
                   transition: 'color 160ms var(--ease-out), border-color 160ms var(--ease-out)',
                   whiteSpace: 'nowrap',
                 }}
                 onMouseEnter={e => e.currentTarget.style.color = '#CC785C'}
                 onMouseLeave={e => e.currentTarget.style.color = active ? '#CC785C' : '#1A1A1A'}
              >{it.label}</a>
            );
          })}
        </nav>
        <Button size="sm" href={window.FORM_APPLY} target="_blank">無料相談する</Button>
      </div>
    </header>
  );
}

// ---------------------------------------------------------------------------
// Footer — ink, company info + nav columns.
// ---------------------------------------------------------------------------
function Footer({ onNav }) {
  const cols = [
    { h: 'Service', jp: 'サービス', items: [['課題','pain'], ['なぜ lanitech','why'], ['プラン','plans'], ['活用ユースケース','usecases'], ['セキュリティ','security'], ['FAQ','faq']] },
    { h: 'Contact', jp: 'お問い合わせ', items: [['無料相談・お申し込み', window.FORM_APPLY], ['資料・サービス説明', window.FORM_INFO], ['よくあるご質問','faq']] },
  ];
  return (
    <footer style={{ background: '#1A1A1A', color: '#FFFFFF' }}>
      <div className="lab-footer-inner" style={{ maxWidth: 'var(--max-layout)', margin: '0 auto', padding: '80px 80px 32px' }}>
        <div className="lab-footer-grid" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 56, alignItems: 'flex-start' }}>
          <div>
            <LabLogo variant="paper" size={1.05} />
            <p style={{
              marginTop: 22, fontFamily: 'var(--ff-body)', fontSize: 13, lineHeight: 1.95,
              color: 'rgba(255,255,255,0.6)', maxWidth: 340,
            }}>
              「契約しただけ」のClaudeを、「業務を任せられるClaude」へ。<br/>
              自社プロダクト KAI でClaudeを動かす開発会社が、貴社の導入を月15万円〜で伴走します。
            </p>
          </div>
          {cols.map(col => (
            <div key={col.h} style={{ display:'flex', flexDirection:'column', gap: 13 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10 }}>
                <span style={{
                  fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 13,
                  letterSpacing: '0.16em', textTransform: 'uppercase', color: '#CC785C',
                }}>{col.h}</span>
                <span style={{
                  fontFamily: 'var(--ff-jp)', fontWeight: 500, fontSize: 11,
                  color: 'rgba(255,255,255,0.5)', letterSpacing: '0.06em',
                }}>{col.jp}</span>
              </div>
              {col.items.map(([label, dest]) => {
                const ext = typeof dest === 'string' && dest.startsWith('http');
                return (
                  <a key={label} href={ext ? dest : (dest ? `#${dest}` : '#')}
                    {...(ext ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
                    onClick={(e)=>{ if (!ext && dest) { e.preventDefault(); onNav && onNav(dest); } }}
                    style={{
                      fontFamily: 'var(--ff-body)', fontSize: 13,
                      color: 'rgba(255,255,255,0.85)', textDecoration: 'none',
                    }}>{label}</a>
                );
              })}
            </div>
          ))}
        </div>
        <div style={{ height: 1, background: 'rgba(255,255,255,0.12)', margin: '56px 0 24px' }} />
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontFamily: 'var(--ff-latin)', fontWeight: 500, fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.55)', flexWrap: 'wrap', gap: 16,
        }}>
          <div>© 2026 lanitech合同会社 · Claude導入・価値づくり支援</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ opacity: 0.6 }}>Powered by</span>
            <span style={{
              fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 14,
              letterSpacing: '-0.005em', color: '#FFFFFF', textTransform: 'none',
            }}>KAI</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Button, Tag, SectionHead, Header, Footer });