/* Section components for the LP */

function LogBadge({ children, tone = 'ink' }) {
  const tones = {
    ink:  'bg-ink-900 text-paper-0 ring-ink-900/10',
    line: 'bg-line/15 text-line2 ring-line/30',
    paper:'bg-paper-0 text-ink-900 ring-ink-900/15',
  };
  return (
    <span className={`mono text-[10.5px] uppercase tracking-[0.12em] px-2 py-1 rounded ring-1 ${tones[tone]}`}>
      {children}
    </span>
  );
}

function CtaButton({ label, size = 'lg', hint }) {
  const sz = size === 'lg' ? 'px-7 py-4 text-[17px]' : 'px-5 py-3 text-[15px]';
  return (
    <a href="https://lin.ee/N99jIqf?ref=lp" target="_blank" rel="noopener noreferrer" className={`cta-line group inline-flex items-center justify-center gap-3 rounded-xl text-white font-bold ${sz} w-full sm:w-auto`}>
      <Icon.Line size={22}/>
      <span>{label}</span>
      <Icon.ArrowRight size={18} className="transition-transform group-hover:translate-x-0.5"/>
    </a>
  );
}

/* ========= HERO ========= */
function Hero({ ctaLabel }) {
  return (
    <section className="relative overflow-hidden bg-paper-50">
      {/* top utility bar */}
      <div className="border-b border-ink-900/8 bg-paper-0/60 backdrop-blur">
        <div className="max-w-6xl mx-auto px-5 py-2.5 flex items-center justify-between text-[11px]">
          <div className="flex items-center gap-2 mono text-ink-500">
            <span className="w-1.5 h-1.5 rounded-full bg-line inline-block"></span>
            REC · 実験ログ配信中
          </div>
          <div className="mono text-ink-400 hidden sm:flex items-center gap-3">
            <span>log-index / 037</span>
            <span className="w-px h-3 bg-ink-900/15"></span>
            <span>updated 2026-04-20</span>
          </div>
          <div className="mono text-ink-400 sm:hidden">log-037</div>
        </div>
      </div>

      <div className="max-w-6xl mx-auto px-5 pt-10 sm:pt-16 pb-12 sm:pb-20 grid lg:grid-cols-[1.05fr_1fr] gap-10 lg:gap-14 items-center">
        {/* Left copy */}
        <div>
          <div className="flex flex-wrap items-center gap-2 mb-6">
            <LogBadge tone="ink">LOG · 037</LogBadge>
            <LogBadge tone="paper">ドキュメンタリー配信</LogBadge>
            <span className="mono text-[10.5px] text-ink-500">since 2025 · 個人開発</span>
          </div>

          <h1 className="text-[32px] sm:text-[44px] lg:text-[52px] leading-[1.18] font-black tracking-tight text-ink-900">
            AIと人生を変える<br/>
            <span className="hl">実験ログ。</span><br/>
            <span className="text-ink-600 font-extrabold">ガリィとの裏側、</span><br/>
            <span>全部見せます。</span>
          </h1>

          <p className="mt-6 text-[15.5px] sm:text-[16.5px] leading-[1.95] text-ink-700 max-w-[34em]">
            専門家じゃない普通の人が、AIをどう使いこなしていくのか。<br className="hidden sm:block"/>
            その<span className="hl-ink">泥臭い過程</span>をすべて公開します。
          </p>

          {/* meta strip */}
          <div className="mt-6 mono text-[11px] text-ink-500 flex flex-wrap gap-x-5 gap-y-1.5">
            <span>&gt; format: LINE配信</span>
            <span>&gt; pace: 3〜4日に1回</span>
            <span>&gt; price: 無料</span>
          </div>

          <div className="mt-8 flex flex-col sm:flex-row items-start sm:items-center gap-4">
            <CtaButton label={ctaLabel}/>
            <a href="#about" className="inline-flex items-center gap-2 text-[13.5px] text-ink-600 hover:text-ink-900 underline underline-offset-4 decoration-dotted">
              どんな配信か先に見る
              <Icon.ArrowDown size={14}/>
            </a>
          </div>

          {/* trust row */}
          <div className="mt-7 flex flex-wrap items-center gap-x-5 gap-y-2 text-[12px] text-ink-500">
            <span className="inline-flex items-center gap-1.5"><Icon.Check size={14} className="text-line2"/>登録無料</span>
            <span className="inline-flex items-center gap-1.5"><Icon.Check size={14} className="text-line2"/>セールス一切なし</span>
            <span className="inline-flex items-center gap-1.5"><Icon.Check size={14} className="text-line2"/>いつでもブロックOK</span>
          </div>
        </div>

        {/* Right: Chat mock */}
        <div className="relative mt-4 lg:mt-0">
          <HeroChat/>
        </div>
      </div>

      {/* marquee tape */}
      <div className="border-y border-ink-900/10 bg-ink-900 text-paper-0/80 overflow-hidden">
        <div className="flex tape whitespace-nowrap py-2.5 mono text-[11px] tracking-[0.18em] uppercase">
          {Array.from({length: 2}).map((_, i) => (
            <div key={i} className="flex gap-10 px-5 shrink-0">
              {['log-031 / プロンプト連鎖で詰まった話','log-032 / ChatGPTに家計を任せた一週間','log-033 / 画像生成で副業、3日目で挫折','log-034 / エージェントが勝手にメール送った','log-035 / ガリィと深夜2時のリファクタ','log-036 / 無料枠を限界まで使い倒す','log-037 / deploy crash, 3行で直した'].map((t, j) => (
                <span key={j} className="flex items-center gap-3">
                  <span className="w-1 h-1 rounded-full bg-line inline-block"></span>
                  {t}
                </span>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========= 3 POINTS ========= */
function PointsSection() {
  const points = [
    {
      tag: 'point-01',
      icon: <Icon.Flame size={22}/>,
      title: <>「成功」より、<br className="sm:hidden"/><span className="hl">「失敗と突破口」</span>のリアルな記録。</>,
      body: 'SNSには出てこない、詰まった日・心が折れた日・偶然うまくいった日。行き詰まりと、その抜け出し方を時系列で記録します。',
      sample: '#031 / 5時間ハマったバグの原因が、たった1行のタイポだった話',
    },
    {
      tag: 'point-02',
      icon: <Icon.Terminal size={22}/>,
      title: <>ガリィ（AI）との<br className="sm:hidden"/><span className="hl">実際のやりとり</span>の抜粋。</>,
      body: '実際にどんな指示を出して、どう返ってきて、どう直したか。プロンプトのbefore/afterを、スクショや整形済みログで共有します。',
      sample: '#028 / 「要件を曖昧にしたまま投げる→爆発する」の実例',
    },
    {
      tag: 'point-03',
      icon: <Icon.Eye size={22}/>,
      title: <>表では言えない<br className="sm:hidden"/><span className="hl">グレーな使い方</span>や裏話。</>,
      body: '公開ブログには書けない、でも使い方としては面白い話。有料ツールの回避策や、業務のリアルな置き換えなど、LINEのクローズドな場だからこそ。',
      sample: '#033 / 月5,000円の工数を、無料枠で代替した手順（クローズド）',
      locked: true,
    },
  ];

  return (
    <section id="about" className="relative bg-paper-0">
      <div className="max-w-6xl mx-auto px-5 py-20 sm:py-28">
        <div className="flex items-center gap-3 mb-4">
          <div className="h-px flex-1 bg-ink-900/15 max-w-[80px]"></div>
          <span className="mono text-[11px] uppercase tracking-[0.18em] text-ink-500">Section 01 / このLINEで読めること</span>
        </div>
        <h2 className="text-[28px] sm:text-[36px] font-black tracking-tight leading-tight" style={{ fontSize: '36px' }}>
          <span className="inline-block">綺麗な成功談じゃなく、</span><br/>
          <span className="inline-block"><span className="hl">試行錯誤の生データ</span>を送ります。</span>
        </h2>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {points.map((p, i) => (
            <article key={i}
              className="relative rounded-2xl bg-paper-50 ring-1 ring-ink-900/10 p-6 flex flex-col
                         hover:ring-ink-900/25 transition-all hover:-translate-y-0.5 hover:shadow-[0_14px_30px_-16px_rgba(11,18,32,0.25)]">
              <div className="flex items-center justify-between">
                <span className="mono text-[10.5px] uppercase tracking-[0.14em] text-ink-500">{p.tag}</span>
                <div className="w-9 h-9 rounded-lg bg-ink-900 text-paper-0 grid place-items-center">
                  {p.icon}
                </div>
              </div>
              <h3 className="mt-5 text-[20px] leading-[1.45] font-bold text-ink-900">
                {p.title}
              </h3>
              <p className="mt-3 text-[13.5px] leading-[1.9] text-ink-600">
                {p.body}
              </p>

              <div className="mt-5 pt-4 border-t border-dashed border-ink-900/15">
                <div className="mono text-[10.5px] text-ink-400 mb-1.5 flex items-center gap-1.5">
                  <Icon.Quote size={12}/> sample
                  {p.locked && (
                    <span className="ml-auto text-line2 mono text-[10px]">● closed</span>
                  )}
                </div>
                <div className="text-[12.5px] text-ink-700 leading-relaxed">
                  {p.sample}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========= 3 PROMISES ========= */
function PromisesSection() {
  const promises = [
    {
      icon: <Icon.Shield size={22}/>, no: '01',
      title: '強引なセールスや面談誘導は、一切なし。',
      body: '高額講座やコンサル、個別面談への誘導はしません。配信は配信、それだけ。',
      antix: 'しません',
    },
    {
      icon: <Icon.Clock size={22}/>, no: '02',
      title: '配信は3〜4日に1回の、ゆるいペース。',
      body: '毎日通知でLINEが埋まる、みたいなことはありません。読みたいときに読める温度感を守ります。',
      antix: '過剰配信ナシ',
    },
    {
      icon: <Icon.Door size={22}/>, no: '03',
      title: 'いつでも無言ブロック・削除OK。',
      body: '合わなかったら、何も言わずに離れて大丈夫です。引き止めも、理由の確認もしません。',
      antix: '去る者は追わず',
    },
  ];

  return (
    <section className="relative bg-ink-900 text-paper-0 overflow-hidden">
      <div className="absolute inset-0 dotgrid opacity-60 pointer-events-none"></div>
      <div className="absolute inset-0 scanline pointer-events-none"></div>
      <div className="relative max-w-6xl mx-auto px-5 py-20 sm:py-28">
        <div className="flex items-center gap-3 mb-4 text-paper-0/60">
          <div className="h-px flex-1 bg-paper-0/20 max-w-[80px]"></div>
          <span className="mono text-[11px] uppercase tracking-[0.18em]">Section 02 / 3つの約束</span>
        </div>
        <h2 className="text-[28px] sm:text-[36px] font-black tracking-tight leading-tight max-w-[24ch]">
          怪しくしないための、<br/>
          <span className="text-line">3つの約束。</span>
        </h2>
        <p className="mt-4 text-[14px] text-paper-0/70 max-w-[40em] leading-relaxed">
          「LINE登録＝売り込まれる」の時代を終わらせたい。情報商材っぽさを出さないために、運営側で決めている線を先に開示します。
        </p>

        <div className="mt-12 grid md:grid-cols-3 gap-5">
          {promises.map((p, i) => (
            <div key={i} className="relative rounded-2xl bg-ink-800/70 ring-1 ring-paper-0/10 p-6 backdrop-blur noise">
              <div className="flex items-start justify-between">
                <div className="w-9 h-9 rounded-lg bg-paper-0/8 ring-1 ring-paper-0/15 text-paper-0 grid place-items-center">
                  {p.icon}
                </div>
                <span className="mono text-[26px] font-bold text-paper-0/15 leading-none">{p.no}</span>
              </div>
              <h3 className="mt-5 text-[18px] font-bold leading-[1.5]">
                {p.title}
              </h3>
              <p className="mt-2.5 text-[13px] leading-[1.9] text-paper-0/70">
                {p.body}
              </p>
              <div className="mt-5 pt-4 border-t border-paper-0/10 flex items-center justify-between">
                <span className="mono text-[10.5px] uppercase tracking-[0.14em] text-paper-0/50">promise</span>
                <span className="mono text-[10.5px] text-line">✓ {p.antix}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ========= ABOUT / OPERATOR ========= */
function AboutSection() {
  return (
    <section className="bg-paper-50 border-y border-ink-900/8">
      <div className="max-w-6xl mx-auto px-5 py-20 sm:py-24 grid md:grid-cols-[260px_1fr] gap-10 items-start">
        <div>
          <div className="flex items-center gap-3 mb-4">
            <div className="h-px flex-1 bg-ink-900/15 max-w-[40px]"></div>
            <span className="mono text-[11px] uppercase tracking-[0.18em] text-ink-500">Operator</span>
          </div>
          {/* Operator portrait */}
          <div className="aspect-square rounded-xl ring-1 ring-ink-900/10 bg-paper-0 overflow-hidden relative">
            <img src="assets/operator.png" alt="発信者 ラスボーン 近影"
                 className="absolute inset-0 w-full h-full object-cover"/>
          </div>
          <div className="mt-3 mono text-[11px] text-ink-500 flex items-center gap-2">
            <span className="w-1.5 h-1.5 rounded-full bg-line inline-block"></span>
            運営: ラスボーン / 個人開発者
          </div>
        </div>

        <div>
          <h2 className="text-[24px] sm:text-[30px] font-black tracking-tight leading-tight">
            誰が、<span className="hl">どういう気持ちで</span>やっているか。
          </h2>
          <div className="mt-6 space-y-4 text-[14.5px] leading-[2] text-ink-700 max-w-[44em]">
            <p>
              はじめまして、ラスボーンと申します。私は<span className="hl-ink">AIの専門家でも、凄腕のエンジニアでもありません</span>。普段はビジネスやマーケティングを学びながら、試行錯誤しているごく普通の人間です。
            </p>
            <p>
              「OpenClaw」という魔法のようなAIツールに出会ってから、文字通り<span className="hl-ink">取り憑かれたように触り続けています</span>。でも最初は、エラー連発で相棒AIの「ガリィ」と喧嘩しかけたり、期待した通りに動かなくてサジを投げられたり……そんな泥臭い日々でした。
            </p>
            <p>
              その過程で気づいたのは、<span className="hl-ink">世に出ているAIの情報は「成功後の綺麗な手順書」ばかり</span>だということ。「専門家じゃない普通の人が、どうAIを日常に組み込んでいくのか」という失敗のリアルや途中の迷いこそ、価値があるんじゃないか。そう思って、このLINEを始めました。一緒に「AIを使いこなす面白さ」を共有できたら嬉しいです。
            </p>
          </div>

          {/* mini stats row */}
          <div className="mt-7 grid grid-cols-3 gap-3 max-w-[40em]">
            {[
              { k: 'これまでの実験数', v: '37', u: 'logs' },
              { k: '失敗事例', v: '24', u: 'cases' },
              { k: 'ガリィ（AI）との総対話数', v: '1,284', u: 'sessions' },
            ].map((s, i) => (
              <div key={i} className="rounded-lg bg-paper-0 ring-1 ring-ink-900/10 px-4 py-3">
                <div className="mono text-[10px] uppercase tracking-[0.12em] text-ink-400">{s.k}</div>
                <div className="mt-0.5 flex items-baseline gap-1">
                  <span className="text-[22px] font-black tracking-tight text-ink-900">{s.v}</span>
                  <span className="mono text-[11px] text-ink-500">{s.u}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ========= LOG SAMPLES ========= */
function SamplesSection() {
  const samples = [
    {
      no: 'log-033', tag: '画像生成', date: '2026-03-28', read: '6min',
      title: '副業で画像生成、3日で諦めた話と、その1週間後にまた始めた理由。',
      excerpt: '「稼げる」と言われていたけど、実際に並べてみると、クライアントの要望に合う一枚が出るまで平均43枚。時給換算で380円だった…',
      stamp: 'FAIL',
    },
    {
      no: 'log-035', tag: 'リファクタ', date: '2026-04-04', read: '8min',
      title: 'ガリィと深夜2時のリファクタ。AIに"捨てる勇気"を出してもらった夜。',
      excerpt: '自分の書いたコードに愛着がありすぎて、機能ごと捨てるべきか迷っていた。ガリィの「これは技術的負債です」の一言で踏ん切りがつき…',
      stamp: 'WIN',
    },
    {
      no: 'log-036', tag: 'コスト', date: '2026-04-12', read: '5min',
      title: '月5,000円のツールを、無料枠の組み合わせで代替する現実的な方法。',
      excerpt: 'まず結論：完全には置き換わらない。でも8割はカバーできた。手順を順番にログ化。ちなみにこの話の"グレーな部分"は本編で…',
      stamp: 'CLOSED',
    },
  ];

  return (
    <section className="bg-paper-0">
      <div className="max-w-6xl mx-auto px-5 py-20 sm:py-24">
        <div className="flex items-end justify-between flex-wrap gap-4 mb-10">
          <div>
            <div className="flex items-center gap-3 mb-4">
              <div className="h-px flex-1 bg-ink-900/15 max-w-[80px]"></div>
              <span className="mono text-[11px] uppercase tracking-[0.18em] text-ink-500">Section 03 / 過去ログの抜粋</span>
            </div>
            <h2 className="text-[28px] sm:text-[36px] font-black tracking-tight leading-tight">
              配信の<span className="hl">手触り</span>、<br className="sm:hidden"/>先に見てください。
            </h2>
          </div>
          <div className="mono text-[11px] text-ink-400">showing 3 of 37 logs</div>
        </div>

        <div className="space-y-3">
          {samples.map((s, i) => (
            <article key={i}
              className="group rounded-xl ring-1 ring-ink-900/10 bg-paper-50 hover:bg-paper-0 transition-colors
                         grid md:grid-cols-[140px_1fr_auto] gap-4 md:gap-6 p-5 md:p-6 items-start">
              {/* meta col */}
              <div className="flex md:flex-col gap-3 md:gap-1.5 items-center md:items-start">
                <div className="mono text-[11px] text-ink-500">{s.no}</div>
                <div className="mono text-[10.5px] text-ink-400">{s.date}</div>
                <div className="hidden md:block">
                  <span className={[
                    'mono text-[10px] px-1.5 py-0.5 rounded ring-1',
                    s.stamp === 'WIN' ? 'bg-line/10 text-line2 ring-line/30' :
                    s.stamp === 'FAIL' ? 'bg-ink-900/5 text-ink-600 ring-ink-900/15' :
                    'bg-ink-900 text-paper-0 ring-ink-900/20'
                  ].join(' ')}>
                    ● {s.stamp}
                  </span>
                </div>
              </div>

              {/* body */}
              <div className="min-w-0">
                <div className="flex items-center gap-2 mb-1.5">
                  <span className="mono text-[10.5px] text-ink-500 bg-paper-0 ring-1 ring-ink-900/10 px-1.5 py-0.5 rounded">
                    #{s.tag}
                  </span>
                  <span className="mono text-[10.5px] text-ink-400">{s.read} read</span>
                </div>
                <h3 className="text-[17px] sm:text-[19px] font-bold leading-[1.5] text-ink-900">
                  {s.title}
                </h3>
                <p className="mt-2 text-[13.5px] leading-[1.9] text-ink-600">
                  {s.excerpt}
                </p>
              </div>

              {/* arrow */}
              <div className="hidden md:flex items-center text-ink-400 group-hover:text-ink-900 transition-colors">
                <Icon.ArrowRight size={18}/>
              </div>
            </article>
          ))}
        </div>

        <div className="mt-6 rounded-xl bg-paper-50 ring-1 ring-dashed ring-ink-900/15 px-5 py-4 text-[13px] text-ink-600 flex items-start gap-3">
          <Icon.Warn size={16} className="text-ink-500 shrink-0 mt-0.5"/>
          <div>
            サンプルは本編配信の一部を抜粋したものです。実際の配信では、プロンプト全文・スクリーンショット・詰まった時の思考も含めて記録しています。
          </div>
        </div>
      </div>
    </section>
  );
}

/* ========= CLOSING ========= */
function ClosingSection({ ctaLabel }) {
  return (
    <section id="register" className="relative bg-paper-50 overflow-hidden">
      <div className="absolute inset-0 grid-paper opacity-70 pointer-events-none"></div>
      <div className="relative max-w-4xl mx-auto px-5 py-24 sm:py-32 text-center">
        <div className="mono text-[11px] uppercase tracking-[0.22em] text-ink-500 mb-6">/ end of log · 037</div>

        <h2 className="text-[32px] sm:text-[46px] lg:text-[54px] font-black tracking-tight leading-[1.2] text-ink-900">
          AIを<span className="hl-ink">すごいもの</span>で<br className="sm:hidden"/>終わらせるか、<br/>
          <span className="hl">使える武器</span>に<br className="sm:hidden"/>変えるか。
        </h2>

        <p className="mt-8 text-[15px] sm:text-[16px] text-ink-600 leading-[2] max-w-[34em] mx-auto">
          決めるのは自分。<br/>
          ただ、その途中のログを覗き見しながら進みたいなら、<br className="hidden sm:block"/>
          ここに置いておきます。
        </p>

        <div className="mt-10 inline-flex flex-col items-center gap-3">
          <CtaButton label={ctaLabel}/>
          <div className="mono text-[11px] text-ink-500">
            ※ タップするとLINEアプリが開きます
          </div>
        </div>

        <div className="mt-14 max-w-[28em] mx-auto text-[12px] text-ink-500 leading-relaxed">
          <div className="mono text-[10.5px] uppercase tracking-[0.14em] text-ink-400 mb-2">— あとがき</div>
          読んでも人生は急に変わりません。ただ、<span className="hl-ink">「明日ちょっと試してみるか」</span>のキッカケくらいにはなれたら嬉しいです。
        </div>
      </div>
    </section>
  );
}

function FooterLite() {
  return (
    <footer className="bg-ink-950 text-paper-0/70 mono text-[11px]">
      <div className="max-w-6xl mx-auto px-5 py-8 flex flex-wrap items-center justify-between gap-3">
        <div className="flex items-center gap-2">
          <span className="w-1.5 h-1.5 rounded-full bg-line inline-block"></span>
          実験ログ / with ガリィ
        </div>
        <div className="flex items-center gap-4">
          <a href="https://lin.ee/N99jIqf?ref=lp" target="_blank" rel="noopener noreferrer" className="hover:text-paper-0">プライバシー</a>
          <a href="https://lin.ee/N99jIqf?ref=lp" target="_blank" rel="noopener noreferrer" className="hover:text-paper-0">お問い合わせ</a>
          <span>© 2026 Rathbone</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Hero, PointsSection, PromisesSection, AboutSection, SamplesSection, ClosingSection, FooterLite, CtaButton });