// RepairCases.jsx
// SEO: 保時捷事故包修、BMW 事故修復、Audi 事故維修、Benz 事故包修、
// Lexus 車頭維修、Tesla Model Y 事故修復、Volvo 事故收購

/* ── Inject component styles once ─────────────────────────────── */
(function injectRepairCasesStyles() {
  if (document.getElementById('ev-repair-cases-css')) return;
  var s = document.createElement('style');
  s.id = 'ev-repair-cases-css';
  s.textContent = [
    '.ev-repair{background:var(--bg-2);padding:96px 32px;}',
    '.ev-repair__head{text-align:center;margin-bottom:48px;}',
    '.ev-repair__title{',
      'font-size:var(--fs-h2);font-weight:600;',
      'letter-spacing:var(--ls-headline);color:var(--ink);',
      'line-height:var(--lh-snug);margin:6px 0 8px;',
    '}',
    '.ev-repair__sub{',
      'font-size:var(--fs-body-lg);color:var(--ink-3);',
      'margin:0;line-height:var(--lh-body);',
    '}',
    '.ev-repair__grid{',
      'display:grid;',
      'grid-template-columns:repeat(2,1fr);',
      'gap:16px;',
      'max-width:var(--container-wide);margin:0 auto;',
    '}',
    '.ev-rc{',
      'content-visibility:auto;',
      'contain-intrinsic-size:0 340px;',
      'border:1px solid var(--line-2);',
      'border-radius:var(--r-xl);',
      'overflow:hidden;',
      'background:var(--bg);',
      'transition:',
        'border-color 150ms var(--ease-out),',
        'box-shadow 150ms var(--ease-out);',
      'cursor:default;',
    '}',
    '.ev-rc:hover{',
      'border-color:var(--line);',
      'box-shadow:var(--shadow-hover);',
    '}',
    /* Photo */
    '.ev-rc__photo{',
      'position:relative;',
      'background-color:var(--bg-2);',
      'line-height:0;',
    '}',
    '.ev-rc__photo img{',
      'width:100%;',
      'height:auto;',
      'display:block;',
      'object-fit:contain;',
    '}',
    /* Tag chip — top-right corner */
    '.ev-rc__tag{',
      'position:absolute;top:12px;right:12px;',
      'font-size:11px;font-weight:600;',
      'padding:4px 10px;border-radius:var(--r-pill);',
      'line-height:1.2;',
    '}',
    '.ev-rc__tag--repair{',
      'background:rgba(0,113,227,0.08);',
      'color:var(--link);',
    '}',
    '.ev-rc__tag--buyback{',
      'background:rgba(227,25,55,0.08);',
      'color:var(--tesla-red);',
    '}',
    /* Body */
    '.ev-rc__body{padding:16px;}',
    '.ev-rc__eyebrow{',
      'font-size:12px;color:var(--ink-3);',
      'margin:0 0 4px;line-height:1.3;',
    '}',
    '.ev-rc__damage{',
      'font-size:17px;font-weight:500;',
      'color:var(--ink);margin:0;line-height:1.3;',
    '}',
    /* Footer */
    '.ev-repair__footer{',
      'text-align:center;margin-top:40px;',
      'font-size:15px;color:var(--ink-2);',
      'display:flex;align-items:center;justify-content:center;gap:6px;',
    '}',
    '.ev-repair__footer a{',
      'color:var(--link);font-weight:500;',
      'text-decoration:none;',
      'display:inline-flex;align-items:center;gap:3px;',
      'transition:color var(--dur-fast) var(--ease-out);',
    '}',
    '.ev-repair__footer a::after{content:"›";font-size:1.15em;}',
    '.ev-repair__footer a:hover{color:var(--link-hover);}',
    /* Mobile */
    '@media(max-width:767px){',
      '.ev-repair{padding:48px 20px;}',
      '.ev-repair__grid{grid-template-columns:1fr;gap:12px;}',
      '.ev-repair__head{margin-bottom:36px;}',
    '}',
  ].join('');
  document.head.appendChild(s);
}());

/* ── Data ──────────────────────────────────────────────────────── */

const REPAIR_CASES = [
  {
    img: 'assets/repair-cases/repair-porsche-cayenne.webp',
    alt: 'Porsche Cayenne Coupe 前端重損事故包修，修復前後對比，電車玩家',
    brand: 'Porsche',
    model: 'Cayenne Coupe',
    damage: '前端全毀',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-bmw-x3.webp',
    alt: 'BMW X3 左前嚴重撞損事故包修，修復前後對比，電車玩家',
    brand: 'BMW',
    model: 'X3',
    damage: '左前全毀',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-porsche-panamera.webp',
    alt: 'Porsche Panamera 左前保桿撕裂事故維修，修復前後對比，電車玩家',
    brand: 'Porsche',
    model: 'Panamera',
    damage: '左前保桿、懸吊',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-audi-etron.webp',
    alt: 'Audi e-tron GT 右前嚴重撞損事故修復，修復前後對比，電車玩家',
    brand: 'Audi',
    model: 'e-tron GT',
    damage: '右前重損',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-benz-cla250.webp',
    alt: 'Mercedes-Benz CLA 250 前端事故包修，修復前後對比，電車玩家',
    brand: 'Benz',
    model: 'CLA 250',
    damage: '前端車頭撞損',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-lexus-nx200.webp',
    alt: 'Lexus NX 200 車頭重損事故維修，修復前後對比，電車玩家',
    brand: 'Lexus',
    model: 'NX 200',
    damage: '車頭重損',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-modely-rear.webp',
    alt: 'Tesla Model Y 左後車尾嚴重撞損事故修復，修復前後對比，電車玩家',
    brand: 'Tesla',
    model: 'Model Y',
    damage: '左後車尾重損',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-modely-front.webp',
    alt: 'Tesla Model Y 車頭前保桿事故維修，修復前後對比，電車玩家',
    brand: 'Tesla',
    model: 'Model Y',
    damage: '車頭前保桿',
    tag: '事故包修',
  },
  {
    img: 'assets/repair-cases/repair-volvo-v60.webp',
    alt: 'Volvo V60 前端撞損事故收購，修復前後對比，電車玩家',
    brand: 'Volvo',
    model: 'V60',
    damage: '前端車頭毀損',
    tag: '事故收購',
  },
  {
    img: 'assets/repair-cases/repair-bmw-320touring.webp',
    alt: 'BMW 320 Touring 右側嚴重撞損事故修復，修復前後對比，電車玩家',
    brand: 'BMW',
    model: '320 Touring',
    damage: '右側嚴重受損',
    tag: '事故包修',
  },
];

/* ── RepairCard ─────────────────────────────────────────────────── */

function RepairCard({ c }) {
  const isRepair  = c.tag === '事故包修';
  const tagClass  = isRepair ? 'ev-rc__tag ev-rc__tag--repair' : 'ev-rc__tag ev-rc__tag--buyback';

  return (
    <article className="ev-rc">
      <div className="ev-rc__photo">
        <img src={c.img} alt={c.alt} loading="lazy" decoding="async" />
        <span className={tagClass}>{c.tag}</span>
      </div>
      <div className="ev-rc__body">
        <p className="ev-rc__eyebrow">{c.brand} {c.model}</p>
        <p className="ev-rc__damage">{c.damage}</p>
      </div>
    </article>
  );
}

/* ── RepairCases ────────────────────────────────────────────────── */

function RepairCases() {
  const lineURL = (typeof LINE_URL !== 'undefined' ? LINE_URL : 'https://line.me/R/ti/p/@52ev');

  return (
    <section className="ev-repair" id="repair-cases" aria-label="修復實績案例">
      <header className="ev-repair__head">
        <div className="ev-eyebrow ev-eyebrow--accent"><span style={{ color: '#ff7a8c', fontSize: '24px' }}>修復實績</span></div>
        <h2 className="ev-repair__title">送來什麼狀況，交回什麼狀況。</h2>
        <p className="ev-repair__sub">每一件都是實際經手的案子。</p>
      </header>

      <div className="ev-repair__grid">
        {REPAIR_CASES.map((c, i) => (
          <RepairCard key={i} c={c} />
        ))}
      </div>

      <p className="ev-repair__footer">
        有類似狀況的車？{' '}
        <a href={lineURL} target="_blank" rel="noopener noreferrer">加 LINE 詢問</a>
      </p>
    </section>
  );
}

window.RepairCases = RepairCases;