// lab-sections-1.jsx — Section wrapper + Hero, Pain, Why
// ---------------------------------------------------------------------------
const T = window.LAB_TOKENS;

// Shared section wrapper.
function Section({ id, bg = 'paper', pt = 120, pb = 120, label, children, inner = true, style = {} }) {
  const bgc = bg === 'cream' ? T.CREAM : bg === 'ink' ? T.INK : bg === 'coral' ? T.CORAL : '#FFFFFF';
  return (
    <section id={id} data-screen-label={label || id} className="lab-section"
      style={{ background: bgc, padding: `${pt}px 0 ${pb}px`, position: 'relative', ...style }}>
      {inner ? (
        <div className="lab-inner" style={{ maxWidth: 'var(--max-content)', margin: '0 auto', padding: '0 var(--gutter-pc)', position: 'relative', zIndex: 1 }}>
          {children}
        </div>
      ) : children}
    </section>
  );
}

// ---------------------------------------------------------------------------
// Hero — asymmetric. Text left, offer card right, cream wash clip on right.
// ---------------------------------------------------------------------------
function Hero({ onNav }) {
  return (
    <section id="top" data-screen-label="Hero" style={{ position: 'relative', background: '#FFFFFF', overflow: 'hidden' }}>
      {/* hard-edged cream wash on the right (DS signature) */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, background: T.CREAM,
        clipPath: 'polygon(58% 0, 100% 0, 100% 100%, 42% 100%)', zIndex: 0,
      }} />
      <div className="lab-hero" style={{
        maxWidth: 'var(--max-content)', margin: '0 auto', padding: '88px var(--gutter-pc) 96px',
        position: 'relative', zIndex: 1,
        display: 'grid', gridTemplateColumns: '1.04fr 0.96fr', gap: 56, alignItems: 'center',
      }}>
        {/* LEFT — copy */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 26 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap' }}>
            <Eyebrow color={T.INK_SOFT}>Claude for Business</Eyebrow>
            <Tag tone="coral">法人向け</Tag>
          </div>
          <h1 className="lab-hero-h1" style={{
            margin: 0, fontFamily: 'var(--ff-pair)', fontWeight: 700, fontSize: 54,
            letterSpacing: '-0.02em', lineHeight: 1.22, color: T.INK,
          }}>
            Claudeであなたの<br/>チーム生産効率を、<br/>すぐに<span className="cc-keyword">最大化</span>。
          </h1>
          <p style={{
            margin: 0, fontFamily: 'var(--ff-body)', fontWeight: 500, fontSize: 18,
            lineHeight: 1.8, color: T.INK, maxWidth: 540,
          }}>
            「契約しただけ」のClaudeを、<br/>「業務を任せられるClaude」へ。
          </p>
          <p style={{
            margin: 0, fontFamily: 'var(--ff-body)', fontWeight: 400, fontSize: 16,
            lineHeight: 1.95, color: '#444', maxWidth: 520, textWrap: 'pretty',
          }}>
            月15万円から始める、法人向けのClaude導入支援。自社プロダクトでClaudeを動かしている開発会社が、貴社の導入を伴走します。
          </p>
          <div className="lab-hero-cta" style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 4 }}>
            <Button size="lg" href={window.FORM_APPLY} target="_blank">まずは無料相談（60分）</Button>
            <Button size="lg" variant="secondary" onClick={()=>onNav && onNav('plans')}>プランを見る</Button>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', flexWrap: 'wrap', marginTop: 8,
            fontFamily: 'var(--ff-body)', fontSize: 13.5, color: T.INK_SOFT,
          }}>
            <span>オンライン対応</span>
            <MetaDot />
            <span>最短2週間で全社研修へ</span>
            <MetaDot />
            <span>申し込みフォームから受付</span>
          </div>
        </div>

        {/* RIGHT — illustration */}
        <div className="lab-hero-art" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '8px 0' }}>
          <HeroArt />
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Pain — 3 pain cards + coral insight band.
// ---------------------------------------------------------------------------
function Pain() {
  const pains = [
    { q: '契約はしたが、誰も使わない', b: 'ChatGPTもClaudeもライセンスだけ余って、結局は一部のリテラシー高い社員しか触っていない。' },
    { q: 'PoC 500万円・月額100万円。高すぎる', b: '大手SIerの見積を見て、社内に持ち帰れず止まっている。費用対効果が見えない。' },
    { q: 'どのプランがウチに合うのか分からない', b: 'Pro / Team / Enterprise / API / Bedrock。違いも価格感も整理できていない。' },
  ];
  return (
    <Section id="pain" bg="cream" label="課題">
      <SectionHead no="01" label="The Problem" jpLabel="課題"
        titleEn={null}
        title={<>こんなお悩み、ありませんか？</>}
        lead="ツールは契約した。でも、業務は何も変わっていない。多くの企業がつまずくのは、いつも同じ3つのポイントです。" />
      <div className="lab-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24, marginTop: 56 }}>
        {pains.map((p, i) => (
          <div key={i} style={{
            background: '#FFFFFF', border: `1px solid ${T.HAIRLINE}`, borderRadius: 16, padding: 32,
            display: 'flex', flexDirection: 'column', gap: 16,
          }}>
            <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 30, color: T.HAIRLINE, lineHeight: 1 }}>
              0{i + 1}
            </span>
            <h3 style={{
              margin: 0, fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 19, lineHeight: 1.5, color: T.INK,
            }}>「{p.q}」</h3>
            <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 14.5, lineHeight: 1.85, color: '#555', textWrap: 'pretty' }}>{p.b}</p>
          </div>
        ))}
      </div>

      {/* coral insight band */}
      <div className="lab-band" style={{
        marginTop: 32, background: T.INK, borderRadius: 16, padding: '40px 44px',
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 32, alignItems: 'center',
      }}>
        <div className="lab-band-icon" style={{
          fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 64, color: T.CORAL, lineHeight: 0.9,
        }}>!</div>
        <div>
          <p style={{
            margin: 0, fontFamily: 'var(--ff-pair)', fontWeight: 700, fontSize: 24, lineHeight: 1.55, color: '#FFFFFF',
          }}>
            問題は「Claude」ではなく、<br/>「Claudeを<span style={{ color: T.CORAL }}>業務に翻訳する人</span>」が社内にいないこと。
          </p>
          <p style={{ margin: '14px 0 0', fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.8, color: 'rgba(255,255,255,0.72)' }}>
            lanitech は、その役割を<span style={{ color: '#FFFFFF', fontWeight: 700 }}>月15万円〜</span>で担います。
          </p>
        </div>
      </div>
    </Section>
  );
}

// ---------------------------------------------------------------------------
// Why — 3 reasons, numbered.
// ---------------------------------------------------------------------------
function Why() {
  const reasons = [
    {
      no: '01', en: 'We ship Claude in production',
      title: 'Claude で「本番プロダクト」を作っている会社です',
      body: '自社AIプラットフォーム KAI を開発・運用。Claude Sonnet 4.5 / Haiku 4.5 を中核に、Prompt Caching・Batch API・MCP・Claude Code Skills まで実装で運用中。',
      foot: '「Claudeを使うコンサル」ではなく、「Claudeで本番プロダクトを作る開発会社」が伴走します。',
      tags: ['KAI Platform', 'Sonnet 4.5', 'MCP', 'Claude Code'],
    },
    {
      no: '02', en: 'Transparent, margin-free pricing',
      title: '中間マージンを取らない、透明な価格設計',
      body: 'Anthropic 製品料金は顧客側で直接契約。lanitech は伴走フィーのみ薄く頂きます。再販マージン・人月の水増し・過剰な定例MTGは置きません。',
      foot: '月15万円から「全社員が翌週から使える」状態を実現します。',
      tags: ['直接契約', 'No 再販マージン', '月15万円〜'],
    },
    {
      no: '03', en: 'CTO eye × hands-on engineers',
      title: '外部CTO視点 × 手を動かせるエンジニア',
      body: '外部CTO・技術顧問サービス「IT COMPASS」で培った経営〜情シス〜現場まで一気通貫の判断軸と、ベトナム開発拠点のAIエンジニアによる実装力。',
      foot: '「考える」と「作る」を一社で完結します。',
      tags: ['IT COMPASS', '経営〜現場', '開発拠点'],
    },
  ];
  return (
    <Section id="why" bg="paper" label="なぜlanitech">
      <SectionHead no="02" label="Why lanitech" jpLabel="3つの理由"
        title={<>なぜ lanitech なのか</>}
        lead="生成AIの導入支援は無数にあります。私たちが他と違うのは、自分たちが毎日Claudeで本番プロダクトを動かしている、という一点です。" />
      <div className="lab-reason-wrap" style={{ display: 'flex', flexDirection: 'column', gap: 20, marginTop: 56 }}>
        {reasons.map((r, i) => (
          <div key={i} className="lab-reason" style={{
            display: 'grid', gridTemplateColumns: '120px 1fr', gap: 40,
            background: T.CREAM, border: `1px solid ${T.HAIRLINE}`, borderRadius: 16, padding: '40px 44px',
            alignItems: 'start',
          }}>
            <div className="lab-reason-no" style={{
              fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 72, color: T.CORAL, lineHeight: 0.85,
            }}>{r.no}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
              <div style={{
                fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 12, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: T.CORAL,
              }}>{r.en}</div>
              <h3 style={{ margin: 0, fontFamily: 'var(--ff-pair)', fontWeight: 700, fontSize: 26, lineHeight: 1.45, color: T.INK }}>{r.title}</h3>
              <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 15.5, lineHeight: 1.9, color: '#444', maxWidth: 780, textWrap: 'pretty' }}>{r.body}</p>
              <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.8, color: T.INK, fontWeight: 700 }}>{r.foot}</p>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 4 }}>
                {r.tags.map(tg => <Tag key={tg} tone="mono">{tg}</Tag>)}
              </div>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

Object.assign(window, { Section, Hero, Pain, Why });