// Sections 04, 05, 06, 07 (appendix)

// ----- 04 SEO THREE LAYERS -----
function Section04() {
  return (
    <section className="bg-mota-cream py-20" data-screen-label="03 SEO Layers">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="03" kicker="三層戰場"
          title={<>SEO 三層戰場：大字、中字、長尾</>}
          lead="中古車收購這個關鍵字戰場可以拆成大字、中字、長尾三層 — 難度與機會差很多。第一個 90 天該打哪個就清楚了。" />

        <div className="space-y-4">
          {SEO_LAYERS.map((l, i) => (
            <div key={i} className={`reveal relative rounded-3xl p-7 ring-1 ${l.primary ? 'bg-mota-yellow text-mota-black ring-mota-yellow' : 'bg-white text-mota-black ring-mota-black/10'}`}
                 style={{ transitionDelay: `${i*0.08}s` }}>
              {l.primary && (
                <div className="absolute -top-3 -right-3">
                  <RStamp size="w-20 h-20" rotate={10} color="bg-mota-red text-white">
                    <div className="text-[9px] font-black">第一個</div>
                    <div className="text-[15px] font-black leading-tight">90 天</div>
                    <div className="text-[8.5px] font-black">主戰場</div>
                  </RStamp>
                </div>
              )}
              <div className="grid grid-cols-[120px_1fr_auto] gap-6 items-start">
                <div>
                  <div className={`text-[10.5px] font-black tracking-[0.2em] ${l.primary ? 'text-mota-black/55' : 'text-mota-black/45'}`}>第 {String(i+1).padStart(2,'0')} 層</div>
                  <div className={`text-[42px] font-black leading-none mt-1 tracking-tight text-mota-black`}>{l.code}</div>
                </div>
                <div>
                  <h3 className={`text-[18px] font-black tracking-tight text-mota-black`}>{l.title}</h3>
                  <div className="mt-3 grid grid-cols-4 gap-3">
                    {[
                      { k: '搜尋量/月', v: l.volume },
                      { k: '難度',     v: l.difficulty },
                      { k: '上榜時程', v: l.timeline },
                      { k: '競爭狀態', v: l.state },
                    ].map((m, j) => (
                      <div key={j} className={`rounded-lg px-3 py-2 ${l.primary ? 'bg-mota-black/10' : 'bg-mota-black/5'}`}>
                        <div className={`text-[9.5px] font-black tracking-[0.18em] ${l.primary ? 'text-mota-black/55' : 'text-mota-black/45'}`}>{m.k}</div>
                        <div className={`text-[14px] font-black tabular-nums leading-tight mt-0.5 text-mota-black`}>{m.v}</div>
                      </div>
                    ))}
                  </div>
                  <p className={`mt-3 text-[12.5px] leading-relaxed ${l.primary ? 'text-mota-black/75' : 'text-mota-black/65'}`}>{l.note}</p>
                </div>
                <div className="w-32">
                  <div className={`text-[9.5px] font-black tracking-[0.18em] mb-1 ${l.primary ? 'text-mota-black/55' : 'text-mota-black/45'}`}>對手密度</div>
                  <div className={`h-3 rounded-full overflow-hidden ${l.primary ? 'bg-mota-black/15' : 'bg-mota-black/10'}`}>
                    <div className={l.color} style={{ width: `${l.bar}%`, height: '100%' }} />
                  </div>
                  <div className={`text-[10px] font-bold mt-1 ${l.primary ? 'text-mota-black/65' : 'text-mota-black/55'}`}>
                    {l.bar >= 80 ? '飽和' : l.bar >= 40 ? '部分競爭' : '幾乎空白'}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* Why long-tail */}
        <div className="reveal mt-10 bg-white rounded-3xl p-7 ring-1 ring-mota-black/10">
          <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-red mb-4">為什麼長尾要第一個打</div>
          <div className="grid grid-cols-5 gap-4">
            {[
              { k: '難度低',   v: '前 5 名通常是空白或舊文章' },
              { k: '速度快',   v: '1–3 個月就能大量上榜' },
              { k: '意圖精準', v: '已經是要賣車的最後一哩' },
              { k: '可量產',   v: '200+ 頁一次生成' },
              { k: '對手沒做', v: '10 家對手沒一家系統做' },
            ].map((x, i) => (
              <div key={i} className="rounded-xl bg-mota-yellow/15 ring-1 ring-mota-yellow/40 px-4 py-3">
                <div className="text-[14px] font-black text-mota-black tracking-tight">{x.k}</div>
                <div className="text-[11.5px] font-bold text-mota-black/70 leading-snug mt-1">{x.v}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="mt-4 text-[11px] text-mota-black/45 font-medium">
          <span className="font-black tracking-wider mr-2 text-mota-black/65">資料來源</span>
          2026/04/30 德玉國際對全國對手 SEO 結構分析、Google Keyword Planner 估算
        </div>
      </div>
    </section>
  );
}

// ----- 05 KEYWORD TEMPLATES -----
function Section05() {
  return (
    <section className="bg-white py-20" data-screen-label="04 Keywords">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="04" kicker="第一波 200 個關鍵字"
          title={<>長尾關鍵字 <RH>模板與內容結構</RH></>}
          lead="第一波要做的 200 個長尾關鍵字怎麼挑 — 五個模板，每個模板對應一組可程式化生成的頁面。" />

        {/* Templates table */}
        <div className="reveal bg-mota-cream rounded-3xl ring-1 ring-mota-black/5 overflow-hidden mb-10">
          <div className="grid grid-cols-[1.2fr_1fr_1.5fr_120px] gap-4 px-6 py-4 bg-mota-yellow">
            <div className="text-[11px] font-black tracking-[0.18em] text-mota-black">關鍵字模板</div>
            <div className="text-[11px] font-black tracking-[0.18em] text-mota-black">資料來源</div>
            <div className="text-[11px] font-black tracking-[0.18em] text-mota-black">範例</div>
            <div className="text-[11px] font-black tracking-[0.18em] text-mota-black text-right">月搜尋量</div>
          </div>
          {KEYWORD_TEMPLATES.map((k, i) => (
            <div key={i} className={`grid grid-cols-[1.2fr_1fr_1.5fr_120px] gap-4 px-6 py-4 items-center ${i % 2 === 0 ? 'bg-white' : 'bg-mota-cream/60'} border-t border-mota-black/5`}>
              <div className="font-black text-mota-red text-[14px] font-mono">{k.tpl}</div>
              <div className="text-[12.5px] text-mota-black/70 font-bold leading-snug">{k.src}</div>
              <div className="text-[12.5px] text-mota-black/80 leading-snug">{k.eg}</div>
              <div className="text-right">
                <span className="text-[16px] font-black tabular-nums text-mota-black">{k.vol}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Page anatomy */}
        <div className="reveal bg-mota-cream rounded-3xl p-8 ring-1 ring-mota-black/5">
          <div className="flex items-baseline justify-between mb-6">
            <div>
              <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-black/55">PAGE ANATOMY</div>
              <h3 className="text-[20px] font-black text-mota-black mt-1">每一頁長什麼樣 — 以「台北 Toyota Altis 收購」為例</h3>
            </div>
          </div>

          <div className="grid grid-cols-[1.1fr_1fr] gap-6">
            {/* Left: structured list */}
            <div className="space-y-3">
              {[
                { k: '標題',     v: '台北 Toyota Altis 收購｜2026 年最新行情區間 X 萬–Y 萬' },
                { k: '第一段（300 字）', v: '說明 Altis 在台北市場的行情、影響估價的因素（年份、里程、配備）' },
                { k: '行情表',   v: '列出 2015–2024 各年份價格區間（既有交易紀錄 + 2 手車網）' },
                { k: '估價表單', v: '三步驟 — 選車型 → 填年份/里程 → 留電話/LINE' },
                { k: 'FAQ',     v: 'Altis 收購要看什麼／2018 年 Altis 大概多少／台北到府收購怎麼跑' },
                { k: '內鏈',    v: '導向「全部 Toyota 收購」「台北所有車型」「賣車流程教學」' },
              ].map((p, i) => (
                <div key={i} className="flex items-start gap-3 bg-white rounded-xl p-3.5 ring-1 ring-mota-black/5">
                  <div className="w-7 h-7 rounded-md bg-mota-red text-white grid place-items-center font-black text-[11px] shrink-0">{i+1}</div>
                  <div>
                    <div className="text-[12px] font-black text-mota-red tracking-wider">{p.k}</div>
                    <div className="text-[12.5px] text-mota-black/80 leading-snug mt-0.5">{p.v}</div>
                  </div>
                </div>
              ))}
            </div>

            {/* Right: mini page mockup */}
            <div className="bg-white rounded-2xl ring-1 ring-mota-black/10 p-5 self-start">
              <div className="text-[10.5px] text-mota-black/45 font-bold tracking-wider mb-2">icarpro.tw / taipei / toyota-altis</div>
              <h4 className="text-[16px] font-black text-mota-black tracking-tight leading-tight">台北 Toyota Altis 收購<br/>2026 年最新行情 35–62 萬</h4>
              <div className="mt-3 grid grid-cols-5 gap-1">
                {[2020,2021,2022,2023,2024].map((y) => (
                  <div key={y} className="bg-mota-cream rounded-md py-2 text-center">
                    <div className="text-[9px] text-mota-black/55 font-bold">{y}</div>
                    <div className="text-[11px] font-black text-mota-black tabular-nums">{38+(y-2020)*5}–{50+(y-2020)*5}</div>
                  </div>
                ))}
              </div>
              <div className="mt-3 bg-mota-yellow/15 ring-2 ring-mota-yellow/40 rounded-xl p-3">
                <div className="text-[10px] font-black tracking-wider text-mota-red">免費 · 即時試算</div>
                <div className="text-[12px] font-black text-mota-black mt-1">輸入年份/里程 → 拿到區間</div>
              </div>
              <div className="mt-3 space-y-1.5">
                {['Altis 收購要看什麼？','2018 年 Altis 大概多少？','台北到府收購怎麼跑？'].map((q, i) => (
                  <div key={i} className="text-[11px] text-mota-black/65 font-bold flex items-center gap-1.5">
                    <span className="w-4 h-4 rounded-full bg-mota-red/10 text-mota-red grid place-items-center text-[9px] font-black">Q</span>{q}
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="mt-6 bg-white ring-1 ring-mota-black/10 rounded-2xl p-5">
            <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-red mb-1">實作備註</div>
            <p className="text-[12.5px] text-mota-black/75 leading-relaxed">
              長尾頁的關鍵在 <span className="text-mota-red font-black">程式化生成 (programmatic SEO)</span> — 用 CMS 後台 + 模板，「品牌 / 縣市 / 車型」一筆資料對應一個頁面，可以一次產出 200+ 頁。技術上 Next.js 或 Astro 等靜態框架都能做，重點是內容結構（H1 / 行情表 / FAQ）要與賣方搜尋意圖對齊。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- 06 90-DAY TIMELINE -----
function Section06() {
  // Build SVG path for growth curve
  const W = 800, H = 220;
  const pad = { l: 40, r: 20, t: 16, b: 28 };
  const xMax = 12, yMax = 100;
  const xs = (m) => pad.l + (m / xMax) * (W - pad.l - pad.r);
  const ys = (v) => H - pad.b - (v / yMax) * (H - pad.t - pad.b);
  const pts = GROWTH_CURVE.map((p) => `${xs(p.m)},${ys(p.v)}`).join(' ');
  const area = `M ${xs(0)},${H - pad.b} L ${pts.split(' ').join(' L ')} L ${xs(xMax)},${H - pad.b} Z`;

  return (
    <section className="bg-mota-cream py-20" data-screen-label="05 Timeline">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="05" kicker="90 天行動參考"
          title={<>把整套漏斗 <RH>建起來、跑起來</RH></>}
          lead="這是一套完整收車漏斗系統的典型 90 天時程參考。實際工時會依範圍與供應商而異。" />

        {/* Phase cards with stacked bar */}
        <div className="reveal bg-white rounded-3xl p-8 ring-1 ring-mota-black/5 mb-8">
          <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-black/55 mb-2">圖表 · 三階段工作分布</div>
          <div className="flex h-3 rounded-full overflow-hidden ring-1 ring-mota-black/5 mb-4">
            <div className="bg-mota-red"          style={{ width: '33.3%' }} />
            <div className="bg-mota-yellow"        style={{ width: '33.3%' }} />
            <div className="bg-mota-black"          style={{ width: '33.4%' }} />
          </div>
          <div className="grid grid-cols-3 gap-5">
            {TIMELINE_PHASES.map((p, i) => (
              <div key={i} className="relative bg-mota-cream rounded-2xl p-5 ring-1 ring-mota-black/5">
                <div className={`text-[10.5px] font-black tracking-[0.18em] ${i===0?'text-mota-red':i===1?'text-mota-yellow':'text-mota-black'}`}>{p.code} · {p.days}</div>
                <h3 className="text-[22px] font-black text-mota-black tracking-tight mt-1">{p.title}</h3>
                <ul className="mt-3 space-y-1.5">
                  {p.items.map((t, j) => (
                    <li key={j} className="text-[12px] text-mota-black/75 leading-snug flex items-start gap-2">
                      <RI.Check c="w-3 h-3 mt-1 shrink-0 text-mota-red" /> {t}
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

        {/* Growth curve */}
        <div className="reveal bg-white rounded-3xl p-8 ring-1 ring-mota-black/5">
          <div className="flex items-baseline justify-between mb-4">
            <div>
              <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-black/55">圖表 · 行業常見成長軌跡參考</div>
              <h3 className="text-[20px] font-black text-mota-black mt-1">漏斗上線後 12 個月觸及曲線（示意）</h3>
            </div>
            <div className="text-[11px] text-mota-black/55 font-bold">縱軸：相對觸及量 (0–100)</div>
          </div>

          <div className="relative" style={{ width: '100%', paddingBottom: `${(H/W)*100}%` }}>
            <svg viewBox={`0 0 ${W} ${H}`} className="absolute inset-0 w-full h-full">
              <defs>
                <linearGradient id="growthGrad" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#1E88E5" stopOpacity="0.30"/>
                  <stop offset="100%" stopColor="#1E88E5" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {/* y gridlines */}
              {[0,25,50,75,100].map((g) => (
                <g key={g}>
                  <line x1={pad.l} x2={W-pad.r} y1={ys(g)} y2={ys(g)} stroke="#0a0a0a" strokeOpacity="0.08" strokeDasharray="3 4"/>
                  <text x={pad.l - 6} y={ys(g) + 4} textAnchor="end" fontSize="10" fill="#0a0a0a" fillOpacity="0.5" fontWeight="700">{g}</text>
                </g>
              ))}
              {/* phase bands */}
              <rect x={xs(0)} y={pad.t} width={xs(3)-xs(0)} height={H-pad.t-pad.b} fill="#1E88E5" fillOpacity="0.08"/>
              <rect x={xs(3)} y={pad.t} width={xs(6)-xs(3)} height={H-pad.t-pad.b} fill="#1E88E5" fillOpacity="0.04"/>
              <text x={(xs(0)+xs(3))/2} y={pad.t+12} textAnchor="middle" fontSize="9.5" fontWeight="800" fill="#1E88E5" fillOpacity="0.85">90 天建置期</text>
              {/* area + line */}
              <path d={area} fill="url(#growthGrad)" />
              <polyline points={pts} fill="none" stroke="#1E88E5" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
              {/* dots at month 3,6,12 */}
              {[3,6,12].map((m) => {
                const v = GROWTH_CURVE.find((p) => p.m === m).v;
                return (
                  <g key={m}>
                    <circle cx={xs(m)} cy={ys(v)} r="5" fill="#fff" stroke="#1E88E5" strokeWidth="2.5"/>
                    <text x={xs(m)} y={ys(v)-12} textAnchor="middle" fontSize="10.5" fontWeight="800" fill="#0a0a0a">{v}</text>
                  </g>
                );
              })}
              {/* x labels */}
              {[0,3,6,9,12].map((m) => (
                <text key={m} x={xs(m)} y={H-8} textAnchor="middle" fontSize="10" fill="#0a0a0a" fillOpacity="0.6" fontWeight="700">M{m}</text>
              ))}
            </svg>
          </div>

          <div className="mt-4 text-[11px] text-mota-black/55 font-medium">
            <span className="font-black tracking-wider mr-2 text-mota-black/75">備註</span>
            行業典型新創漏斗上線軌跡；實際數字依市場、預算、執行而異
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- 07 APPENDIX -----
function Section07() {
  return (
    <section className="bg-white py-20" data-screen-label="06 Appendix">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="06" kicker="附錄"
          title={<>資料來源 <RH>與分析方法</RH></>} />

        <div className="grid grid-cols-2 gap-5">
          {/* First-party */}
          <div className="reveal bg-mota-cream rounded-3xl p-7 ring-1 ring-mota-black/5 relative">
            <div className="absolute -top-3 -left-2">
              <RStamp size="w-14 h-14" rotate={-10} color="bg-mota-red text-white">
                <div className="text-[8px] font-black">一手</div>
                <div className="text-[12px] font-black leading-tight">資料</div>
              </RStamp>
            </div>
            <h3 className="text-[18px] font-black text-mota-black tracking-tight mt-6">德玉國際自己做的分析（一手）</h3>
            <ul className="mt-4 space-y-2.5">
              {[
                '對 10 家全台中古車收購對手做完整網站分析、定位文案、SEO 結構（2026/04/26–30）',
                '50+ 組 Google 搜尋結果頁排名分析（「中古車收購」「[品牌] 收購」「[縣市] 中古車收購」）',
                '與 iCarPro 訪談（2026/04/27 電話），釐清現況業務模式',
                '自建 5–80 萬區間月可觸及賣方數推算模型',
              ].map((x, i) => (
                <li key={i} className="text-[12.5px] text-mota-black/80 leading-snug flex items-start gap-2">
                  <RI.Check c="w-3.5 h-3.5 mt-0.5 shrink-0 text-mota-red" /> {x}
                </li>
              ))}
            </ul>
          </div>

          {/* Public sources */}
          <div className="reveal bg-mota-cream rounded-3xl p-7 ring-1 ring-mota-black/5 relative">
            <div className="absolute -top-3 -left-2">
              <RStamp size="w-14 h-14" rotate={-10} color="bg-mota-yellow text-mota-black">
                <div className="text-[8px] font-black">二手</div>
                <div className="text-[12px] font-black leading-tight">資料</div>
              </RStamp>
            </div>
            <h3 className="text-[18px] font-black text-mota-black tracking-tight mt-6">公開資料來源（二手）</h3>
            <ul className="mt-4 space-y-2.5">
              {[
                '交通部監理所 2024 年中古車過戶統計：92 萬輛/年',
                'carboy.tw 中古車過戶月報（價位帶分布估算）',
                'Google Keyword Planner 月搜尋量區間數據',
                '估車大獅、小曾車庫、丁先生、汎達國際、AutoStar、8891 等對手公開網站與 Google 商家評論',
              ].map((x, i) => (
                <li key={i} className="text-[12.5px] text-mota-black/80 leading-snug flex items-start gap-2">
                  <RI.Doc c="w-3.5 h-3.5 mt-0.5 shrink-0 text-mota-black/55" /> {x}
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

// ----- BOTTOM BAR -----
function ReportFooter() {
  return (
    <footer className="bg-mota-cream border-t border-mota-black/10 py-10">
      <div className="max-w-[1100px] mx-auto px-12 flex items-center justify-between text-[11px] text-mota-black/55 font-bold">
        <span>© 2026 德玉國際 · 本報告所有原創數據可供 iCarPro 內部決策使用</span>
        <span className="tracking-[0.18em]">機密 · 提供 iCarPro 使用</span>
      </div>
    </footer>
  );
}

Object.assign(window, { Section04, Section05, Section06, Section07, ReportFooter });