/* global React */
const { useState, useEffect, useRef } = React;

class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { hasError: false }; }
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(err) { try { console.error('[ErrorBoundary]', err); } catch (_) {} }
  render() {
    if (this.state.hasError) {
      return (
        <div style={{ padding: '80px 32px', fontFamily: 'var(--mono, monospace)', textAlign: 'center' }}>
          <div style={{ fontSize: 48, color: 'var(--warn, #FF3B00)', marginBottom: 16 }}>404</div>
          <p>頁面載入時發生錯誤。請<a href="" onClick={(e) => { e.preventDefault(); location.reload(); }} style={{ borderBottom: '1px solid currentColor' }}>重新整理</a>。</p>
        </div>
      );
    }
    return this.props.children;
  }
}

// ── 404 TABLE 標誌 ──────────────────────
const Mark = ({ size = 32, color = 'currentColor' }) => (
  <svg viewBox="0 0 160 80" width={size} height={size * 0.5} fill={color}>
    {/* Left 4: diagonal stroke + crossbar + right bar */}
    <path d="M17,0 L32,0 L15,40 L0,40 Z"/>
    <rect x="0" y="40" width="50" height="12"/>
    <rect x="32" y="0" width="18" height="80"/>
    {/* Table: top + two legs */}
    <rect x="57" y="0" width="46" height="40"/>
    <rect x="57" y="45" width="17" height="35"/>
    <rect x="86" y="45" width="17" height="35"/>
    {/* Right 4: left bar + crossbar + diagonal stroke */}
    <rect x="110" y="0" width="18" height="80"/>
    <rect x="110" y="40" width="50" height="12"/>
    <path d="M143,0 L128,0 L145,40 L160,40 Z"/>
  </svg>
);

// ── Top bar ─────────────────────────────
const TopBar = ({ onIndustryPage = false }) => {
  const [menuOpen, setMenuOpen] = useState(false);
  const close = () => setMenuOpen(false);
  // Sub-pages (industry.html etc) don't render Pricing / Instructor / FAQ — route those nav links back to the homepage.
  const prefix = onIndustryPage ? '/' : '';
  return (
    <header className="topbar">
      <div className="brand">
        <Mark size={28}/>
        <span>404 TABLE</span>
      </div>
      <nav className={menuOpen ? 'open' : ''}>
        <a href={`${prefix}#pricing`} onClick={close}>方案</a>
        <a href={`${prefix}#instructor`} onClick={close}>講師</a>
        <a href={`${prefix}#faq`} onClick={close}>FAQ</a>
      </nav>
      <div className="topbar-right">
        <a href="#signup" className="cta">立即報名 →</a>
        <button className="hamburger" onClick={() => setMenuOpen(m => !m)} aria-label="選單">
          {menuOpen ? '✕' : '☰'}
        </button>
      </div>
    </header>
  );
};

// ── Hero ────────────────────────────────
const HERO_VARIANTS = {
  default: {
    h1: <><span className="strike">2 小時</span>會議記錄，<br/>現在 <em>10 分鐘</em>搞定。</>,
    lede: <>老闆又錄了 5 分鐘語音。<br/>客戶又發了 80 字沒標點的 LINE。<br/>合約又是 100 頁、10 分鐘後要結論。<br/>—— 你是<em>秘書</em>，不是讀心術師。</>,
  },
  line: {
    h1: <>老闆的 LINE，<br/>你<em>秒懂</em>秒回。</>,
    lede: <>一行沒標點的字，背後是 10 個待辦。<br/>你不是看不懂，是沒有工具把它攤平。<br/>—— 現在有了。</>,
  },
  overtime: {
    h1: <>準時<em>下班</em>，<br/>不是<span className="strike">妄想</span>。</>,
    lede: <>每天最後一個走，不是因為最勤快。<br/>是因為沒有工具把「老闆要的」變成「5 分鐘能交的」。<br/>—— 這堂課就是那個工具。</>,
  },
};

const Hero = () => {
  const [variant, setVariant] = useState(window.TWEAKS?.heroVariant || 'default');
  useEffect(() => {
    const handler = (e) => setVariant(e.detail?.heroVariant || 'default');
    window.addEventListener('tweaks-change', handler);
    return () => window.removeEventListener('tweaks-change', handler);
  }, []);
  const { h1, lede } = HERO_VARIANTS[variant] || HERO_VARIANTS.default;
  return (
    <section className="hero">
      <div className="hero-meta">
        <span>職能實驗室 / EST. 2026</span>
        <span>500元課程陣列 — 秘書／行政 — 第 01 季</span>
        <span>2026 春季班 / 招生中</span>
      </div>

      <h1>{h1}</h1>

      <div className="sub">
        <p className="lede">{lede}</p>
        <div className="stats">
          <div className="stat"><div className="num">20</div><div className="lbl">堂課</div></div>
          <div className="stat"><div className="num">500</div><div className="lbl">元 / 堂</div></div>
          <div className="stat"><div className="num">1 hr</div><div className="lbl">不帶作業</div></div>
        </div>
      </div>

      <div className="hero-cta-row">
        <a href="#signup" className="btn-solid">挑一堂試試 — NTD 500</a>
        <a href="#pricing" className="btn-ghost">看方案 →</a>
      </div>
    </section>
  );
};

// ── Marquee ─────────────────────────────
const Marquee = () => {
  const items = [
    '老闆錄音祕笈', '會議 10 分鐘交件', '名片秒掃歸檔術', '100 張 15 分鐘',
    '老闆 LINE 翻譯機', '雙語接待一小時套裝', '合約地雷掃描術', '5 分鐘看完 100 頁',
    '月底對帳信量產術', '80 封 10 分鐘', '老闆記憶還原術', '差勤對帳魔法',
    '報價單百變工廠', '300 人請柬不出錯', '跨時區會議終結 10 輪信',
  ];
  const makeRow = (rep) => items.map((x, i) => (
    <React.Fragment key={`${rep}-${i}`}><span>{x}</span><span className="dot">●</span></React.Fragment>
  ));
  return (
    <div className="marquee">
      <div className="marquee-track">{makeRow('a')}{makeRow('b')}{makeRow('c')}</div>
    </div>
  );
};

// ── Pain stories ────────────────────────
const PainStories = () => {
  const stories = [
    { tag: 'SCENE 01 / 14:32', t: '「會議紀錄今天下班前要。」', q: '老闆一邊講一邊走出會議室。你還在打第二點，他已經到第七點了。', ts: 'TUE 14:32:08' },
    { tag: 'SCENE 02 / 09:15', t: '「那個女客戶的電話呢？」', q: '科技業、姓陳、去年 Q3 — 然後就沒了。你抽屜翻遍，名片找不到。', ts: 'WED 09:15:44' },
    { tag: 'SCENE 03 / 23:48', t: '「明天要看合約有沒有雷。」', q: '110 頁 PDF 在你信箱躺著，老闆 10 點開會。你已經到家。', ts: 'SUN 23:48:21' },
  ];
  return (
    <section className="section">
      <div className="section-head">
        <div className="section-num"><span className="pill">02</span>那一天的那一幕</div>
        <h2 className="section-title">不是<em>能力</em>不夠，<br/>是<span className="strike">時間</span>不夠。</h2>
      </div>
      <div className="pain-grid">
        {stories.map((s, i) => (
          <div className="pain-card" key={i}>
            <div>
              <div className="scene-tag">{s.tag}</div>
              <h3>{s.t}</h3>
              <div className="quote">{s.q}</div>
            </div>
            <div className="timestamp">▍ {s.ts}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

// ── Courses ─────────────────────────────
const Courses = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="courses">
      <div className="section-head">
        <div className="section-num"><span className="pill">03</span>20 堂課陣列</div>
        <h2 className="section-title">每一堂解一個<em>那一幕</em>。<br/>離開教室 — 成果<span className="strike">沒</span>帶回家。</h2>
      </div>
      <div className="course-list">
        {(window.COURSES || []).map((c, i) => (
          <React.Fragment key={c.n}>
            <div
              className={'course-row' + (open === i ? ' open' : '')}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="num">／{c.n}</div>
              <div className="title">{c.title}</div>
              <div className="pain-line">{c.pain}</div>
              <div className="timer-pill">{c.timer}搞定</div>
              <div className="toggle">+</div>
            </div>
            <div className={'course-detail' + (open === i ? ' open' : '')}>
              <div className="course-detail-grid">
                <div className="label">／{c.n}</div>
                <div>
                  <div className="label">痛點</div>
                  <div className="body">{c.pain}</div>
                </div>
                <div>
                  <div className="label">解法</div>
                  <div className="body warn">{c.solve}</div>
                </div>
                <div>
                  <div className="label">帶走</div>
                  <div className="body">{c.take}</div>
                </div>
              </div>
            </div>
          </React.Fragment>
        ))}
      </div>
    </section>
  );
};

// ── Pricing ─────────────────────────────
const Pricing = () => (
  <section className="section" id="pricing">
    <div className="price-banner">
      <div className="price-banner-left">
        <div className="tier">單堂體驗</div>
        <div className="price-big">500<span className="unit">NTD / 堂</span></div>
        <a href="#signup" className="btn-solid" style={{marginTop: 24}}>挑一堂報名 →</a>
      </div>
      <div className="price-banner-right">
        <div className="pitch">挑一個你最痛的「那一幕」，1 小時當場做完，離開教室就能用。</div>
        <ul className="price-list">
          <li>任選 1 堂，1 小時實作</li>
          <li>不帶作業回家</li>
          <li>附 3 套提示詞模板</li>
          <li>同系列累積購買享折抵</li>
        </ul>
      </div>
    </div>
  </section>
);

// ── Industries ──────────────────────────
const IndustriesSection = () => (
  <section className="section" id="industries">
    <div className="section-head">
      <div className="section-num"><span className="pill">04</span>30 個產業 / 30 種老闆</div>
      <h2 className="section-title">你的<em>產業</em>，<br/>有你產業的<span className="strike">地獄</span>。</h2>
    </div>
    <p className="fine" style={{ marginBottom: 24 }}>30 產業 × 3 價位 = 90 個專屬入口。</p>
    <div className="industry-grid">
      {(window.INDUSTRIES || []).map((ind, i) => (
        <a key={ind.id} href={`industry.html?id=${ind.id}`} className="industry-cell">
          <div className="idx">／{String(i + 1).padStart(2, '0')}</div>
          <div className="name">{ind.zh}</div>
          <div className="arrow">→ 進入</div>
        </a>
      ))}
    </div>
  </section>
);

// ── Metrics ─────────────────────────────
const Metrics = () => (
  <section className="metrics">
    <div className="metric">
      <div className="num">120<span className="small">×</span></div>
      <div className="lbl">效率提升</div>
      <div className="desc">2 小時的會議紀錄，10 分鐘交件 — 學員實測中位數。</div>
    </div>
    <div className="metric">
      <div className="num">96<span className="small">%</span></div>
      <div className="lbl">回購率</div>
      <div className="desc">第一堂上完的學員中，96% 一個月內報第二堂。</div>
    </div>
    <div className="metric">
      <div className="num">3<span className="small">套</span></div>
      <div className="lbl">提示詞模板</div>
      <div className="desc">每堂課帶走 3 套個人化提示詞，下班就能用。</div>
    </div>
    <div className="metric">
      <div className="num">0<span className="small">頁</span></div>
      <div className="lbl">作業</div>
      <div className="desc">離開教室時成果已經做出來，絕不帶作業回家。</div>
    </div>
  </section>
);

// ── Proof ───────────────────────────────
const Proof = () => (
  <section className="section">
    <div className="section-head">
      <div className="section-num"><span className="pill">05</span>學員回響</div>
      <h2 className="section-title">他們<em>不再</em>加班。</h2>
    </div>
    <div className="proof-grid">
      <div className="proof-quote">
        <div className="mark">"</div>
        <div className="text">
          上完《老闆錄音祕笈》那天回辦公室，老闆 5 點半丟給我 90 分鐘的會議錄音。<br/>
          —— 我 6 點 12 分把三版交件甩在他桌上，準時下班。
        </div>
        <div className="who">▍ 林小姐 / 製造業總經理特助 / 年資 8 年</div>
      </div>
      <div className="proof-side">
        <h4>「下班前交件」<br/>從口號變日常。</h4>
        <p>我們的設計原則只有一條：離開教室時，今天的工作已經交了。不是 demo，是你今天回去就能用、能交、能準時下班的工作流。</p>
      </div>
    </div>
  </section>
);

// ── Instructor ──────────────────────────
const Instructor = () => (
  <section className="section" id="instructor">
    <div className="section-head">
      <div className="section-num"><span className="pill">06</span>講師</div>
      <h2 className="section-title">設計者本身，<br/>就<em>當過</em>那個秘書。</h2>
    </div>
    <div className="instructor">
      <div className="photo">
        <img
          src="/instructor.jpg"
          alt="陳知行 — 404 TABLE 創辦人"
          width="1122"
          height="1402"
          loading="lazy"
          style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
        />
      </div>
      <div className="bio">
        <h3>陳<em style={{ fontStyle: 'italic', color: 'var(--warn)' }}>知行</em></h3>
        <div className="role">創辦人 / 前 上市公司董事長特助</div>
        <p className="desc">12 年董事長特助資歷。看過 5 個老闆、3 種產業、無數次「現在馬上要」的崩潰瞬間。設計這 20 堂課，是把自己 12 年踩過的坑，變成 2 小時就能走完的捷徑。</p>
        <div className="credentials">
          <div className="cred"><div className="num">12<span style={{ fontSize: 18, fontFamily: 'var(--sans)', opacity: 0.6 }}>yr</span></div><div className="lbl">特助實戰</div></div>
          <div className="cred"><div className="num">5<span style={{ fontSize: 18, fontFamily: 'var(--sans)', opacity: 0.6 }}>位</span></div><div className="lbl">老闆服侍</div></div>
          <div className="cred"><div className="num">2,400<span style={{ fontSize: 18, fontFamily: 'var(--sans)', opacity: 0.6 }}>+</span></div><div className="lbl">學員結業</div></div>
        </div>
      </div>
    </div>
  </section>
);

// ── FAQ ─────────────────────────────────
const FAQ = () => {
  const faqs = [
    { q: '我完全不會寫程式、不會用 AI，跟得上嗎？', a: '課程全部以「滑手機等級」為設計基準。沒有程式、沒有指令列、沒有 API。你會的，就是手機錄音、複製貼上、按一個按鈕。我們對自己的要求是：教室裡最不熟科技的那一位，也要在課程結束時當場交出成果。' },
    { q: '課程是線上還是實體？', a: '主推實體面授（台北 / 台中 / 高雄），人數上限 12 人，講師現場逐一檢查每位學員的成果。線上同步直播班另開，但作業檢核機制不同 — 報名前我們會跟你確認。' },
    { q: '為什麼 500 元這麼便宜？是不是有後續推銷？', a: '500 元是「試水溫」階。我們的邏輯是：你上得爽就會自己回來，所以第一堂便宜得跟一杯精品咖啡一樣。不會在課堂上推銷，但你會收到下一堂的訊息 —— 因為那時候你已經想再上了。' },
    { q: '我用的不是 ChatGPT，是 Claude / Gemini / 其他，可以嗎？', a: '可以。所有提示詞模板我們提供「跨平台版本」，並現場示範同一份提示詞在三大平台上的差異。你帶哪個來，我們調哪個。' },
    { q: '我們公司可以包班嗎？', a: '可以。最低 8 人成班，會依照貴公司流程客製教材，並提供 90 天落地陪跑。請透過報名表單或來信洽詢。' },
  ];
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="section-head">
        <div className="section-num"><span className="pill">07</span>常見問題</div>
        <h2 className="section-title">你<em>已經</em>在猶豫了。</h2>
      </div>
      <div className="faq-list">
        {faqs.map((f, i) => (
          <div key={i} className={'faq-item' + (open === i ? ' open' : '')} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="faq-q">
              <div className="q-text">Q.{String(i + 1).padStart(2, '0')} — {f.q}</div>
              <div className="q-toggle">+</div>
            </div>
            <div className="faq-a">{f.a}</div>
          </div>
        ))}
      </div>
    </section>
  );
};

const SHEET_URL = 'https://script.google.com/macros/s/AKfycbzvmN838Uji5413-Of7oT8RNhTdFmLtdBlL_0uMuZmotzoT0YeYAwUmItpdqGASQDlE_A/exec';

// ── Signup ──────────────────────────────
const Signup = ({ source = 'main' }) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [fields, setFields] = useState({ name: '', email: '', company: '', title: '', industry: '' });

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setError('');

    // 1) 寫一份 lead 到 Google Sheets（不等回應，no-cors fire-and-forget）
    fetch(SHEET_URL, {
      method: 'POST',
      mode: 'no-cors',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...fields, source, intent: 'paid_checkout' }),
    }).catch(() => {});

    // 2) 觸發 Meta Pixel Lead（廣告優化用，付款前就觸發）
    if (window.fbq) window.fbq('track', 'Lead', { content_name: '404 TABLE 1堂課' });
    if (window.gtag) window.gtag('event', 'generate_lead');

    // 3) 跳 Recur Hosted Checkout
    try {
      if (!window.RecurCheckout) throw new Error('金流尚未載入，請重新整理頁面');
      const recur = window.RecurCheckout.init({ publishableKey: window.RECUR_PK });
      await recur.redirectToCheckout({
        productId: window.RECUR_PID,
        customerEmail: fields.email,
        successUrl: window.location.origin + '/success.html?session_id={CHECKOUT_SESSION_ID}',
        cancelUrl: window.location.origin + '/#signup',
        metadata: {
          name: fields.name,
          company: fields.company,
          title: fields.title,
          industry: fields.industry,
          source,
        },
      });
    } catch (err) {
      setError(err.message || '結帳失敗，請稍後再試');
      setLoading(false);
    }
  };

  const set = (k) => (e) => setFields(f => ({ ...f, [k]: e.target.value }));

  return (
    <section className="signup" id="signup">
      <div className="signup-inner">
        <div>
          <h2>停止<em>原地</em>加班。<br/>從一堂 <em>500</em> 開始。</h2>
          <p className="lede">填表後直接付款 NT$500，我們會在 24 小時內聯繫你確認上課場次（北中高實體 / 線上同步）。沒有電話騷擾。</p>
        </div>
        <form className="signup-form" onSubmit={handleSubmit}>
          <input style={{ display: 'none' }} aria-hidden="true" tabIndex="-1" name="_hp" autoComplete="off"/>
          <div className="form-row">
            <input required placeholder="姓名 / Name" value={fields.name} onChange={set('name')}/>
            <input required type="email" placeholder="Email" value={fields.email} onChange={set('email')}/>
          </div>
          <div className="form-row">
            <input placeholder="公司 / Company" value={fields.company} onChange={set('company')}/>
            <input placeholder="職稱 / Title" value={fields.title} onChange={set('title')}/>
          </div>
          <select required value={fields.industry} onChange={set('industry')}>
            <option value="" disabled>選擇你的產業 — 30 個全有 ▾</option>
            {(window.INDUSTRIES || []).map(ind => <option key={ind.id} value={ind.id}>{ind.zh}</option>)}
            <option value="other">其他</option>
          </select>
          {error && <p style={{ color: 'var(--warn)', fontFamily: 'var(--mono)', fontSize: 12 }}>{error}</p>}
          <button type="submit" disabled={loading}>{loading ? '前往付款⋯' : '立即報名 NT$500 →'}</button>
          <p className="consent">送出後跳轉至 Recur（PAYUNi）安全付款頁。完成付款後 24 小時內專人聯繫排課。付款受 PAYUNi 統一金流保護，PAYUNi 將寄送電子收據至報名 Email。</p>
        </form>
      </div>
    </section>
  );
};

// ── Footer ──────────────────────────────
const Foot = ({ onIndustryPage = false }) => {
  const prefix = onIndustryPage ? '/' : '';
  return (
  <footer className="foot">
    <div className="foot-grid">
      <div className="brand-blk">
        <Mark size={56} color="#F5F2EC"/>
        <p>404 TABLE — 為被「現在馬上要」逼瘋的職場人，做的 AI 賦能課程。</p>
      </div>
      <div>
        <h5>COURSES</h5>
        <ul>
          <li><a href="#signup">秘書 / 行政（已開）</a></li>
          <li><span style={{ opacity: 0.4 }}>行銷企劃（即將）</span></li>
          <li><span style={{ opacity: 0.4 }}>法務（即將）</span></li>
          <li><span style={{ opacity: 0.4 }}>會計（即將）</span></li>
          <li><span style={{ opacity: 0.4 }}>業務（即將）</span></li>
          <li><span style={{ opacity: 0.4 }}>人資（即將）</span></li>
        </ul>
      </div>
      <div>
        <h5>ABOUT</h5>
        <ul>
          <li><a href={`${prefix}#instructor`}>講師</a></li>
          <li><span style={{ opacity: 0.4 }}>關於我們（即將）</span></li>
          <li><span style={{ opacity: 0.4 }}>媒體露出（即將）</span></li>
          <li><a href="#signup">合作邀約</a></li>
        </ul>
      </div>
    </div>
    <div className="foot-bottom">
      <span>© 2026 404 TABLE ｜ 個人經營 ｜ 林泓賢</span>
      <span style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
        <a href="/privacy.html">隱私</a>
        <a href="/terms.html">條款</a>
        <a href="/refund.html">退款</a>
        <a href="/payment-info.html">付款</a>
        <a href="/contact.html">客服</a>
      </span>
    </div>
  </footer>
  );
};

// ── App ─────────────────────────────────
const App = () => (
  <ErrorBoundary>
    <TopBar/>
    <Hero/>
    <Marquee/>
    <PainStories/>
    <Courses/>
    <Metrics/>
    <Pricing/>
    <IndustriesSection/>
    <Proof/>
    <Instructor/>
    <FAQ/>
    <Signup/>
    <Foot/>
  </ErrorBoundary>
);

Object.assign(window, {
  App, Mark, TopBar, Hero, Marquee, PainStories, Courses,
  Pricing, IndustriesSection, Metrics, Proof, Instructor, FAQ, Signup, Foot,
  ErrorBoundary,
});