// lab-sections-3.jsx — Steps, FAQ, Contact (final CTA), Company
// ---------------------------------------------------------------------------
const T3 = window.LAB_TOKENS;

// ---------------------------------------------------------------------------
// Steps — 3-step horizontal flow.
// ---------------------------------------------------------------------------
function Steps() {
  const steps = [
    { n: 'STEP 1', h: '無料ヒアリング', meta: '60分・オンライン', body: '現状の課題と、Claudeで何を変えたいかを伺います。', free: true },
    { n: 'STEP 2', h: '診断パック', meta: '2週間 / ¥98,000', body: '業務を棚卸しし、「効くか効かないか」を結論まで。' },
    { n: 'STEP 3', h: '導入支援', meta: '月15万円〜', body: '契約・研修・運用ルールから、実装伴走まで。' },
  ];
  return (
    <Section id="steps" bg="paper" label="進め方">
      <SectionHead no="06" label="How It Works" jpLabel="進め方"
        title={<>進め方は、3ステップ。</>}
        lead="いきなり大きな契約は必要ありません。まずは話すだけ。最短で、診断から2週間後には全社研修まで進められます。" />
      <div className="lab-steps" style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr auto 1fr', gap: 0, alignItems: 'stretch', marginTop: 56 }}>
        {steps.map((s, i) => (
          <React.Fragment key={i}>
            <div style={{
              background: i === 0 ? T3.INK : T3.CREAM,
              border: `1px solid ${i === 0 ? T3.INK : T3.HAIRLINE}`,
              borderRadius: 16, padding: '36px 32px', display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 14, letterSpacing: '0.06em', color: T3.CORAL }}>{s.n}</span>
                {s.free ? <Tag tone="coral">無料</Tag> : null}
              </div>
              <h3 style={{ margin: 0, fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 24, color: i === 0 ? '#FFFFFF' : T3.INK }}>{s.h}</h3>
              <div style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 15, color: i === 0 ? 'rgba(255,255,255,0.82)' : T3.INK_SOFT, letterSpacing: '0.01em' }}>{s.meta}</div>
              <p style={{ margin: '4px 0 0', fontFamily: 'var(--ff-body)', fontSize: 14, lineHeight: 1.8, color: i === 0 ? 'rgba(255,255,255,0.7)' : '#555', textWrap: 'pretty' }}>{s.body}</p>
            </div>
            {i < steps.length - 1 ? (
              <div className="lab-arrow" style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '0 12px' }}>
                <svg width="28" height="14" viewBox="0 0 28 14" fill="none" aria-hidden="true">
                  <path d="M0 7h24M19 1l6 6-6 6" stroke={T3.CORAL} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            ) : null}
          </React.Fragment>
        ))}
      </div>
      <p style={{ margin: '32px 0 0', fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.8, color: T3.INK_SOFT, textAlign: 'center' }}>
        「とりあえず無料ヒアリングだけ」も大歓迎です。
      </p>
    </Section>
  );
}

// ---------------------------------------------------------------------------
// FAQ — single-open accordion.
// ---------------------------------------------------------------------------
function FAQ() {
  const faqs = [
    { q: 'ChatGPTを既に使っています。乗り換える必要はありますか？', a: '乗り換えではなく、併用 or 部分置き換えから入ります。診断パックで GPT / Claude / Gemini / Copilot の使い分け基準を整理します。長文要約・コード生成・社内文書解析は Claude、画像生成は GPT、Microsoft 365との統合は Copilot、というのが現実解です。' },
    { q: '何名から契約できますか？', a: '診断パックは1名のご担当者から可能です。ライト導入は10名規模から推奨ですが、5名規模でも対応可能です。' },
    { q: '補助金は使えますか？', a: 'IT導入補助金・ものづくり補助金・新事業進出補助金等の活用支援をオプション提供しています。パートナー社と連携して申請書ドラフトまでお手伝いします。' },
    { q: 'オンプレ・閉域網で使いたいのですが', a: 'AWS Bedrock（東京リージョン）+ VPC構成、または Ollama 等のローカルLLMとのハイブリッド構成で対応可能です。' },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" bg="cream" label="FAQ">
      <SectionHead no="07" label="FAQ" jpLabel="よくあるご質問"
        title={<>よくあるご質問</>}
        lead="導入前によくいただく質問を抜粋しました。さらに詳しいFAQ・プラン詳細は、お問い合わせ時にご案内します。" />
      <div style={{ marginTop: 48, maxWidth: 920 }}>
        {faqs.map((f, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{ borderBottom: `1px solid ${T3.HAIRLINE}` }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                padding: '26px 4px', background: 'transparent', border: 'none', cursor: 'pointer', textAlign: 'left',
              }}>
                <span style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 18, color: T3.CORAL, flexShrink: 0 }}>Q</span>
                  <span style={{ fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 18, color: T3.INK, lineHeight: 1.5 }}>{f.q}</span>
                </span>
                <span style={{
                  flexShrink: 0, width: 32, height: 32, borderRadius: 4, border: `1px solid ${T3.HAIRLINE}`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', background: isOpen ? T3.CORAL : '#FFFFFF',
                  transition: 'background 180ms var(--ease-out)',
                }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
                    <path d="M7 1v12M1 7h12" stroke={isOpen ? '#FFFFFF' : T3.INK} strokeWidth="1.6" strokeLinecap="round"
                      style={{ transition: 'transform 180ms', transformOrigin: 'center', transform: isOpen ? 'rotate(45deg)' : 'none' }}/>
                  </svg>
                </span>
              </button>
              <div style={{
                maxHeight: isOpen ? 320 : 0, overflow: 'hidden',
                transition: 'max-height 280ms var(--ease-out), opacity 220ms', opacity: isOpen ? 1 : 0,
              }}>
                <div style={{ display: 'flex', gap: 16, padding: '0 4px 28px 0' }}>
                  <span style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 18, color: T3.INK_SOFT, flexShrink: 0 }}>A</span>
                  <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.95, color: '#444', maxWidth: 760, textWrap: 'pretty' }}>{f.a}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

// ---------------------------------------------------------------------------
// Contact — full-bleed coral final CTA with watermark + 3 entry points.
// ---------------------------------------------------------------------------
function Contact() {
  const entries = [
    { h: '無料ヒアリング', meta: '60分・オンライン', sub: 'まずは話を聞きたい方', price: '¥0' },
    { h: '診断パック', meta: '2週間', sub: '自社適合性を判断したい方', price: '¥98,000' },
    { h: 'ライト導入', meta: '3ヶ月〜', sub: '全社展開を本格的に始めたい方', price: '月15万円〜' },
  ];
  return (
    <section id="contact" data-screen-label="お問い合わせ" style={{ position: 'relative', background: T3.CORAL, overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', right: -40, bottom: -120, fontFamily: 'var(--ff-logo)', fontWeight: 800,
        fontSize: 460, lineHeight: 0.8, color: 'rgba(255,255,255,0.10)', userSelect: 'none', pointerEvents: 'none',
      }}>08</div>
      <div className="lab-contact" style={{ maxWidth: 'var(--max-content)', margin: '0 auto', padding: '110px var(--gutter-pc)', position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 720 }}>
          <Eyebrow color="rgba(255,255,255,0.85)" barColor="#FFFFFF">Get Started</Eyebrow>
          <h2 className="lab-contact-h2" style={{ margin: 0, fontFamily: 'var(--ff-pair)', fontWeight: 700, fontSize: 52, letterSpacing: '-0.02em', lineHeight: 1.18, color: '#FFFFFF' }}>
            まずは、無料60分<br/>ヒアリングから。
          </h2>
          <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 17, lineHeight: 1.85, color: 'rgba(255,255,255,0.9)', maxWidth: 560 }}>
            自社プロダクトでClaudeを動かしている会社が、貴社の導入を伴走します。「契約しただけ」を、「業務を任せられる」へ。下のフォームから、目的に合う入口をお選びください。
          </p>
        </div>

        <div className="lab-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 48 }}>
          {entries.map((e, i) => (
            <a key={i} href={window.FORM_APPLY} target="_blank" rel="noopener noreferrer"
              onMouseEnter={(ev)=>{ ev.currentTarget.style.transform='translateY(-2px)'; }}
              onMouseLeave={(ev)=>{ ev.currentTarget.style.transform='none'; }}
              style={{
                background: '#FFFFFF', borderRadius: 16, padding: 28, display: 'flex', flexDirection: 'column', gap: 12,
                textDecoration: 'none', transition: 'transform 180ms var(--ease-out)',
              }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <h3 style={{ margin: 0, fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 19, color: T3.INK }}>{e.h}</h3>
                <Tag tone="cream">{e.meta}</Tag>
              </div>
              <p style={{ margin: 0, fontFamily: 'var(--ff-body)', fontSize: 13.5, lineHeight: 1.7, color: '#555', flex: 1 }}>{e.sub}</p>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
                <div style={{ fontFamily: 'var(--ff-logo)', fontWeight: 800, fontSize: 26, color: T3.CORAL_DEEP }}>{e.price}</div>
                <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, background: T3.CREAM, borderRadius: 4 }}>
                  <svg width="13" height="9" viewBox="0 0 14 10" fill="none" aria-hidden="true"><path d="M0 5h11M7 1l4 4-4 4" stroke={T3.CORAL} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </span>
              </div>
            </a>
          ))}
        </div>

        <div className="lab-band" style={{
          marginTop: 36, background: 'rgba(26,26,26,0.18)', borderRadius: 16, padding: '32px 40px',
          display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
        }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px 44px' }}>
            <div style={{ maxWidth: 420 }}>
              <div style={{ fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)' }}>How to reach us</div>
              <div style={{ fontFamily: 'var(--ff-body)', fontSize: 14.5, lineHeight: 1.75, color: '#FFFFFF', marginTop: 6 }}>
                お電話・メールアドレスの掲載はしておりません。フォームを送信いただくと、担当より折り返しご連絡先をご案内します。
              </div>
            </div>
            <div>
              <div style={{ fontFamily: 'var(--ff-latin)', fontWeight: 700, fontSize: 10.5, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.75)' }}>Web</div>
              <div style={{ fontFamily: 'var(--ff-body)', fontWeight: 700, fontSize: 16, color: '#FFFFFF', marginTop: 4 }}>lanitech.jp · kai.lanitech.jp</div>
            </div>
          </div>
          <Button size="lg" variant="inverted" href={window.FORM_APPLY} target="_blank">申し込みフォームへ</Button>
        </div>
      </div>
    </section>
  );
}

// ---------------------------------------------------------------------------
// Company — info band.
// ---------------------------------------------------------------------------
function Company() {
  const rows = [
    ['会社名', 'lanitech合同会社（ラニテク）'],
    ['設立', '2021年8月23日'],
    ['本社', '東京本社・名古屋本社の2本社制（千葉 / 愛媛 / ベトナム）'],
    ['代表', '西脇 靖紘（CEO 兼 CTO）'],
    ['事業', '外部CTO・技術顧問 / 生成AIサービス / IT・DX支援 / 法人向けPC販売・レンタル / 教育・地域共創'],
    ['自社プロダクト', 'Lanitech AI Platform KAI'],
  ];
  return (
    <Section id="company" bg="paper" label="会社情報" pt={104} pb={104}>
      <div className="lab-company" style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 64, alignItems: 'start' }}>
        <div>
          <SectionMarker no="09" label="Company" jpLabel="会社情報" />
          <p style={{ margin: '24px 0 0', fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.9, color: '#555', maxWidth: 320 }}>
            「考える」と「作る」を一社で完結する、AI開発会社です。
          </p>
        </div>
        <div>
          {rows.map(([k, v], i) => (
            <div key={i} className="lab-company-row" style={{
              display: 'grid', gridTemplateColumns: '160px 1fr', gap: 24,
              padding: '18px 0', borderTop: i === 0 ? `1px solid ${T3.HAIRLINE}` : 'none',
              borderBottom: `1px solid ${T3.HAIRLINE}`,
            }}>
              <div style={{ fontFamily: 'var(--ff-jp)', fontWeight: 700, fontSize: 14, color: T3.INK_SOFT }}>{k}</div>
              <div style={{ fontFamily: 'var(--ff-body)', fontSize: 15, lineHeight: 1.7, color: T3.INK, textWrap: 'pretty' }}>{v}</div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Steps, FAQ, Contact, Company });
