const { useState, useEffect, useRef } = React;

/* ════════════════════════════════════════════════════════════════
   羅伯官網（2026-10 改版）— 與 Portal 公開表單同一設計語言
   常用連結集中在這裡，改一處全站生效
   ════════════════════════════════════════════════════════════════ */
const FB_URL = "https://www.facebook.com/Robotechetag/?locale=zh_TW";
const LINE_URL = "https://lin.ee/yIxEr6g";            // 羅伯官方 LINE（@agf9216i）
const FORM_URL = "https://customer.robotech.com.tw/customer"; // 線上預約場勘表單
const TEL = "07-333-0807";
const TEL_URL = "tel:+88673330807";
const EMAIL = "bournechai@gmail.com";

/* ---------- Inline SVG icons ---------- */
const svg = (children, p, opts = {}) =>
  <svg viewBox="0 0 24 24" fill={opts.fill || "none"} stroke={opts.fill ? "none" : "currentColor"} strokeWidth={opts.sw || 1.7} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" {...p}>{children}</svg>;

const Ic = {
  bolt: (p) => svg(<path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" />, p),
  plug: (p) => svg(<><path d="M9 2v4M15 2v4M7 6h10v4a5 5 0 0 1-10 0V6Z" /><path d="M12 15v3a3 3 0 0 0 3 3h1" /></>, p),
  shield: (p) => svg(<><path d="M12 2 4 6v6c0 5 3.5 8.5 8 10 4.5-1.5 8-5 8-10V6l-8-4Z" /><path d="m9 12 2 2 4-4" /></>, p),
  tools: (p) => svg(<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18l3 3 6.3-6.3a4 4 0 0 0 5.4-5.4l-2.6 2.6-2.4-2.4 2.6-2.2Z" />, p),
  bldg: (p) => svg(<><path d="M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v16" /><path d="M16 9h2a2 2 0 0 1 2 2v10" /><path d="M8 7h4M8 11h4M8 15h4" /></>, p),
  doc: (p) => svg(<><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9l-6-6Z" /><path d="M14 3v6h6M8 13h8M8 17h5" /></>, p),
  msg: (p) => svg(<path d="M3 5h18v12H7l-4 4V5Z" />, p),
  car: (p) => svg(<><path d="M5 17h14M5 17l1.5-5h11L19 17M5 17v3M19 17v3" /><circle cx="8" cy="17" r="1.5" /><circle cx="16" cy="17" r="1.5" /></>, p),
  cal: (p) => svg(<><rect x="3" y="5" width="18" height="16" rx="2" /><path d="M3 9h18M8 3v4M16 3v4" /></>, p),
  clock: (p) => svg(<><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>, p),
  award: (p) => svg(<><circle cx="12" cy="9" r="6" /><path d="m8.5 14 -1.5 8 5-3 5 3-1.5-8" /></>, p),
  check: (p) => svg(<path d="m5 12.5 4.5 4.5L19 7.5" />, p, { sw: 2.4 }),
  plus: (p) => svg(<path d="M12 5v14M5 12h14" />, p, { sw: 2.2 }),
  arrow: (p) => svg(<path d="M5 12h14M13 5l7 7-7 7" />, p, { sw: 2 }),
  phone: (p) => svg(<path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" />, p),
  form: (p) => svg(<><rect x="4" y="3" width="16" height="18" rx="2" /><path d="M8 8h8M8 12h8M8 16h5" /></>, p),
  fb: (p) => svg(<path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.84c0-2.52 1.49-3.91 3.78-3.91 1.09 0 2.24.2 2.24.2v2.47h-1.26c-1.24 0-1.63.77-1.63 1.57v1.89h2.77l-.44 2.91h-2.33V22c4.78-.76 8.44-4.92 8.44-9.94Z" />, p, { fill: "currentColor" }),
  line: (p) => svg(<path d="M12 3C6.48 3 2 6.63 2 11.1c0 4 3.55 7.36 8.36 8 .32.07.76.21.87.49.1.25.07.65.03.91l-.14.83c-.04.25-.2.97.85.53s5.68-3.34 7.75-5.72c1.43-1.57 2.28-3.16 2.28-5.04C22 6.63 17.52 3 12 3Zm-3.99 9.78H6.04a.42.42 0 0 1-.42-.42V8.5c0-.23.19-.42.42-.42s.42.19.42.42v3.45h1.55c.23 0 .42.19.42.42s-.19.41-.42.41Zm1.65-.42c0 .23-.19.42-.42.42s-.42-.19-.42-.42V8.5c0-.23.19-.42.42-.42s.42.19.42.42v3.86Zm4.65 0c0 .18-.12.34-.29.4l-.13.02a.42.42 0 0 1-.34-.17l-1.99-2.7v2.45c0 .23-.19.42-.42.42s-.42-.19-.42-.42V8.5c0-.18.12-.34.29-.4l.13-.02c.14 0 .26.07.34.17l1.98 2.7V8.5c0-.23.19-.42.42-.42s.42.19.42.42v3.86Zm3.13-2.36c.23 0 .42.19.42.42s-.19.42-.42.42h-1.55v.93h1.55c.23 0 .42.19.42.42s-.19.42-.42.42h-1.97a.42.42 0 0 1-.42-.42V8.5c0-.23.19-.42.42-.42h1.97c.23 0 .42.19.42.42s-.19.42-.42.42h-1.55v.93h1.55Z" />, p, { fill: "currentColor" }),
};

/* 外部連結共用屬性 */
const ext = { target: "_blank", rel: "noopener" };

/* ---------- 捲動淡入：所有 .rv 元素進入視窗時加上 .in ---------- */
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".rv");
    if (!("IntersectionObserver" in window)) { els.forEach((e) => e.classList.add("in")); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((en) => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } });
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });
    els.forEach((e) => io.observe(e));
    // 保險：3 秒後全部顯示，避免任何情況下內容一直藏著
    const t = setTimeout(() => els.forEach((e) => e.classList.add("in")), 3000);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
}

/* ---------- 數字遞增（進入視窗才開始） ---------- */
function CountUp({ to, duration = 1600 }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { setN(to); return; }
    let raf, start;
    const io = new IntersectionObserver(([en]) => {
      if (!en.isIntersecting) return;
      io.disconnect();
      const tick = (t) => {
        if (!start) start = t;
        const k = Math.min(1, (t - start) / duration);
        setN(Math.round(to * (1 - Math.pow(1 - k, 3))));
        if (k < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
    });
    if (ref.current) io.observe(ref.current);
    return () => { io.disconnect(); cancelAnimationFrame(raf); };
  }, [to, duration]);
  return <span ref={ref}>{n.toLocaleString()}</span>;
}

/* ---------- Sections ---------- */
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="nav-in">
        <a className="brand" href="#top" aria-label="羅伯物業科技 回到頂端">
          <img src="assets/robotech-horizontal-v2.png" alt="羅伯物業科技 ROBO-Tech" />
          <span className="brand-div" />
          <span className="brand-txt">
            <div className="brand-zh">羅伯物業科技股份有限公司</div>
            <div className="brand-en">EV · CHARGING · INSTALL</div>
          </span>
        </a>
        <nav className="nav-links" aria-label="主選單">
          <a href="#services">服務項目</a>
          <a href="#tesla">原廠認證</a>
          <a href="#book">預約場勘</a>
          <a href="#process">安裝流程</a>
          <a href="#faq">常見問題</a>
        </nav>
        <div className="nav-actions">
          <a className="btn btn-ghost btn-sm" href={LINE_URL} {...ext}><Ic.line />LINE 詢問</a>
          <a className="btn btn-primary btn-sm" href={FORM_URL} {...ext}>線上預約場勘<Ic.arrow className="arr" /></a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <p className="eyebrow up">EV Charging Install Experts</p>
          <h1 className="h1 up d1">
            電動車充電安裝，<br />
            <span className="accent">交給羅伯。</span>
          </h1>
          <p className="lede up d2">
            <b>住家、社區、商辦、EMS</b> 充電基礎建設完整服務。從場勘、配電規劃、施工到驗收，<b>政府合格電氣承裝業</b>與專業技師全程把關，安全、合規、效率兼具。
          </p>
          <div className="cta-row up d3">
            <a className="btn btn-primary btn-lg" href={FORM_URL} {...ext}><Ic.form />立即線上預約場勘<Ic.arrow className="arr" /></a>
            <a className="btn btn-ghost btn-lg" href={FB_URL} {...ext}><Ic.fb />前往 Facebook 看實績</a>
          </div>
          <p className="cta-note up d4"><Ic.clock />線上填單 3 分鐘完成，場勘組 1–2 個工作天內主動聯繫</p>
        </div>

        <div className="panel-wrap up d2">
          <div className="panel">
            <div className="panel-top">
              <img className="panel-logo" src="assets/robotech-horizontal-v2.png" alt="" />
              <span className="live"><i />2026 場勘預約受理中</span>
            </div>
            <div className="big-stat">
              <div className="big-n"><CountUp to={13000} /><small>+</small></div>
              <div className="big-l">完工車主</div>
            </div>
            <ul className="creds">
              <li className="cred"><span className="cred-ic"><Ic.shield /></span><div><div className="cred-t">台灣特斯拉原廠認證安裝商</div><div className="cred-s">原廠施工與保固流程</div></div></li>
              <li className="cred"><span className="cred-ic"><Ic.bolt /></span><div><div className="cred-t">政府合格電氣承裝業</div><div className="cred-s">專業技師全程把關</div></div></li>
              <li className="cred"><span className="cred-ic"><Ic.award /></span><div><div className="cred-t">20 年產業經驗</div><div className="cred-s">社區機電、弱電維護經驗</div></div></li>
              <li className="cred"><span className="cred-ic"><Ic.msg /></span><div><div className="cred-t">LINE 線上客服</div><div className="cred-s">09:00–20:00，加入後直接預約</div></div></li>
            </ul>
          </div>
          <img className="mascot" src="assets/robotech-mascot.png" alt="" aria-hidden="true" />
        </div>
      </div>
    </section>
  );
}

function TeslaStrip() {
  return (
    <section style={{ paddingTop: 8 }}>
      <div className="wrap">
        <div id="tesla" className="cert rv">
          <div className="cert-ic"><Ic.shield /></div>
          <div>
            <h3>台灣特斯拉原廠認證安裝商</h3>
            <p>從社區機電、弱電維護到通過 TESLA 原廠技術安全規範審核，熟悉 Wall Connector、HPWC 等各類家用與商用充電座安裝、配電與接地規範。原廠施工與保固流程，有合格電氣承裝執照，讓你無痛通過社區物業與管委會審核。</p>
          </div>
          <div className="cert-tag"><b>CERTIFIED</b>INSTALLER · TW REGION<br />REF · 2024 / 2025 / 2026</div>
        </div>
      </div>
    </section>
  );
}

function Services() {
  const items = [
    { ic: <Ic.bldg />, t: "社區大樓充電", d: "專為集合住宅設計的分電專案，涵蓋管委會評估報告、線槽規劃、計費表設置。", ul: ["管委會送審文件", "共用迴路規劃", "個別智慧分表"] },
    { ic: <Ic.car />, t: "家用 Wall Connector", d: "獨棟、別墅、私人車位的家用快充安裝，從穿牆走線到外觀美化一條龍。", ul: ["3kW / 5kW / 7kW / 11kW 都有", "原廠保固施工", "美觀走線"] },
    { ic: <Ic.plug />, t: "商辦 / 停車場", d: "商用場域的多槍配置與後台金流，支援 OCPP、加值服務串接。", ul: ["多槍負載平衡", "OCPP / 後台串接", "掃碼支付"] },
    { ic: <Ic.tools />, t: "既有充電設備檢修", d: "非自家安裝設備也歡迎報修；故障排除、線路重整、軔體更新。", ul: ["故障排除", "接地與絕緣量測", "線材升級"] },
    { ic: <Ic.doc />, t: "場勘與規劃顧問", d: "完整場勘報告書、單線圖、施工建議與報價，作為向管委會送審依據。", ul: ["現場負載評估", "電氣單線圖", "施工方案比較"] },
    { ic: <Ic.shield />, t: "安全驗收與保固", d: "完工後絕緣量測、漏電保護測試與一年施工保固，後續維護快速到府。", ul: ["IR / RCD 量測", "完工驗收報告", "1 年施工保固"] },
  ];
  return (
    <section id="services" className="sec">
      <div className="wrap">
        <div className="sec-head">
          <div className="rv">
            <div className="sec-num">01 — SERVICES</div>
            <h2 className="sec-title">充電基礎建設，<br />專業安裝守護。</h2>
          </div>
          <p className="sec-desc rv d1">從家用 Wall Connector，到整棟社區、整座停車場的多樣設備規劃。羅伯都能用「電氣專業 + 社區實務」，讓服務一次到位。</p>
        </div>
        <div className="svc-grid">
          {items.map((s, i) =>
            <article className={"svc rv d" + (i % 3)} key={s.t}>
              <div className="svc-top">
                <div className="svc-ic">{s.ic}</div>
                <span className="svc-n">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <ul>{s.ul.map((li) => <li key={li}>{li}</li>)}</ul>
            </article>
          )}
        </div>
      </div>
    </section>
  );
}

function Booking() {
  return (
    <section id="book" className="sec" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="rv">
            <div className="sec-num">02 — BOOKING</div>
            <h2 className="sec-title">三分鐘預約場勘</h2>
          </div>
          <p className="sec-desc rv d1">線上填單或掃描 QR Code 加 LINE，場勘組會於 1–2 個工作天內主動聯繫，安排到府評估時間。</p>
        </div>

        <div className="book rv">
          <div className="book-l">
            <h3>讓場勘組到府為您評估</h3>
            <p className="lead">
              充電器安裝牽涉現場用電容量、配電盤空間、明管配線距離與穿牆方式。<b>不到現場無法準確報價</b>，因此場勘是必要的第一步。場勘工程師會帶設備量測，並於現場與您討論安裝方案。
            </p>
            <div className="price">
              <div>
                <div className="price-lbl">SITE SURVEY FEE</div>
                <div className="price-amt">NT$ 3,000<small>/ 次</small></div>
              </div>
              <ul>
                <li><Ic.check />含到府交通、現場量測</li>
                <li><Ic.check />後續委託施工可全額折抵</li>
                <li><Ic.check />完整書面評估報告書</li>
              </ul>
            </div>
            <ol className="mini-steps">
              <li>線上填單</li><li>1–2 天聯繫</li><li>排定時間</li><li>到府場勘</li><li>報告書</li>
            </ol>
          </div>

          <div className="book-r">
            <div className="opt">
              <span className="opt-tag rec">推薦</span>
              <h4>線上填單預約</h4>
              <p>填寫聯絡方式與安裝地點，3 分鐘完成，場勘組 1–2 個工作天內主動聯繫。</p>
              <a className="btn btn-primary" href={FORM_URL} {...ext}><Ic.form />立即線上填單<Ic.arrow className="arr" /></a>
            </div>
            <div className="opt">
              <span className="opt-tag line">LINE 官方帳號</span>
              <div className="qr-row">
                <img className="qr" src="assets/line-qr.png" alt="羅伯物業科技 LINE 官方帳號 QR Code" />
                <div className="qr-txt">
                  <h4>掃描加入 LINE</h4>
                  <p>用手機相機掃描 QR Code，加入後直接傳訊息預約。</p>
                  <a className="btn btn-line btn-sm" href={LINE_URL} {...ext}><Ic.line />開啟 LINE</a>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div className="socials">
          <a className="soc soc-fb rv" href={FB_URL} {...ext}>
            <span className="soc-ic"><Ic.fb /></span>
            <span><div className="soc-t">Facebook · 羅伯物業科技</div><div className="soc-s">完工案例、最新公告與優惠資訊</div></span>
            <Ic.arrow className="arr" />
          </a>
          <a className="soc soc-line rv d1" href={LINE_URL} {...ext}>
            <span className="soc-ic"><Ic.line /></span>
            <span><div className="soc-t">場勘組 · LINE 官方帳號</div><div className="soc-s">09:00–20:00 線上客服，加入後直接預約</div></span>
            <Ic.arrow className="arr" />
          </a>
        </div>
      </div>
    </section>
  );
}

function Process() {
  const ps = [
    { ic: <Ic.form />, t: "線上預約", s: "線上填單或加入 LINE，提供地址與需求" },
    { ic: <Ic.cal />, t: "到府場勘", s: "工程師現場量測，產出評估報告" },
    { ic: <Ic.doc />, t: "報價簽約", s: "方案規劃，場勘費可折抵" },
    { ic: <Ic.tools />, t: "專業施工", s: "合法電氣承裝、原廠規範作業" },
    { ic: <Ic.shield />, t: "驗收保固", s: "安全量測 + 一年施工保固" },
  ];
  return (
    <section id="process" className="sec" style={{ paddingTop: 0 }}>
      <div className="wrap">
        <div className="sec-head">
          <div className="rv">
            <div className="sec-num">03 — PROCESS</div>
            <h2 className="sec-title">標準化安裝流程</h2>
          </div>
          <p className="sec-desc rv d1">五個階段、單一窗口。從第一次預約到驗收掛保固，由專業團隊全程服務。</p>
        </div>
        <ol className="proc">
          {ps.map((p, i) =>
            <li className={"pc rv d" + i} key={p.t}>
              <div className="pc-dot">{p.ic}<span className="pc-num">{i + 1}</span></div>
              <div className="pc-t">{p.t}</div>
              <div className="pc-s">{p.s}</div>
            </li>
          )}
        </ol>
      </div>
    </section>
  );
}

function FAQ() {
  const qs = [
    ["場勘費 NT$3,000 包含什麼？", "包含到府交通、住家負載確認、配電盤檢視、距離與穿牆評估，並提供規劃報告書與施工預算。後續若委託施工，場勘費可全額折抵工程款。"],
    ["社區大樓也可以裝嗎？", "可以。請告訴我們社區名稱，羅伯擅長處理社區建案，會協助準備管委會送審所需的圖面、施工說明與保險文件，並負責與管委會、保全、物業協調進場時間。"],
    ["原廠 Wall Connector 在哪裡買？", "可由我們協助訂購原廠盒裝設備並提供原廠保固，也接受您自備機型施工。場勘時會根據現場條件建議合適規格（3kW / 5kW / 7kW / 11kW / 三相電）。"],
    ["施工時間需要多久？", "居家充電設備安裝通常為 1 個工作天，社區大樓視配線距離與多組設備規劃需 2–5 個工作天。完工後當天即可在家充電。"],
    ["有提供保固嗎？", "特斯拉充電設備保固以原廠規定為準（Wall Connector 一般 4 年原廠保固）。其他充電設備與施工則依照設備保固條件為準，保固期間內任何施工相關問題由羅伯到府處理。"],
    ["可以開立統編 / 三聯式發票嗎？", "可以，羅伯物業使用電子發票，場勘費與工程款皆開立發票。個人發票請提供載具，三聯式發票，請提供統編及 E-Mail。"],
  ];
  return (
    <section id="faq" className="sec" style={{ paddingTop: 0 }}>
      <div className="wrap faq-grid">
        <div className="faq-side rv">
          <div className="sec-num">04 — FAQ</div>
          <h2 className="sec-title">常見問題</h2>
          <p className="sec-desc">沒看到您的問題？快透過 LINE 官方帳號詢問，場勘組會儘速回覆。</p>
          <div className="cta-row">
            <a className="btn btn-line" href={LINE_URL} {...ext}><Ic.line />LINE 詢問</a>
            <a className="btn btn-ghost" href={TEL_URL}><Ic.phone />{TEL}</a>
          </div>
        </div>
        <div className="faq">
          {qs.map(([q, a], i) =>
            <details className={"q rv d" + Math.min(i, 3)} key={q} open={i === 0}>
              <summary>
                <span className="q-n">{String(i + 1).padStart(2, "0")}</span>
                {q}
                <span className="q-ic"><Ic.plus /></span>
              </summary>
              <p>{a}</p>
            </details>
          )}
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section style={{ padding: 0 }}>
      <div className="wrap">
        <div className="final rv">
          <p className="eyebrow" style={{ justifyContent: "center" }}>Ready to charge at home</p>
          <h2>準備好在家充電了嗎？</h2>
          <p>線上填單 3 分鐘完成，場勘組 1–2 個工作天內主動聯繫，安排到府評估時間。</p>
          <div className="cta-row">
            <a className="btn btn-primary btn-lg" href={FORM_URL} {...ext}><Ic.form />立即線上預約場勘<Ic.arrow className="arr" /></a>
            <a className="btn btn-line btn-lg" href={LINE_URL} {...ext}><Ic.line />加入 LINE 詢問</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="foot">
        <div className="foot-brand">
          <img src="assets/robotech-horizontal-v2.png" alt="羅伯物業科技" />
          <p>專業電動車充電設備安裝與物業科技整合服務。台灣特斯拉原廠認證安裝商、合格電氣承裝業。</p>
        </div>
        <div>
          <h5>SERVICES</h5>
          <ul>
            <li><a href="#services">家用 Wall Connector</a></li>
            <li><a href="#services">社區大樓充電</a></li>
            <li><a href="#services">商辦 / 停車場</a></li>
            <li><a href="#services">既有設備檢修</a></li>
          </ul>
        </div>
        <div>
          <h5>ABOUT</h5>
          <ul>
            <li><a href="#tesla">原廠認證</a></li>
            <li><a href="#process">安裝流程</a></li>
            <li><a href="#faq">常見問題</a></li>
            <li><a href={FORM_URL} {...ext}>線上預約場勘</a></li>
          </ul>
        </div>
        <div>
          <h5>CONTACT</h5>
          <ul>
            <li><a href={TEL_URL}>詢問專線：{TEL}</a></li>
            <li><a href={LINE_URL} {...ext}>LINE 官方帳號</a></li>
            <li><a href={FB_URL} {...ext}>Facebook 粉絲頁</a></li>
            <li><a href={"mailto:" + EMAIL}>{EMAIL}</a></li>
          </ul>
        </div>
      </div>
      <div className="foot-bot">
        <div>© 2026 ROBOTECH PROPERTY TECHNOLOGY Co. Ltd. · ALL RIGHTS RESERVED</div>
        <div>EV CHARGING · INSTALL · MAINTAIN</div>
      </div>
    </footer>
  );
}

/* 手機底部預約列：捲過首屏才出現 */
function MobileBar() {
  const [show, setShow] = useState(false);
  useEffect(() => {
    const on = () => setShow(window.scrollY > window.innerHeight * 0.6);
    on(); window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <div className={"mbar" + (show ? " show" : "")} aria-hidden={!show}>
      <a className="btn btn-primary" href={FORM_URL} {...ext} tabIndex={show ? 0 : -1}><Ic.form />線上預約場勘</a>
      <a className="btn btn-line" href={LINE_URL} {...ext} aria-label="加入 LINE" tabIndex={show ? 0 : -1}><Ic.line /></a>
    </div>
  );
}

function App() {
  useReveal();
  return (
    <>
      <Nav />
      <main>
        <Hero />
        <TeslaStrip />
        <Services />
        <Booking />
        <Process />
        <FAQ />
        <FinalCTA />
      </main>
      <Footer />
      <MobileBar />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);