const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 215,
  "showTeslaStrip": true,
  "showStats": true,
  "showFAQ": true
} /*EDITMODE-END*/;

const FB_URL = "https://www.facebook.com/Robotechetag/?locale=zh_TW";

/* ---------- Inline SVG icons ---------- */
const Ic = {
  bolt: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M13 2 4 14h7l-1 8 9-12h-7l1-8Z" />
    </svg>,

  plug: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M9 2v4M15 2v4M7 6h10v4a5 5 0 0 1-10 0V6Z" />
      <path d="M12 15v3a3 3 0 0 0 3 3h1" />
    </svg>,

  shield: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <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" />
    </svg>,

  tools: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <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" />
    </svg>,

  bldg: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <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" />
    </svg>,

  doc: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <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" />
    </svg>,

  msg: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 5h18v12H7l-4 4V5Z" />
    </svg>,

  car: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <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" />
    </svg>,

  cal: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <rect x="3" y="5" width="18" height="16" rx="2" />
      <path d="M3 9h18M8 3v4M16 3v4" />
    </svg>,

  arrow: (p) =>
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>,

  fb: (p) =>
  <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <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" />
    </svg>,

  line: (p) =>
  <svg viewBox="0 0 24 24" fill="currentColor" {...p}>
      <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" />
    </svg>,

  tesla: (p) => (
  /* Generic plug/T mark — NOT Tesla's wordmark */
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" {...p}>
      <path d="M3 4h18M12 4v16" />
      <circle cx="12" cy="14" r="3" />
    </svg>)

};

/* ---------- Sections ---------- */
function Nav() {
  return (
    <header className="nav">
      <div className="nav-in">
        <a className="brand" href="#top">
          <img src="assets/robotech-horizontal-v2.png" alt="羅伯物業科技 ROBO-Tech" className="brand-logo" />
          <div className="brand-divider"></div>
          <div className="brand-tag">
            <div className="brand-tag-zh">羅伯物業科技股份有限公司</div>
            <div className="brand-tag-en">EV · CHARGING · INSTALL</div>
          </div>
        </a>
        <nav className="nav-links">
          <a href="#services">服務項目</a>
          <a href="#tesla">原廠認證</a>
          <a href="#process">安裝流程</a>
          <a href="#faq">常見問題</a>
        </nav>
        <a className="nav-cta" href="#book">
          預約場勘 <Ic.arrow style={{ width: 14, height: 14 }} />
        </a>
      </div>
    </header>);

}

function Hero({ showStats }) {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-grid">
        <div>
          <span className="eyebrow"><span className="dot"></span>NOW ACCEPTING · 2026 SITE SURVEY</span>
          <h1 className="title">
            EV CHARGING<br />
            <span className="glow">INSTALL EXPERTS</span>
            <span className="zh">羅伯物業科技 — 電動車充電設備安裝</span>
          </h1>
          <p className="lede">
            <b>住家、社區、商辦、EMS</b>充電基礎建設完整服務。從場勘、配電規劃、施工到驗收，<b>政府合格電氣承裝業</b>與專業技師全程把關，安全、合規、效率兼具。
          </p>
          <div className="cta-row">
            <a className="btn btn-primary" href="#book">
              <Ic.cal style={{ width: 18, height: 18 }} /> 立即預約場勘
            </a>
            <a className="btn btn-ghost" href={FB_URL} target="_blank" rel="noopener">
              <Ic.fb style={{ width: 16, height: 16 }} /> 前往 Facebook 看實績
            </a>
          </div>

          {showStats &&
          <div className="hero-stats">
              <div className="stat"><div className="n">5300<small>+</small></div><div className="l">完工車主</div></div>
              <div className="stat"><div className="n">20<small>年</small></div><div className="l">產業經驗</div></div>
              <div className="stat"><div className="n n-cjk" style={{ fontSize: "32px" }}>合格</div><div className="l">電氣承裝業</div></div>
              <div className="stat"><div className="n n-line" style={{ fontSize: "32px" }}>LINE</div><div className="l">線上客服</div></div>
            </div>
          }
        </div>

        <div className="orb-wrap" aria-hidden="true">
          <div className="orb"></div>
          <div className="mascot-frame">
            <img src="assets/robotech-circle.png" alt="" className="mascot-img" />
            <div className="mascot-rings">
              <div className="ring r1"></div>
              <div className="ring r2"></div>
              <div className="ring r3"></div>
            </div>
            <div className="mascot-stat"><span className="dot" />SYSTEM ONLINE</div>
          </div>
        </div>
      </div>
    </section>);

}

function TeslaStrip() {
  return (
    <section style={{ padding: '10px 28px 0' }} data-screen-label="02 Tesla">
      <div className="wrap">
        <div id="tesla" className="tesla-strip">
          <div className="ts-badge"><Ic.tesla style={{ color: '#82c4ff' }} /></div>
          <div className="ts-text">
            <h3>台灣特斯拉原廠認證安裝商</h3>
            <p>從社區機電、弱電維護到通過 TESLA 原廠技術安全規範審核，熟悉 Wall Connector、HPWC 等各類家用與商用充電座安裝、配電與接地規範。原廠施工與保固流程，有合格電氣承裝執照，讓你無痛通過社區物業與管委會審核。</p>
          </div>
          <div className="ts-meta">
            <span className="big">CERTIFIED</span>
            INSTALLER · TW REGION<br />
            REF · 2024/2025/2026
          </div>
        </div>
      </div>
    </section>);

}

function Services() {
  const items = [
  { n: "01", ic: <Ic.bldg />, t: "社區大樓充電", d: "專為集合住宅設計的分電專案，涵蓋管委會評估報告、線槽規劃、計費表設置。", ul: ["管委會送審文件", "共用迴路規劃", "個別智慧分表"] },
  { n: "02", ic: <Ic.car />, t: "家用 Wall Connector", d: "獨棟、別墅、私人車位的家用快充安裝，從穿牆走線到外觀美化一條龍。", ul: ["3kW / 5kW / 7kW / 11kW 都有", "原廠保固施工", "美觀走線"] },
  { n: "03", ic: <Ic.plug />, t: "商辦 / 停車場", d: "商用場域的多槍配置與後台金流，支援 OCPP、加值服務串接。", ul: ["多槍負載平衡", "OCPP / 後台串接", "掃碼支付"] },
  { n: "04", ic: <Ic.tools />, t: "既有充電設備檢修", d: "非自家安裝設備也歡迎報修；故障排除、線路重整、軔體更新。", ul: ["故障排除", "接地與絕緣量測", "線材升級"] },
  { n: "05", ic: <Ic.doc />, t: "場勘與規劃顧問", d: "完整場勘報告書、單線圖、施工建議與報價，作為向管委會送審依據。", ul: ["現場負載評估", "電氣單線圖", "施工方案比較"] },
  { n: "06", ic: <Ic.shield />, t: "安全驗收與保固", d: "完工後絕緣量測、漏電保護測試與一年施工保固，後續維護快速到府。", ul: ["IR / RCD 量測", "完工驗收報告", "1 年施工保固"] }];

  return (
    <section id="services" data-screen-label="03 Services">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="sec-tag">// SERVICES · 02</div>
            <h2 className="sec-title">充電基礎建設 · 專業安裝守護</h2>
          </div>
          <p className="sec-desc">從家用 Wall Connector，到整棟社區、整座停車場的多樣設備規劃。羅伯都能用「電氣專業 + 社區實務」，讓服務一次到位。</p>
        </div>
        <div className="svc-grid">
          {items.map((s) =>
          <div className="svc" key={s.n}>
              <div className="svc-num">SERVICE / {s.n}</div>
              <div className="svc-icon">{s.ic}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
              <ul>{s.ul.map((li) => <li key={li}>{li}</li>)}</ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

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

        <div className="book">
          <div className="book-left">
            <span className="book-eyebrow"><span className="pulse"></span>NOW · SITE SURVEY</span>
            <h2>讓場勘組<br />到府為您評估</h2>
            <p className="lead">
              充電器安裝牽涉現場用電容量、配電盤空間、明管配線距離與穿牆方式。<b style={{ color: 'var(--ink)' }}>不到現場無法準確報價</b>，因此場勘是必要的第一步。場勘工程師會帶設備量測，並於現場與您討論安裝方案。
            </p>

            <div className="price">
              <div>
                <div className="lbl">SITE SURVEY FEE</div>
                <div className="amt">NT$ 3,000<small>/ 次</small></div>
              </div>
              <div className="note">
                ※ 含到府交通、現場量測<br />
                ※ 後續委託施工可全額折抵<br />
                ※ 完整書面評估報告書
              </div>
            </div>

            <div className="steps">
              <div className="step"><div className="num">1</div>線上填單</div>
              <div className="step"><div className="num">2</div>1-2天聯繫</div>
              <div className="step"><div className="num">3</div>排定時間</div>
              <div className="step"><div className="num">4</div>到府場勘</div>
              <div className="step"><div className="num">5</div>報告書</div>
            </div>

            <a
              href="https://customer.robotech.com.tw/customer"
              target="_blank"
              rel="noopener"
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 8,
                marginTop: 24,
                padding: "14px 28px",
                borderRadius: 10,
                background: "linear-gradient(135deg,#0891b2,#06b6d4)",
                color: "#fff",
                fontSize: 15,
                fontWeight: 700,
                textDecoration: "none",
                boxShadow: "0 4px 20px rgba(6,182,212,0.4)",
                letterSpacing: "0.02em",
              }}
            >
              📝 立即線上填單（3 分鐘完成）
            </a>
          </div>

          <div className="book-right">
            <div style={{ fontSize: 11, color: "#64748b", textTransform: "uppercase", letterSpacing: "0.1em", marginBottom: 10 }}>
              — 或者加入 LINE 直接預約 —
            </div>
            <div className="qr-card">
              <div className="qr-corner">SCAN ME</div>
              <img src="assets/line-qr.png" alt="LINE 官方好友 QR Code" />
            </div>
            <div className="qr-meta">
              <div className="t">羅伯物業科技 · 場勘預約</div>
              <div className="s">LINE OFFICIAL · @robotech</div>
            </div>
            <a className="qr-line-btn" href="https://line.me/R/ti/p/@robotech" target="_blank" rel="noopener">
              <Ic.line style={{ width: 18, height: 18 }} /> 在手機上開啟 LINE
            </a>
          </div>
        </div>

        <div className="social-strip">
          <a className="soc soc-fb" href={FB_URL} target="_blank" rel="noopener">
            <div className="soc-ic"><Ic.fb /></div>
            <div>
              <div className="soc-t">Facebook · 羅伯物業科技</div>
              <div className="soc-s">完工案例、最新公告與優惠資訊</div>
            </div>
            <Ic.arrow className="soc-arrow" style={{ width: 18, height: 18 }} />
          </a>
          <a className="soc soc-line" href="https://line.me/R/ti/p/@robotech" target="_blank" rel="noopener">
            <div className="soc-ic"><Ic.line /></div>
            <div>
              <div className="soc-t">場勘組 · LINE 官方帳號</div>
              <div className="soc-s">09:00–20:00 線上客服，加入後直接預約</div>
            </div>
            <Ic.arrow className="soc-arrow" style={{ width: 18, height: 18 }} />
          </a>
        </div>
      </div>
    </section>);

}

function Process() {
  const ps = [
  { ic: <Ic.msg />, t: "LINE 預約", s: "加入官方好友、提供地址與需求" },
  { ic: <Ic.cal />, t: "到府場勘", s: "工程師現場量測，產出評估報告" },
  { ic: <Ic.doc />, t: "報價簽約", s: "方案規劃，場勘費可折抵" },
  { ic: <Ic.tools />, t: "專業施工", s: "合法電氣承裝、原廠規範作業" },
  { ic: <Ic.shield />, t: "驗收保固", s: "安全量測 + 一年施工保固" }];

  return (
    <section id="process" data-screen-label="05 Process">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="sec-tag">// PROCESS · 04</div>
            <h2 className="sec-title">標準化安裝流程</h2>
          </div>
          <p className="sec-desc">五個階段、單一窗口。從第一通 LINE 訊息到驗收掛保固，由專業團隊全程服務。</p>
        </div>
        <div className="proc">
          {ps.map((p, i) =>
          <div className="pc" key={i}>
              <div className="pc-dot">
                {React.cloneElement(p.ic, { style: { width: 30, height: 30 } })}
                <span className="pc-num">0{i + 1}</span>
              </div>
              <div className="pc-t">{p.t}</div>
              <div className="pc-s">{p.s}</div>
            </div>
          )}
        </div>
      </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" data-screen-label="06 FAQ">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="sec-tag">// FAQ · 05</div>
            <h2 className="sec-title">常見問題</h2>
          </div>
          <p className="sec-desc">沒看到您的問題？快透過 LINE 官方帳號詢問，場勘組會儘速回覆。</p>
        </div>
        <div className="faq">
          {qs.map(([q, a], i) =>
          <details className="q" key={i} open={i === 0}>
              <summary>{q}</summary>
              <p>{a}</p>
            </details>
          )}
        </div>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer data-screen-label="07 Footer">
      <div className="foot">
        <div className="foot-brand">
          <a className="brand" href="#top" style={{ marginBottom: 8 }}>
            <img src="assets/robotech-horizontal-v2.png" alt="羅伯物業科技" className="brand-logo" />
          </a>
          <p>專業電動車充電設備安裝與物業科技整合服務。台灣特斯拉原廠認證安裝商、合格電氣承裝業。</p>
        </div>
        <div>
          <h5>服務項目</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>關於</h5>
          <ul>
            <li><a href="#tesla">原廠認證</a></li>
            <li><a href="#process">安裝流程</a></li>
            <li><a href="#faq">常見問題</a></li>
            <li><a href="#book">預約場勘</a></li>
          </ul>
        </div>
        <div>
          <h5>聯繫</h5>
          <ul>
            <li><a href={FB_URL} target="_blank" rel="noopener">Facebook 粉絲頁</a></li>
            <li><a href="https://line.me/R/ti/p/@robotech" target="_blank" rel="noopener">LINE 官方帳號</a></li>
            <li>詢問專線：07-3330807</li>
            <li>bournechai@gmail.com</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>);

}

/* ---------- Tweaks ---------- */
function TweaksUI() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', `oklch(0.72 0.14 ${t.accentHue})`);
    document.documentElement.style.setProperty('--accent-2', `oklch(0.82 0.12 ${t.accentHue})`);
    document.documentElement.style.setProperty('--accent-soft', `oklch(0.72 0.14 ${t.accentHue} / .14)`);
  }, [t.accentHue]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="主題色">
        <window.TweakSlider label="Accent Hue" value={t.accentHue} min={0} max={360} step={5}
        onChange={(v) => setTweak('accentHue', v)} />
      </window.TweakSection>
      <window.TweakSection label="區塊顯示">
        <window.TweakToggle label="Tesla 認證橫條" value={t.showTeslaStrip} onChange={(v) => setTweak('showTeslaStrip', v)} />
        <window.TweakToggle label="Hero 數據區塊" value={t.showStats} onChange={(v) => setTweak('showStats', v)} />
        <window.TweakToggle label="FAQ 區塊" value={t.showFAQ} onChange={(v) => setTweak('showFAQ', v)} />
      </window.TweakSection>
    </window.TweaksPanel>);

}

function App() {
  const [tweaks] = window.useTweaks(TWEAK_DEFAULTS);
  return (
    <>
      <Nav />
      <Hero showStats={tweaks.showStats} />
      {tweaks.showTeslaStrip && <TeslaStrip />}
      <Services />
      <Booking />
      <Process />
      {tweaks.showFAQ && <FAQ />}
      <Footer />
      <TweaksUI />
    </>);

}

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