// Report sections for 德玉國際 → iCarPro 市場報告

// ----- COVER -----
function CoverSection() {
  return (
    <section className="relative bg-white overflow-hidden">
      <div className="absolute -top-40 left-1/3 w-[700px] h-[700px] rounded-full bg-mota-yellow/15 blur-3xl pointer-events-none" />
      <div className="absolute inset-0 opacity-[0.04] pointer-events-none"
           style={{ backgroundImage: 'linear-gradient(#1E88E5 1px,transparent 1px),linear-gradient(90deg,#1E88E5 1px,transparent 1px)', backgroundSize: '40px 40px' }} />
      <div className="relative max-w-[1100px] mx-auto px-12 pt-16 pb-20">
        {/* Top bar — VJI big, iCarPro small */}
        <div className="flex items-center justify-between pb-10 mb-12 border-b border-mota-black/10">
          <img src="vji-logo.png" alt="德玉國際 VirtueJade International" className="h-24" />
          <img src="icarpro-logo.png" alt="iCarPro" className="h-10" />
        </div>

        {/* Stamp + kicker */}
        <div className="flex items-center gap-3 mb-6 reveal">
          <RStamp size="w-16 h-16" rotate={-10} color="bg-mota-yellow text-mota-black">
            <div className="text-[8.5px] font-black tracking-wider">市場報告</div>
            <div className="text-[15px] font-black leading-tight">2026<br/>04</div>
          </RStamp>
          <span className="px-3 py-1 rounded-full text-[10.5px] font-black tracking-[0.18em] bg-mota-red/10 text-mota-red">
            市場 × 對手 × SEO × 90 天時程
          </span>
        </div>

        {/* Hero title */}
        <h1 className="reveal font-black tracking-tight leading-[1.02] text-[78px] text-mota-black">
          中古車收購行業<br/>
          <span className="text-mota-red">數位獲客</span>參考數據
        </h1>
        <p className="reveal mt-6 text-[16px] text-mota-black/75 leading-relaxed max-w-xl">
          這份報告把 iCarPro 的真實市場拆給你看 — 全台每月 5.4 萬個賣方、5–8个對手的位置與空白、SEO 三層戰場該先打哪、以及把整套漏斗系統建起來的 90 天典型時程。
        </p>

        {/* Quick stat strip */}
        <div className="reveal mt-12 grid grid-cols-4 gap-4 max-w-[820px]">
          {[
            { v: '86.4萬', s: '/年',  l: '2025 全台中古車過戶' },
            { v: '5.4萬', s: '/月', l: '5–80 萬賣方可觸及' },
            { v: '10家', s: '',     l: '對手完整分析' },
            { v: '90天', s: '',     l: '建置時程參考' },
          ].map((x, i) => (
            <div key={i} className="rounded-xl bg-mota-cream ring-1 ring-mota-black/5 px-4 py-4">
              <div className="flex items-baseline gap-1 text-mota-red">
                <span className="text-[34px] font-black leading-none tabular-nums">{x.v}</span>
                <span className="text-[13px] font-black">{x.s}</span>
              </div>
              <div className="mt-2 text-[12px] font-bold text-mota-black/75 leading-tight">{x.l}</div>
            </div>
          ))}
        </div>

        {/* Meta footer */}
        <div className="mt-14 pt-6 border-t border-mota-black/10 flex items-center justify-between text-[11.5px] text-mota-black/55 font-bold">
          <span>2026 / 04 / 30 · 內部決策參考</span>
          <span className="tracking-[0.18em] uppercase">By VirtueJade International</span>
        </div>
      </div>
    </section>
  );
}

// ----- 01 MARKET SIZE -----
function Section01() {
  // Build the bar chart — funnel value of buckets
  const max = 100;
  return (
    <section className="bg-mota-cream py-20" data-screen-label="01 Market">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="01" kicker="市場規模"
          title={<>全台每月 <RH>5.4 萬個</RH>想賣車的人</>}
          lead="從交通部公路局的過戶資料推算，5–80 萬區間就是 iCarPro 的真實市場 — 整個中古車市場的 75%。" />

        {/* Top stat row */}
        <div className="grid grid-cols-3 gap-4 mb-10">
          <div className="reveal lift bg-white rounded-2xl p-6 ring-1 ring-mota-black/5">
            <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-red">2025 全台總量</div>
            <div className="mt-1 flex items-baseline gap-1 text-mota-black">
              <span className="text-[44px] font-black tabular-nums leading-none">86.4</span>
              <span className="text-[14px] font-black ml-0.5">萬輛/年</span>
            </div>
            <div className="mt-2 text-[12px] text-mota-black/60 font-bold">全台中古車過戶</div>
          </div>
          <div className="reveal lift bg-white rounded-2xl p-6 ring-1 ring-mota-black/5">
            <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-red">平均每月</div>
            <div className="mt-1 flex items-baseline gap-1 text-mota-black">
              <span className="text-[44px] font-black tabular-nums leading-none">7.20</span>
              <span className="text-[14px] font-black ml-0.5">萬輛/月</span>
            </div>
            <div className="mt-2 text-[12px] text-mota-black/60 font-bold">全價位平均</div>
          </div>
          <div className="reveal lift bg-mota-red text-white rounded-2xl p-6 relative">
            <div className="absolute -top-4 -right-4">
              <RStamp size="w-20 h-20" rotate={10} color="bg-mota-yellow text-mota-black">
                <div className="text-[9px] font-black">iCarPro</div>
                <div className="text-[18px] font-black leading-tight">75%</div>
                <div className="text-[8.5px] font-black">市佔</div>
              </RStamp>
            </div>
            <div className="text-[10.5px] font-black tracking-[0.18em] text-white/85">iCarPro 可觸及賣方數</div>
            <div className="mt-1 flex items-baseline gap-1">
              <span className="text-[44px] font-black tabular-nums leading-none text-white">5.40</span>
              <span className="text-[14px] font-black ml-0.5 text-white/85">萬個賣方/月</span>
            </div>
            <div className="mt-2 text-[12px] text-white/85 font-bold">5–80 萬區間，iCarPro 的真實市場</div>
          </div>
        </div>

        {/* Bucket bar chart */}
        <div className="reveal bg-white 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">圖表 · 價位帶分布</div>
              <h3 className="text-[20px] font-black text-mota-black mt-1">每月 7.20 萬輛中古車過戶 · 按價位拆解</h3>
            </div>
            <div className="flex items-center gap-3 text-[11px] font-bold text-mota-black/65">
              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-mota-red" />iCarPro 區間</span>
              <span className="flex items-center gap-1.5"><span className="w-3 h-3 rounded bg-mota-black/15" />其他</span>
            </div>
          </div>

          <div className="space-y-4">
            {PRICE_BUCKETS.map((b, i) => (
              <div key={i} className="grid grid-cols-[180px_1fr_120px] items-center gap-4">
                <div>
                  <div className="text-[15px] font-black text-mota-black tracking-tight">{b.label}</div>
                  <div className="text-[11px] text-mota-black/55 font-bold">{b.sub}</div>
                </div>
                <div className="relative h-10 bg-mota-cream rounded-lg overflow-hidden">
                  <div className={`absolute inset-y-0 left-0 ${b.color} flex items-center px-3`}
                       style={{ width: `${(b.pct / 50) * 100}%` }}>
                    <span className={`text-[12.5px] font-black ${b.in ? 'text-white' : 'text-mota-black/55'}`}>
                      {(7.20 * b.pct / 100).toFixed(2)} 萬輛
                    </span>
                  </div>
                </div>
                <div className="text-right">
                  <div className="text-[24px] font-black tabular-nums text-mota-black leading-none">{b.pct}%</div>
                  {b.in && <div className="mt-1 text-[10px] font-black tracking-wider text-mota-red">✓ iCarPro</div>}
                </div>
              </div>
            ))}
          </div>

          {/* Sum row */}
          <div className="mt-6 pt-6 border-t-2 border-dashed border-mota-black/15 flex items-center justify-between bg-mota-yellow/10 -mx-8 px-8 py-4 rounded-b-3xl">
            <div>
              <div className="text-[10.5px] font-black tracking-[0.18em] text-mota-black/55">iCarPro 區間合計</div>
              <div className="text-[18px] font-black text-mota-black">10–80 萬 · 75% 的市場</div>
            </div>
            <div className="flex items-baseline gap-1 text-mota-red">
              <span className="text-[42px] font-black tabular-nums leading-none">5.40</span>
              <span className="text-[16px] font-black ml-0.5">萬/月</span>
            </div>
          </div>

          <RSource>交通部公路局 2025 年中古車過戶統計（86.4 萬輛）、產業分析資料、價位比例為車商業界估算 · 德玉國際整理</RSource>
        </div>
      </div>
    </section>
  );
}

// ----- 02 COMPETITORS TABLE -----
function Section02() {
  return (
    <section className="bg-white py-20" data-screen-label="02 Competitors">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="02" kicker="對手掃描"
          title={<>10 家全台收購業者，<RH>誰打什麼牌</RH></>}
          lead={<>德玉國際對 Google「中古車收購」「二手車收購」前兩頁、有實際網站的 10 家業者全部看過一輪 — 網站、定位文案、SEO 結構、Google 評論都查了。</>} />

        <div className="reveal bg-mota-cream rounded-3xl ring-1 ring-mota-black/5 overflow-hidden">
          {/* header */}
          <div className="grid grid-cols-[180px_1fr_1.2fr_1fr] 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">弱點</div>
          </div>
          {COMPETITORS.slice(0, 7).map((c, i) => (
            <div key={i} className={`grid grid-cols-[180px_1fr_1.2fr_1fr] gap-4 px-6 py-4 items-start ${i % 2 === 0 ? 'bg-white' : 'bg-mota-cream/60'} border-t border-mota-black/5`}>
              <div className="font-black text-mota-black text-[15px] tracking-tight">{c.name}</div>
              <div className="text-[12.5px] text-mota-black/80 font-bold leading-snug">{c.pos}</div>
              <div className="text-[12.5px] text-mota-black/70 leading-snug flex gap-2">
                <RI.Check c="w-3.5 h-3.5 mt-0.5 shrink-0 text-emerald-600" /> {c.str}
              </div>
              <div className="text-[12.5px] text-mota-black/55 leading-snug flex gap-2">
                <RI.Cross c="w-3.5 h-3.5 mt-0.5 shrink-0 text-mota-red" /> {c.weak}
              </div>
            </div>
          ))}
          {/* grouped row for the 3 in-market */}
          <div className="grid grid-cols-[180px_1fr_1.2fr_1fr] gap-4 px-6 py-4 items-start bg-white border-t border-mota-black/5">
            <div className="font-black text-mota-black text-[14px] tracking-tight">億昇 / 立益 / 弘倉</div>
            <div className="text-[12.5px] text-mota-black/80 font-bold leading-snug">在地車商擴張</div>
            <div className="text-[12.5px] text-mota-black/70 leading-snug flex gap-2">
              <RI.Check c="w-3.5 h-3.5 mt-0.5 shrink-0 text-emerald-600" /> 有實體基地
            </div>
            <div className="text-[12.5px] text-mota-black/55 leading-snug flex gap-2">
              <RI.Cross c="w-3.5 h-3.5 mt-0.5 shrink-0 text-mota-red" /> SEO 與 funnel 都未系統化
            </div>
          </div>
        </div>

        <RSource>2026/04/26–30 德玉國際對 10 家對手網站、Google 評論、SEO 結構分析</RSource>
      </div>
    </section>
  );
}

// ----- 03 REMOVED -----
function Section03_REMOVED() {
  const W = 800, H = 520;
  return (
    <section className="bg-mota-cream py-20" data-screen-label="03 Positioning">
      <div className="max-w-[1100px] mx-auto px-12">
        <RSectionTitle n="03" kicker="POSITIONING · 定位地圖"
          title={<>10 家對手的市場空白</>}
          lead="橫軸：價格訴求強度／縱軸：品牌信任度。對手集中在三個區塊，中間偏左的「中價 + 中信任」幾乎沒人。" />

        {/* Map */}
        <div className="reveal bg-white 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">CHART · 對手定位地圖</div>
              <h3 className="text-[20px] font-black text-mota-black mt-1">10 家對手在價格 × 信任的座標</h3>
            </div>
            <div className="flex items-center gap-3 text-[11px] font-bold text-mota-black/65">
              <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-mota-black/70" />對手</span>
              <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full bg-mota-yellow ring-2 ring-mota-red" />iCarPro 機會點</span>
            </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">
              {/* grid */}
              <defs>
                <pattern id="posgrid" width="40" height="40" patternUnits="userSpaceOnUse">
                  <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#0a0a0a" strokeOpacity="0.05" strokeWidth="1"/>
                </pattern>
              </defs>
              <rect width={W} height={H} fill="url(#posgrid)" />

              {/* quadrant labels */}
              <text x="20"   y="30"        fill="#0a0a0a" fillOpacity="0.35" fontSize="11" fontWeight="800">低價 · 高信任</text>
              <text x={W-20} y="30"        fill="#0a0a0a" fillOpacity="0.35" fontSize="11" fontWeight="800" textAnchor="end">高價 · 高信任</text>
              <text x="20"   y={H-14}      fill="#0a0a0a" fillOpacity="0.35" fontSize="11" fontWeight="800">低價 · 低信任</text>
              <text x={W-20} y={H-14}      fill="#0a0a0a" fillOpacity="0.35" fontSize="11" fontWeight="800" textAnchor="end">高價 · 低信任</text>

              {/* axes */}
              <line x1={W/2} y1="0" x2={W/2} y2={H} stroke="#0a0a0a" strokeOpacity="0.15" strokeWidth="1.5" strokeDasharray="6 6"/>
              <line x1="0" y1={H/2} x2={W} y2={H/2} stroke="#0a0a0a" strokeOpacity="0.15" strokeWidth="1.5" strokeDasharray="6 6"/>

              {/* axis arrows */}
              <text x={W-12} y={H/2 - 8}  fill="#0a0a0a" fillOpacity="0.55" fontSize="11" fontWeight="800" textAnchor="end">價格訴求強 →</text>
              <text x={W/2 + 8} y="14"    fill="#0a0a0a" fillOpacity="0.55" fontSize="11" fontWeight="800">↑ 信任度高</text>

              {/* iCarPro opportunity zone */}
              <g>
                <ellipse cx={W*0.36} cy={H*0.46} rx="120" ry="80"
                         fill="#4FC3F7" fillOpacity="0.18" stroke="#1E88E5" strokeOpacity="0.55" strokeWidth="2" strokeDasharray="6 4" />
                <text x={W*0.36} y={H*0.46 - 8}  textAnchor="middle" fontSize="13" fontWeight="900" fill="#1E88E5">iCarPro 機會點</text>
                <text x={W*0.36} y={H*0.46 + 10} textAnchor="middle" fontSize="11" fontWeight="700" fill="#0a0a0a" fillOpacity="0.7">行情透明 + 到府當面看</text>
                <text x={W*0.36} y={H*0.46 + 26} textAnchor="middle" fontSize="11" fontWeight="700" fill="#0a0a0a" fillOpacity="0.7">+ 賣方主導</text>
              </g>

              {/* competitor dots */}
              {COMPETITORS.map((c, i) => {
                const cx = c.x * W;
                const cy = (1 - c.y) * H;
                return (
                  <g key={i}>
                    <circle cx={cx} cy={cy} r="7" fill="#0a0a0a" />
                    <text x={cx + 11} y={cy + 4} fontSize="11" fontWeight="800" fill="#0a0a0a">{c.name}</text>
                  </g>
                );
              })}
            </svg>
          </div>

          <RSource>2026/04/30 德玉國際對 10 家對手網站、Google 評論、SEO 結構分析 · 座標為定性評估</RSource>
        </div>

        {/* The three gaps */}
        <div className="grid grid-cols-3 gap-5 mt-8">
          {[
            { code: 'GAP 01', title: '定位空白', body: '對手都在喊「全台最高價」，但賣方對最高價廣告的信任度低。「行情透明 + 到府當面看 + 賣方主導」這個位置目前沒人系統做。' },
            { code: 'GAP 02', title: 'SEO 空白', body: '大字戰場已飽和，但「品牌 × 車型 × 縣市」長尾頁（如「台北 Toyota Altis 收購」）前 5 名通常是空白或舊文章。' },
            { code: 'GAP 03', title: '體驗空白', body: '10 家對手沒一家提供「賣方先線上拿區間估價、再自己決定要不要加 LINE」的低壓接觸路徑，多數還是「電話/LINE 詢問才能知道行情」的傳統模式。' },
          ].map((g, i) => (
            <div key={i} className="reveal lift relative bg-white rounded-3xl p-6 ring-1 ring-mota-black/5" style={{ transitionDelay: `${i*0.08}s` }}>
              <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 tracking-wider">空白</div>
                  <div className="text-[16px] font-black">0{i+1}</div>
                </RStamp>
              </div>
              <div className="mt-6">
                <h3 className="text-[18px] font-black text-mota-black tracking-tight">{g.title}</h3>
                <p className="mt-2 text-[12.5px] text-mota-black/70 leading-relaxed">{g.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CoverSection, Section01, Section02 });