// lab-decor.jsx — accents, logo lockup, section markers for the
// lanitech AI LAB · Claude 導入支援 LP. Built on the family DS vocabulary:
// only marks allowed are ▍(CoralBar) ●(MetaDot) ―(HairLine) and 0X numerals.
// ---------------------------------------------------------------------------

const CORAL = '#CC785C';
const CORAL_DEEP = '#A85A40';
const CORAL_SOFT = '#F3DCD0';
const INK = '#1A1A1A';
const INK_SOFT = '#6B6B6B';
const CREAM = '#F4F1EA';
const CREAM_DEEP = '#ECE7DC';
const HAIRLINE = '#E5E2DC';
const GREEN = '#3C8C5C';

// ---------------------------------------------------------------------------
// CoralBar — ▍ vertical accent before eyebrows / labels.
// ---------------------------------------------------------------------------
function CoralBar({ height = 12, width = 3, mr = 10, color = CORAL }) {
  return (
    <span aria-hidden="true" style={{
      display: 'inline-block', width, height, background: color,
      marginRight: mr, verticalAlign: '-0.12em', flexShrink: 0,
    }} />
  );
}

// MetaDot — small filled circle between meta items.
function MetaDot({ color = INK_SOFT, size = 4, mx = 12 }) {
  return (
    <span aria-hidden="true" style={{
      display: 'inline-block', width: size, height: size, borderRadius: '50%',
      background: color, margin: `0 ${mx}px`, verticalAlign: '0.18em', flexShrink: 0,
    }} />
  );
}

// HairLine — thin vertical divider inline.
function HairLine({ height = 12, color = HAIRLINE, mx = 16 }) {
  return (
    <span aria-hidden="true" style={{
      display: 'inline-block', width: 1, height, background: color,
      margin: `0 ${mx}px`, verticalAlign: 'middle', flexShrink: 0,
    }} />
  );
}

// ---------------------------------------------------------------------------
// LabLogo — text lockup. No raster.
//   Line 1: "Claude導入・価値づくり支援"  (Zen Kaku Bold)
//   Line 2: ▍ by lanitech                (Urbanist + DIN ExtraBold)
// variant: 'ink' | 'paper'
// ---------------------------------------------------------------------------
function LabLogo({ variant = 'ink', size = 1 }) {
  const c = variant === 'paper'
    ? { main: '#FFFFFF', by: 'rgba(255,255,255,0.6)', brand: '#FFFFFF' }
    : { main: INK, by: INK_SOFT, brand: INK };
  const fs = 17 * size;
  return (
    <div className="lab-logo" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 9 * size, userSelect: 'none', lineHeight: 1, whiteSpace: 'nowrap' }}>
      <span className="lab-logo-main" style={{
        fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: fs,
        letterSpacing: '0.01em', color: c.main,
      }}>Claude導入・価値づくり支援</span>
      <span className="lab-logo-by" style={{ display: 'inline-flex', alignItems: 'baseline', gap: 6 * size }}>
        <CoralBar height={fs * 0.66} width={3} mr={0} />
        <span style={{
          fontFamily: 'var(--ff-latin)', fontWeight: 600, fontSize: fs * 0.58,
          letterSpacing: '0.14em', textTransform: 'uppercase', color: c.by,
        }}>by</span>
        <span style={{
          fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: fs * 0.82,
          letterSpacing: '-0.01em', color: c.brand,
        }}>lanitech</span>
      </span>
    </div>
  );
}

// ---------------------------------------------------------------------------
// SectionMarker — big coral numeral + hairline + bilingual label.
// ---------------------------------------------------------------------------
function SectionMarker({ no, label, jpLabel = null, onDark = false }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
      <span style={{
        fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 38,
        letterSpacing: '-0.005em', color: CORAL, lineHeight: 1,
      }}>{no}</span>
      <span style={{ height: 1, flex: '0 0 40px', background: CORAL, opacity: 0.6, transform: 'translateY(-6px)' }} />
      <span style={{
        display: 'inline-flex', alignItems: 'baseline', gap: 12,
        fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 13,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: onDark ? '#FFFFFF' : INK,
      }}>
        <span>{label}</span>
        {jpLabel ? (
          <span style={{
            fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 12,
            letterSpacing: '0.1em', color: onDark ? 'rgba(255,255,255,0.6)' : INK_SOFT,
            textTransform: 'none',
          }}>{jpLabel}</span>
        ) : null}
      </span>
    </div>
  );
}

// ---------------------------------------------------------------------------
// Eyebrow — EN UPPER label with coral bar.
// ---------------------------------------------------------------------------
function Eyebrow({ children, color = INK_SOFT, barColor = CORAL }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 10,
      fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 12,
      letterSpacing: '0.18em', textTransform: 'uppercase', color,
    }}>
      <CoralBar height={11} width={3} mr={0} color={barColor} />
      <span>{children}</span>
    </div>
  );
}

Object.assign(window, {
  CoralBar, MetaDot, HairLine, LabLogo, SectionMarker, Eyebrow,
  // Brevo form endpoints — replace with your published form URLs once created
  // at https://app.brevo.com/contact/forms-app/subscription
  FORM_APPLY: 'https://1ccc839d.sibforms.com/serve/MUIFAJT27wIa2f0PycZ_DST13Exj_3dkgxHI9fqJM9vQb73IfVmIbmyfA2QgtxAp1YB3y_ZvujhtAVJ4EDbD7r7fydPKNC5h_FGP5A_FBIG9ECtGAol5PhiBhQwQcBkHRG9Rt1RyNNKL18skZ9wC6bKWsJrZvGGguE0C8qncClqXJw2QyNkB-Y31qFbT1dzaOwujdttaczmu_f3Z',
  FORM_INFO:  'https://1ccc839d.sibforms.com/serve/MUIFAJT27wIa2f0PycZ_DST13Exj_3dkgxHI9fqJM9vQb73IfVmIbmyfA2QgtxAp1YB3y_ZvujhtAVJ4EDbD7r7fydPKNC5h_FGP5A_FBIG9ECtGAol5PhiBhQwQcBkHRG9Rt1RyNNKL18skZ9wC6bKWsJrZvGGguE0C8qncClqXJw2QyNkB-Y31qFbT1dzaOwujdttaczmu_f3Z',
  LAB_TOKENS: { CORAL, CORAL_DEEP, CORAL_SOFT, INK, INK_SOFT, CREAM, CREAM_DEEP, HAIRLINE, GREEN },
});