/* Codotx — Claude Code x Astro WordPress deck
   All slides live here. Mounts into each <section> via ReactDOM. */

const TYPE_SCALE = {
  display: 148,
  title: 88,
  titleSm: 64,
  subtitle: 44,
  body: 32,
  bodySm: 28,
  small: 22,
  eyebrow: 20
};

const SPACING = {
  paddingTop: 100,
  paddingBottom: 96,
  paddingX: 120,
  titleGap: 56,
  itemGap: 32
};

const C = {
  ink: "#222828",
  inkDeep: "#0F1111",
  sub: "#5a6262",
  light: "#8a9292",
  yellow: "#FFDC73",
  yellowHover: "#F5CF55",
  bg: "#FFFFFF",
  bg2: "#F5F7F7",
  border: "#F0F2F2",
  borderMid: "#D9D9D9"
};

/* ---------- shared atomic bits ---------- */

const Frame = ({ children, bg = C.bg, pad = true, style = {} }) =>
<div
  style={{
    width: "100%",
    height: "100%",
    background: bg,
    color: bg === C.inkDeep || bg === C.ink ? "#fff" : C.ink,
    fontFamily: '"Outfit","Noto Sans TC",sans-serif',
    padding: pad ?
    `${SPACING.paddingTop}px ${SPACING.paddingX}px ${SPACING.paddingBottom}px` :
    0,
    boxSizing: "border-box",
    position: "relative",
    overflow: "hidden",
    ...style
  }}>
  
    {children}
  </div>;


const Eyebrow = ({ children, color }) =>
<div
  style={{
    fontSize: TYPE_SCALE.eyebrow,
    fontWeight: 500,
    letterSpacing: "0.2em",
    textTransform: "uppercase",
    color: color || C.sub,
    fontFamily: '"Outfit",sans-serif'
  }}>
  
    {children}
  </div>;


const Wordmark = ({ size = 40, inverse = false }) =>
<span
  style={{
    fontFamily: '"Sansation","Outfit",sans-serif',
    fontWeight: 700,
    fontSize: size,
    letterSpacing: "-0.01em",
    color: inverse ? "#fff" : C.ink,
    lineHeight: 1
  }}>
  
    Codotx
  </span>;


const Highlight = ({ children }) =>
<span
  style={{
    background: `linear-gradient(transparent 62%, ${C.yellow} 62%)`,
    padding: "0 2px"
  }}>
  
    {children}
  </span>;


const PageNumFooter = ({ n, total, inverse = false }) =>
<div
  style={{
    position: "absolute",
    left: SPACING.paddingX,
    right: SPACING.paddingX,
    bottom: 44,
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    fontSize: 18,
    fontWeight: 500,
    color: inverse ? "rgba(255,255,255,0.55)" : C.light,
    letterSpacing: "0.08em"
  }}>
  
    <Wordmark size={22} inverse={inverse} />
    <span>
      {String(n).padStart(2, "0")} / {String(total).padStart(2, "0")}
    </span>
  </div>;


/* ---------- COVER (3 variants via tweaks) ---------- */

function CoverA() {
  // Variant A — bold yellow block, poster-style
  return (
    <Frame pad={false} bg={C.bg}>
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          height: "100%"
        }}>
        
        {/* LEFT — copy */}
        <div
          style={{
            padding: `96px ${SPACING.paddingX}px 96px ${SPACING.paddingX}px`,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between"
          }}>
          
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 16
            }}>
            
            <Wordmark size={36} />
            <span
              style={{
                fontSize: 16,
                fontWeight: 500,
                letterSpacing: "0.15em",
                textTransform: "uppercase",
                color: C.sub,
                paddingLeft: 16,
                borderLeft: `1px solid ${C.borderMid}`
              }}>
              
              Tech Talk · 2026
            </span>
          </div>

          <div>
            <div
              style={{
                fontSize: TYPE_SCALE.eyebrow,
                fontWeight: 500,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: C.sub,
                marginBottom: 40
              }}>
              
              Claude Code × Blog Setup · 06
            </div>
            <h1
              style={{
                fontSize: 108,
                fontWeight: 600,
                lineHeight: 0.96,
                letterSpacing: "-0.03em",
                margin: 0,
                fontFamily: '"Sansation","Outfit",sans-serif'
              }}>
              
              Solve for
              <br />
              <span style={{ color: C.ink }}>multi-user</span>
              <br />
              <span style={{ color: C.yellow }}>CMS.</span>
            </h1>
            <div
              style={{
                fontSize: 36,
                fontWeight: 500,
                lineHeight: 1.4,
                color: C.ink,
                marginTop: 44,
                maxWidth: 640
              }}>
              
              用 <Highlight>WordPress 當 Astro 的後台</Highlight>，
              <br />
              讓同事也能一起寫稿。
            </div>
          </div>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 20,
              fontSize: 20,
              fontWeight: 500,
              color: C.sub
            }}>
            
            <span>Oberon Lai</span>
            <span style={{ color: C.border }}>·</span>
            <span>@codotx</span>
            <span style={{ color: C.border }}>·</span>
            <span>10 min</span>
          </div>
        </div>

        {/* RIGHT — yellow poster */}
        <div
          style={{
            background: C.yellow,
            position: "relative",
            overflow: "hidden",
            display: "flex",
            alignItems: "center",
            justifyContent: "center"
          }}>
          
          <div
            style={{
              position: "absolute",
              top: 48,
              right: 56,
              fontSize: 16,
              fontWeight: 600,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: C.ink
            }}>
            
            Astro × WordPress
          </div>
          <div
            style={{
              position: "absolute",
              bottom: 48,
              left: 56,
              fontSize: 16,
              fontWeight: 500,
              letterSpacing: "0.18em",
              textTransform: "uppercase",
              color: C.ink
            }}>
            
            codotx.com / news / 06
          </div>

          {/* giant X */}
          <div
            style={{
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 640,
              fontWeight: 700,
              lineHeight: 0.8,
              color: C.ink,
              letterSpacing: "-0.04em",
              position: "relative"
            }}>
            
            x
          </div>

          {/* stamp */}
          <div
            style={{
              position: "absolute",
              top: 120,
              left: 56,
              width: 180,
              height: 180,
              borderRadius: "50%",
              border: `2px solid ${C.ink}`,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              flexDirection: "column",
              transform: "rotate(-8deg)",
              fontFamily: '"Sansation","Outfit",sans-serif'
            }}>
            
            <div style={{ fontSize: 14, fontWeight: 600, letterSpacing: "0.2em" }}>
              EPISODE
            </div>
            <div style={{ fontSize: 72, fontWeight: 700, lineHeight: 1 }}>06</div>
            <div style={{ fontSize: 12, fontWeight: 500, letterSpacing: "0.15em" }}>
              FINALE
            </div>
          </div>
        </div>
      </div>
    </Frame>);

}

function CoverB() {
  // Variant B — dark editorial, full typographic
  return (
    <Frame pad={false} bg={C.inkDeep}>
      <div
        style={{
          width: "100%",
          height: "100%",
          padding: `88px ${SPACING.paddingX}px 80px`,
          boxSizing: "border-box",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          color: "#fff",
          position: "relative"
        }}>
        
        {/* top bar */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center"
          }}>
          
          <Wordmark size={32} inverse />
          <div
            style={{
              fontSize: 16,
              fontWeight: 500,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: "rgba(255,255,255,0.55)"
            }}>
            
            Tech Talk / 10 min
          </div>
        </div>

        {/* center */}
        <div style={{ maxWidth: 1500 }}>
          <div
            style={{
              fontSize: 22,
              fontWeight: 500,
              letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: C.yellow,
              marginBottom: 44
            }}>
            
            Claude Code × Blog Setup · 06
          </div>
          <div
            style={{
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 96,
              fontWeight: 700,
              lineHeight: 1.02,
              letterSpacing: "-0.03em",
              marginBottom: 36
            }}>
            
            一個人寫部落格
            <br />
            很快。
            <br />
            <span style={{ color: C.yellow }}>
              三個人一起寫，就卡住。
            </span>
          </div>
          <div
            style={{
              fontSize: 32,
              fontWeight: 400,
              lineHeight: 1.5,
              color: "rgba(255,255,255,0.75)",
              maxWidth: 1100
            }}>
            
            這場 talk 在講：怎麼用 WordPress 當 Astro 的後台，
            <br />
            讓不寫程式的同事也能一起上稿。
          </div>
        </div>

        {/* bottom */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            borderTop: "1px solid rgba(255,255,255,0.12)",
            paddingTop: 32
          }}>
          
          <div>
            <div
              style={{
                fontSize: 14,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: "rgba(255,255,255,0.5)",
                marginBottom: 8
              }}>
              
              Speaker
            </div>
            <div style={{ fontSize: 28, fontWeight: 600 }}>Oberon Lai</div>
            <div style={{ fontSize: 18, color: "rgba(255,255,255,0.6)", marginTop: 4 }}>
              想點創意科技 Codotx · 創辦人
            </div>
          </div>
          <div style={{ textAlign: "right" }}>
            <div
              style={{
                fontSize: 14,
                letterSpacing: "0.2em",
                textTransform: "uppercase",
                color: "rgba(255,255,255,0.5)",
                marginBottom: 8
              }}>
              
              Tagline
            </div>
            <div
              style={{
                fontFamily: '"Sansation","Outfit",sans-serif',
                fontSize: 30,
                fontWeight: 700
              }}>
              
              Solve for <span style={{ color: C.yellow }}>x</span>.
            </div>
          </div>
        </div>
      </div>
    </Frame>);

}

function CoverC() {
  // Variant C — minimalist magazine, large number
  return (
    <Frame pad={false} bg={C.bg2}>
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "grid",
          gridTemplateColumns: "1.3fr 1fr"
        }}>
        
        {/* LEFT */}
        <div
          style={{
            padding: `88px 0 80px ${SPACING.paddingX}px`,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            position: "relative"
          }}>
          
          <Wordmark size={32} />

          <div>
            <div
              style={{
                fontSize: 18,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                color: C.sub,
                marginBottom: 28
              }}>
              
              Issue · 06 ─── Finale
            </div>
            <h1
              style={{
                fontFamily: '"Sansation","Outfit",sans-serif',
                fontSize: 84,
                fontWeight: 700,
                lineHeight: 1.04,
                letterSpacing: "-0.025em",
                margin: 0,
                color: C.ink
              }}>
              
              多人共同管理的
              <br />
              Astro WordPress
              <br />
              <span style={{ color: C.sub, fontWeight: 400 }}>方案。</span>
            </h1>
            <div
              style={{
                fontSize: 28,
                fontWeight: 400,
                lineHeight: 1.55,
                color: C.sub,
                marginTop: 40,
                maxWidth: 720
              }}>
              
              Claude Code x 部落格架設系列的完結篇 —
              <br />
              把靜態網站跟熟悉的後台縫在一起。
            </div>
          </div>

          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 16,
              fontSize: 18,
              color: C.sub
            }}>
            
            <div
              style={{
                width: 40,
                height: 40,
                borderRadius: "50%",
                background: C.ink,
                color: "#fff",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontWeight: 600,
                fontFamily: '"Sansation",sans-serif'
              }}>
              
              O
            </div>
            <span style={{ fontWeight: 600, color: C.ink }}>Oberon Lai</span>
            <span>·</span>
            <span>Founder, Codotx</span>
            <span>·</span>
            <span>2026.4.24</span>
          </div>
        </div>

        {/* RIGHT — brand image */}
        <div
          style={{
            position: "relative",
            overflow: "hidden",
            background: "#F3F1FB"
          }}>
          <img
            src="assets/cover-astro-wp.png"
            alt="Astro + WordPress"
            style={{
              position: "absolute",
              inset: 0,
              width: "100%",
              height: "100%",
              objectFit: "cover",
              objectPosition: "center"
            }} />
          

          <div
            style={{
              position: "absolute",
              top: 60,
              left: 60,
              right: 60,
              display: "flex",
              justifyContent: "space-between",
              fontSize: 16,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: C.ink,
              fontWeight: 600
            }}>
            
            <span>Chapter</span>
            <span>Finale</span>
          </div>

          <div
            style={{
              position: "absolute",
              bottom: 48,
              left: 60,
              right: 60,
              display: "flex",
              justifyContent: "space-between",
              alignItems: "flex-end",
              color: C.ink
            }}>
            
            <div
              style={{
                fontFamily: '"Sansation","Outfit",sans-serif',
                fontSize: 22,
                fontWeight: 700
              }}>
              
              Solve for <span style={{ color: C.yellow, background: C.ink, padding: "0 8px", borderRadius: 4 }}>x</span>.
            </div>
            <div
              style={{
                fontSize: 13,
                letterSpacing: "0.18em",
                textTransform: "uppercase",
                color: C.sub,
                fontWeight: 500
              }}>
              
              Codotx · Taipei
            </div>
          </div>
        </div>
      </div>
    </Frame>);

}

function Cover({ variant }) {
  if (variant === "B") return <CoverB />;
  if (variant === "C") return <CoverC />;
  return <CoverA />;
}

/* ---------- SLIDE 2 — ABOUT ME ---------- */

function AboutMe({ page, total }) {
  return (
    <Frame>
      <Eyebrow>About the speaker</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 56px`
        }}>
        
        嗨,我是 <span style={{ color: "rgb(255, 220, 115)" }}>Oberon (歐布朗)</span>
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "360px 1fr",
          gap: 72,
          alignItems: "flex-start"
        }}>
        
        {/* Left column — avatar card */}
        <div
          style={{
            background: C.bg2,
            borderRadius: 20,
            padding: 32,
            border: `1px solid ${C.border}`
          }}>
          
          <div
            style={{
              width: "100%",
              aspectRatio: "1",
              borderRadius: 16,
              overflow: "hidden",
              marginBottom: 20,
              background: C.ink
            }}>
            <img
              src="assets/oberon.webp"
              alt="Oberon Lai"
              style={{
                width: "100%",
                height: "100%",
                objectFit: "cover",
                display: "block"
              }} />
            
          </div>
          <div
            style={{
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 32,
              fontWeight: 700,
              color: C.ink,
              lineHeight: 1.1
            }}>
            
            Oberon Lai
          </div>
          <div
            style={{
              fontSize: 18,
              color: C.sub,
              marginTop: 6
            }}>賴俊吾 · 創辦人


          </div>
          <div
            style={{
              marginTop: 20,
              borderTop: `1px solid ${C.border}`,
              paddingTop: 16,
              fontSize: 16,
              color: C.sub,
              lineHeight: 1.7
            }}>
            
            想點創意科技 Codotx
            <br />
            @codotx
          </div>
        </div>

        {/* Right column — stats + bio */}
        <div>
          <div
            style={{
              fontSize: TYPE_SCALE.body,
              fontWeight: 400,
              lineHeight: 1.55,
              color: C.ink,
              maxWidth: 960
            }}>
            
            從前端工程師出發，離職後全職接案
            <br />
            現在用 <Highlight>Claude Code 開發產品</Highlight>的連續創業者。
          </div>

          {/* big stats row */}
          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(3, 1fr)",
              gap: 32,
              marginTop: 56,
              borderTop: `2px solid ${C.ink}`,
              paddingTop: 32
            }}>
            
            {[
            { n: "10+", label: "年 WordPress / Web\n開發實戰經驗" },
            { n: "2021", label: "創立 Codotx\n想點創意科技" },
            { n: "100+", label: "開發自有產品\n累積客戶 100+" }].
            map((s, i) =>
            <div key={i}>
                <div
                style={{
                  fontFamily: '"Sansation","Outfit",sans-serif',
                  fontSize: 80,
                  fontWeight: 700,
                  lineHeight: 1,
                  letterSpacing: "-0.03em",
                  color: C.ink
                }}>
                
                  {s.n}
                </div>
                <div
                style={{
                  fontSize: 18,
                  color: C.sub,
                  marginTop: 12,
                  lineHeight: 1.5,
                  whiteSpace: "pre-line"
                }}>
                
                  {s.label}
                </div>
              </div>
            )}
          </div>

          <div
            style={{
              marginTop: 48,
              fontSize: 22,
              color: C.sub,
              lineHeight: 1.6
            }}>
            
            做過: WordPress 外掛 · WooCommerce 金流 · LINE 整合
            <br />
            在寫: <span style={{ color: C.ink, fontWeight: 500 }}>Claude Code 教學書 + astro-wp 套件</span>
          </div>
        </div>
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 3 — TL;DR ---------- */

function TLDR({ page, total }) {
  return (
    <Frame bg={C.bg2}>
      <Eyebrow>先講結論 · TL;DR</Eyebrow>
      <div
        style={{
          marginTop: 48,
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: 104,
          fontWeight: 700,
          lineHeight: 1.05,
          letterSpacing: "-0.03em",
          color: C.ink
        }}>
        
        把 <Highlight>WordPress</Highlight>
        <br />
        變成 Astro 的
        <br />
        <span style={{ color: C.sub }}>後台編輯器。</span>
      </div>
      <div
        style={{
          marginTop: 64,
          fontSize: 34,
          fontWeight: 400,
          lineHeight: 1.5,
          color: C.ink,
          maxWidth: 1400
        }}>
        
        工程師繼續寫 Markdown,
        <br />
        同事在熟悉的 WordPress 後台貼公告,
        <br />
        讀者看到的還是一個又快又安全的靜態站。
      </div>
      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 4 — 3 stuck scenarios ---------- */

function Scenarios({ page, total }) {
  const scenarios = [
  {
    n: "01",
    t: "出差在外",
    d: "手邊只有一台沒裝開發環境的筆電\n突然想到有篇文章的內容有錯"
  },
  {
    n: "02",
    t: "想交給同事",
    d: "部落格內容變多\n但同事看到終端機就頭痛"
  },
  {
    n: "03",
    t: "老闆業務 PM 都想進來",
    d: "部落格長成企業形象網站,\n大家都想貼公告、改文案。"
  }];

  return (
    <Frame>
      <Eyebrow>Why now</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 72px`
        }}>
        
        三個情境,整件事就卡住。
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 32
        }}>
        
        {scenarios.map((s) =>
        <div
          key={s.n}
          style={{
            background: C.bg2,
            borderRadius: 20,
            padding: "48px 40px",
            border: `1px solid ${C.border}`,
            minHeight: 440,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between"
          }}>
          
            <div
            style={{
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 72,
              fontWeight: 700,
              color: C.yellow,
              lineHeight: 1,
              letterSpacing: "-0.02em"
            }}>
            
              {s.n}
            </div>
            <div>
              <div
              style={{
                fontSize: 36,
                fontWeight: 600,
                color: C.ink,
                marginBottom: 20,
                lineHeight: 1.2
              }}>
              
                {s.t}
              </div>
              <div
              style={{
                fontSize: 22,
                lineHeight: 1.6,
                color: C.sub,
                whiteSpace: "pre-line"
              }}>
              
                {s.d}
              </div>
            </div>
          </div>
        )}
      </div>

      <div
        style={{
          marginTop: 56,
          fontSize: 28,
          fontWeight: 500,
          color: C.ink,
          textAlign: "center"
        }}>
        
        共通點 → <Highlight>內容創作的門檻被技術工具卡住</Highlight>。
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 5 — Astro missing what ---------- */

function AstroMissing({ page, total }) {
  return (
    <Frame bg={C.inkDeep}>
      <Eyebrow color="rgba(255,255,255,0.6)">Problem</Eyebrow>
      <div
        style={{
          marginTop: 48,
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: 96,
          fontWeight: 700,
          lineHeight: 1.04,
          letterSpacing: "-0.03em",
          color: "#fff"
        }}>
        
        Astro 是<br />
        <span style={{ color: C.yellow }}>開發者友善</span>的
        <br />
        靜態網站產生器。
      </div>

      <div
        style={{
          marginTop: 72,
          display: "grid",
          gridTemplateColumns: "1fr 80px 1fr",
          alignItems: "center",
          gap: 32
        }}>
        
        <div
          style={{
            background: "rgba(255,255,255,0.06)",
            border: "1px solid rgba(255,255,255,0.1)",
            borderRadius: 16,
            padding: "32px 36px",
            color: "#fff"
          }}>
          
          <div style={{ fontSize: 20, color: "rgba(255,255,255,0.6)", marginBottom: 8 }}>
            它假設
          </div>
          <div style={{ fontSize: 28, fontWeight: 500, lineHeight: 1.5 }}>
            你會用終端機 · 會 git push · 看得懂 Markdown。
          </div>
        </div>
        <div
          style={{
            fontFamily: '"Sansation",sans-serif',
            fontSize: 60,
            fontWeight: 700,
            color: C.yellow,
            textAlign: "center"
          }}>
          
          →
        </div>
        <div
          style={{
            background: C.yellow,
            borderRadius: 16,
            padding: "32px 36px",
            color: C.ink
          }}>
          
          <div style={{ fontSize: 20, color: C.sub, marginBottom: 8 }}>
            但部落格的本質是
          </div>
          <div style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.5 }}>
            「寫內容」,不是「寫程式」。
          </div>
        </div>
      </div>

      <div
        style={{
          marginTop: 56,
          fontSize: 26,
          color: "rgba(255,255,255,0.75)",
          textAlign: "center"
        }}>
        
        Astro 少一個東西 —— <span style={{ color: C.yellow, fontWeight: 600 }}>後台。</span>
      </div>

      <PageNumFooter n={page} total={total} inverse />
    </Frame>);

}

/* ---------- SLIDE 6 — Why WordPress ---------- */

function WhyWordPress({ page, total }) {
  const reasons = [
  {
    n: "01",
    t: "最多人會用的編輯器",
    d: "台灣一半以上的內容編輯碰過 WordPress,學習成本趨近於零。"
  },
  {
    n: "02",
    t: "有 WordPress Playground",
    d: "官方 WebAssembly 方案,沒有 Docker / MySQL / PHP 環境,開瀏覽器就能跑。"
  },
  {
    n: "03",
    t: "沒有人頭月費",
    d: "開源免費 · 編輯帳號想開幾個開幾個 · 內容完全放在自己家。"
  }];


  return (
    <Frame>
      <Eyebrow>Decision</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 32px`
        }}>
        
        為什麼是 WordPress?
      </h2>
      <div style={{ fontSize: 26, color: C.sub, marginBottom: 64, maxWidth: 1400 }}>
        Strapi / Sanity / Contentful / Payload... headless CMS 一大堆。
        最後選它,就三個原因。
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        {reasons.map((r, i) =>
        <div
          key={i}
          style={{
            display: "grid",
            gridTemplateColumns: "140px 1fr auto",
            gap: 48,
            alignItems: "center",
            padding: "28px 0",
            borderTop: i === 0 ? `2px solid ${C.ink}` : `1px solid ${C.border}`
          }}>
          
            <div
            style={{
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 64,
              fontWeight: 700,
              color: C.ink,
              lineHeight: 1
            }}>
            
              {r.n}
            </div>
            <div>
              <div
              style={{
                fontSize: 34,
                fontWeight: 600,
                color: C.ink,
                marginBottom: 8
              }}>
              
                {r.t}
              </div>
              <div style={{ fontSize: 22, color: C.sub, lineHeight: 1.55 }}>
                {r.d}
              </div>
            </div>
            <div
            style={{
              width: 72,
              height: 72,
              borderRadius: "50%",
              background: C.yellow,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              fontFamily: '"Sansation",sans-serif',
              fontWeight: 700,
              fontSize: 36,
              color: C.ink
            }}>
            
              ✓
            </div>
          </div>
        )}
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 7 — Architecture diagram ---------- */

function Architecture({ page, total }) {
  const Box = ({ title, sub, tag, accent }) =>
  <div
    style={{
      background: accent ? C.yellow : "#fff",
      border: accent ? "none" : `1.5px solid ${C.border}`,
      borderRadius: 16,
      padding: "24px 28px",
      boxShadow: "0 4px 6px -1px rgba(0,0,0,0.06)",
      textAlign: "center",
      minHeight: 140,
      display: "flex",
      flexDirection: "column",
      justifyContent: "center"
    }}>
    
      <div
      style={{
        fontSize: 13,
        letterSpacing: "0.2em",
        textTransform: "uppercase",
        color: C.sub,
        marginBottom: 8
      }}>
      
        {tag}
      </div>
      <div style={{ fontSize: 26, fontWeight: 600, color: C.ink, marginBottom: 6 }}>
        {title}
      </div>
      <div style={{ fontSize: 17, color: C.sub, lineHeight: 1.45 }}>
        {sub}
      </div>
    </div>;


  const Arrow = () =>
  <div
    style={{
      fontFamily: '"Sansation",sans-serif',
      fontSize: 44,
      fontWeight: 700,
      color: C.ink,
      textAlign: "center",
      lineHeight: 1
    }}>
    
      ↓
    </div>;


  return (
    <Frame bg={C.bg2}>
      <Eyebrow>Architecture</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 56px`
        }}>
        
        架構長這樣。
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          columnGap: 120,
          rowGap: 20,
          alignItems: "center",
          maxWidth: 1400,
          margin: "0 auto"
        }}>
        
        {/* sources row */}
        <Box
          tag="Source A"
          title="📝 Markdown"
          sub="工程師寫技術文章" />
        
        <Box
          tag="Source B"
          title="🖥️ WordPress"
          sub="同事寫公關稿、新聞" />
        

        <Arrow />
        <Arrow />

        {/* merge */}
        <div style={{ gridColumn: "1 / span 2", display: "flex", justifyContent: "center" }}>
          <div style={{ width: "60%" }}>
            <Box
              tag="Build"
              title="Astro build"
              sub="合併兩個來源,一次輸出"
              accent />
            
          </div>
        </div>

        <div style={{ gridColumn: "1 / span 2", display: "flex", justifyContent: "center" }}>
          <Arrow />
        </div>

        {/* output */}
        <div style={{ gridColumn: "1 / span 2", display: "flex", justifyContent: "center" }}>
          <div style={{ width: "60%" }}>
            <div
              style={{
                background: C.inkDeep,
                color: "#fff",
                borderRadius: 16,
                padding: "28px 32px",
                textAlign: "center"
              }}>
              
              <div
                style={{
                  fontSize: 13,
                  letterSpacing: "0.2em",
                  textTransform: "uppercase",
                  color: "rgba(255,255,255,0.55)",
                  marginBottom: 8
                }}>
                
                Output
              </div>
              <div style={{ fontSize: 28, fontWeight: 600, marginBottom: 6 }}>
                🌍 靜態網站 · 部署到 CDN
              </div>
              <div style={{ fontSize: 17, color: "rgba(255,255,255,0.65)" }}>
                讀者分不出哪篇誰寫的
              </div>
            </div>
          </div>
        </div>
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 8 — roles ---------- */

function Roles({ page, total }) {
  return (
    <Frame>
      <Eyebrow>Roles</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 28px`
        }}>
        
        誰寫稿?誰出版?
      </h2>
      <div style={{ fontSize: 26, color: C.sub, marginBottom: 56 }}>
        想像成<Highlight>餐廳的外場跟廚房</Highlight> — 客人不會走進廚房看設備。
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 40
        }}>
        
        {[
        {
          icon: "🖥️",
          tag: "Kitchen",
          name: "WordPress",
          role: "只負責「寫稿」",
          d: "給你和同事一個熟悉的編輯介面、\n圖片上傳、排版工具。",
          bg: C.bg2,
          fg: C.ink
        },
        {
          icon: "🌐",
          tag: "Front of house",
          name: "Astro",
          role: "負責「出版」",
          d: "把所有文章(不管誰寫的)\n編排成最終的網頁。",
          bg: C.inkDeep,
          fg: "#fff"
        }].
        map((x, i) =>
        <div
          key={i}
          style={{
            background: x.bg,
            color: x.fg,
            borderRadius: 24,
            padding: "44px 44px",
            minHeight: 440,
            display: "flex",
            flexDirection: "column",
            justifyContent: "space-between",
            position: "relative",
            overflow: "hidden"
          }}>
          
            <div>
              <div style={{ fontSize: 64, lineHeight: 1, marginBottom: 16 }}>
                {x.icon}
              </div>
              <div
              style={{
                fontSize: 14,
                letterSpacing: "0.22em",
                textTransform: "uppercase",
                color: x.fg === "#fff" ? "rgba(255,255,255,0.5)" : C.sub,
                marginBottom: 8
              }}>
              
                {x.tag}
              </div>
              <div
              style={{
                fontFamily: '"Sansation","Outfit",sans-serif',
                fontSize: 56,
                fontWeight: 700,
                lineHeight: 1.05,
                letterSpacing: "-0.02em"
              }}>
              
                {x.name}
              </div>
            </div>
            <div>
              <div
              style={{
                fontSize: 30,
                fontWeight: 600,
                marginBottom: 14,
                color: x.fg === "#fff" ? C.yellow : C.ink
              }}>
              
                {x.role}
              </div>
              <div
              style={{
                fontSize: 22,
                lineHeight: 1.55,
                whiteSpace: "pre-line",
                color: x.fg === "#fff" ? "rgba(255,255,255,0.75)" : C.sub
              }}>
              
                {x.d}
              </div>
            </div>
          </div>
        )}
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 9 — Cloudflare tunnel ---------- */

function Tunnel({ page, total }) {
  return (
    <Frame>
      <Eyebrow>Hardest part</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 32px`
        }}>
        
        同事怎麼連到<br />
        你電腦上的 WordPress?
      </h2>
      <div style={{ fontSize: 28, color: C.sub, marginBottom: 48, maxWidth: 1400 }}>
        家裡的 Wi-Fi 只有家人能用 — 外面的朋友要用,得拉條線出來。
      </div>

      {/* tunnel diagram */}
      <div
        style={{
          background: C.bg2,
          borderRadius: 20,
          padding: "48px 56px",
          display: "grid",
          gridTemplateColumns: "1fr auto 1fr auto 1fr",
          alignItems: "center",
          gap: 24,
          marginBottom: 40
        }}>
        
        {[
        { icon: "💻", t: "你的筆電", s: "WordPress running" },
        null,
        { icon: "🌉", t: "Cloudflare Tunnel", s: "免費拉線服務", accent: true },
        null,
        { icon: "👥", t: "遠端同事", s: "瀏覽器開網址" }].
        map((x, i) => {
          if (!x) {
            return (
              <div
                key={i}
                style={{
                  fontFamily: '"Sansation",sans-serif',
                  fontSize: 48,
                  fontWeight: 700,
                  color: C.ink,
                  textAlign: "center"
                }}>
                
                ─
              </div>);

          }
          return (
            <div
              key={i}
              style={{
                background: x.accent ? C.yellow : "#fff",
                border: x.accent ? "none" : `1.5px solid ${C.border}`,
                borderRadius: 16,
                padding: "28px 24px",
                textAlign: "center"
              }}>
              
              <div style={{ fontSize: 52, marginBottom: 12 }}>{x.icon}</div>
              <div style={{ fontSize: 24, fontWeight: 600, color: C.ink, marginBottom: 4 }}>
                {x.t}
              </div>
              <div style={{ fontSize: 16, color: C.sub }}>{x.s}</div>
            </div>);

        })}
      </div>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 24
        }}>
        
        <div
          style={{
            border: `2px solid ${C.ink}`,
            borderRadius: 16,
            padding: "24px 28px"
          }}>
          
          <div style={{ fontSize: 20, fontWeight: 600, color: C.ink, marginBottom: 8 }}>
            有自己的網域
          </div>
          <div style={{ fontSize: 18, color: C.sub, lineHeight: 1.55 }}>
            <code style={{ color: C.ink, fontWeight: 500 }}>wp.你的公司.com</code> — 書籤一存,同事長期用。
          </div>
        </div>
        <div
          style={{
            border: `1.5px solid ${C.border}`,
            borderRadius: 16,
            padding: "24px 28px",
            background: C.bg2
          }}>
          
          <div style={{ fontSize: 20, fontWeight: 600, color: C.ink, marginBottom: 8 }}>
            沒有也沒關係
          </div>
          <div style={{ fontSize: 18, color: C.sub, lineHeight: 1.55 }}>
            <code style={{ color: C.ink }}>xxx.trycloudflare.com</code> — 臨時網址,demo 給客戶看一下剛好。
          </div>
        </div>
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 10 — Install (one line) ---------- */

function Install({ page, total }) {
  return (
    <Frame bg={C.inkDeep}>
      <Eyebrow color="rgba(255,255,255,0.6)">Install</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 32px`,
          color: "#fff"
        }}>
        
        安裝?一句話丟給
        <br />
        <span style={{ color: C.yellow }}>Claude Code</span>。
      </h2>

      {/* terminal card */}
      <div
        style={{
          background: "#0A0C0C",
          border: "1px solid rgba(255,255,255,0.1)",
          borderRadius: 16,
          overflow: "hidden",
          maxWidth: 1400,
          marginTop: 40
        }}>
        
        <div
          style={{
            background: "rgba(255,255,255,0.04)",
            padding: "12px 20px",
            display: "flex",
            alignItems: "center",
            gap: 10,
            borderBottom: "1px solid rgba(255,255,255,0.08)"
          }}>
          
          <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ff5f56" }} />
          <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#ffbd2e" }} />
          <div style={{ width: 12, height: 12, borderRadius: "50%", background: "#27c93f" }} />
          <div
            style={{
              marginLeft: 16,
              fontSize: 14,
              color: "rgba(255,255,255,0.5)",
              fontFamily: "ui-monospace, Menlo, monospace"
            }}>
            
            ~ / my-astro-blog ─ claude
          </div>
        </div>
        <div
          style={{
            padding: "36px 40px",
            fontFamily: "ui-monospace, Menlo, monospace",
            fontSize: 26,
            lineHeight: 1.7,
            color: "#fff"
          }}>
          
          <div style={{ color: C.yellow }}>
            <span style={{ color: "rgba(255,255,255,0.4)" }}>{"> "}</span>
            幫我安裝 astro-wp 把 WordPress 當成 headless CMS
          </div>
          <div style={{ color: "rgba(255,255,255,0.75)", paddingLeft: 32, marginTop: 8 }}>
            專案網址:{" "}
            <span style={{ color: C.yellow }}>
              https://github.com/oberonlai/astro-wp
            </span>
          </div>
          <div
            style={{
              marginTop: 28,
              color: "rgba(255,255,255,0.5)",
              fontSize: 20
            }}>
            
            ⋯ reading README
            <br />
            ⋯ installing dependencies
            <br />
            ⋯ wiring content sources
            <br />
            ⋯ starting WordPress Playground
            <br />
            <span style={{ color: "#27c93f" }}>✓ done in ~5–7 min</span>
          </div>
        </div>
      </div>

      <div
        style={{
          marginTop: 36,
          fontSize: 22,
          color: "rgba(255,255,255,0.65)",
          textAlign: "center"
        }}>
        
        不用自己敲指令 · 不用自己搬檔案 · 中間沒有人工介入
      </div>

      <PageNumFooter n={page} total={total} inverse />
    </Frame>);

}

/* ---------- SLIDE 11 — Limitation ---------- */

function Limitation({ page, total }) {
  return (
    <Frame>
      <Eyebrow>Honest caveat</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 48px`
        }}>
        
        最明顯的限制 —— <br />
        <Highlight>必須有一台電腦開著。</Highlight>
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 32
        }}>
        
        <div
          style={{
            background: C.bg2,
            borderRadius: 20,
            padding: "40px 40px",
            border: `1px solid ${C.border}`
          }}>
          
          <div
            style={{
              fontSize: 18,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: C.sub,
              marginBottom: 16
            }}>
            
            如果只是小團隊
          </div>
          <div
            style={{
              fontSize: 30,
              fontWeight: 600,
              color: C.ink,
              lineHeight: 1.3,
              marginBottom: 16
            }}>
            
            找一台內部備用電腦專門跑 WordPress。
          </div>
          <div style={{ fontSize: 22, color: C.sub, lineHeight: 1.6 }}>
            放辦公室角落 · 接電源 · 網路穩定就好。成本只有電費。
          </div>
        </div>

        <div
          style={{
            background: C.ink,
            color: "#fff",
            borderRadius: 20,
            padding: "40px 40px"
          }}>
          
          <div
            style={{
              fontSize: 18,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: "rgba(255,255,255,0.55)",
              marginBottom: 16
            }}>
            
            如果分散時區 · 要 24h
          </div>
          <div
            style={{
              fontSize: 30,
              fontWeight: 600,
              lineHeight: 1.3,
              marginBottom: 16,
              color: "#fff"
            }}>
            
            再把 WordPress 搬到雲端主機。
          </div>
          <div style={{ fontSize: 22, color: "rgba(255,255,255,0.7)", lineHeight: 1.6 }}>
            <span style={{ color: C.yellow, fontWeight: 600 }}>設定檔改一行網址</span>
            就好,無痛切換。
          </div>
        </div>
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 12 — fit / not fit ---------- */

function FitMatrix({ page, total }) {
  const fit = [
  "已經用 Astro 做部落格,想讓非工程師同事進來上稿",
  "想要熟悉的 WordPress 介面,但不想維護 WordPress 主機",
  "在沒有開發環境的電腦上臨時改文章",
  "企業形象網站,行銷/業務/PM 各管一塊"];

  const notFit = [
  "需要 24h 自動發布,身邊沒有隨時開機的電腦",
  "依賴少數很吃資料庫底層的 WordPress 外掛",
  "單純一個人寫部落格,沒有協作需求 — 直接寫 Markdown 最快"];


  return (
    <Frame bg={C.bg2}>
      <Eyebrow>Fit assessment</Eyebrow>
      <h2
        style={{
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: TYPE_SCALE.title,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.025em",
          margin: `${SPACING.titleGap}px 0 48px`
        }}>
        
        適合你嗎?
      </h2>

      <div
        style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          gap: 32
        }}>
        
        <div
          style={{
            background: "#fff",
            borderRadius: 20,
            padding: "36px 36px",
            border: `2px solid ${C.ink}`
          }}>
          
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 14,
              marginBottom: 28
            }}>
            
            <div
              style={{
                width: 44,
                height: 44,
                borderRadius: "50%",
                background: C.yellow,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontWeight: 700,
                fontSize: 24,
                color: C.ink,
                fontFamily: '"Sansation",sans-serif'
              }}>
              
              ✓
            </div>
            <div style={{ fontSize: 32, fontWeight: 600, color: C.ink }}>適合</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {fit.map((s, i) =>
            <li
              key={i}
              style={{
                fontSize: 21,
                color: C.ink,
                lineHeight: 1.55,
                paddingLeft: 22,
                position: "relative",
                marginBottom: 16
              }}>
              
                <span
                style={{
                  position: "absolute",
                  left: 0,
                  top: 10,
                  width: 8,
                  height: 8,
                  borderRadius: "50%",
                  background: C.yellow
                }} />
              
                {s}
              </li>
            )}
          </ul>
        </div>

        <div
          style={{
            background: "#fff",
            borderRadius: 20,
            padding: "36px 36px",
            border: `1.5px solid ${C.border}`
          }}>
          
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 14,
              marginBottom: 28
            }}>
            
            <div
              style={{
                width: 44,
                height: 44,
                borderRadius: "50%",
                background: C.bg2,
                border: `1.5px solid ${C.borderMid}`,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                fontWeight: 700,
                fontSize: 28,
                color: C.light,
                fontFamily: '"Sansation",sans-serif'
              }}>
              
              ×
            </div>
            <div style={{ fontSize: 32, fontWeight: 600, color: C.sub }}>不適合</div>
          </div>
          <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
            {notFit.map((s, i) =>
            <li
              key={i}
              style={{
                fontSize: 21,
                color: C.sub,
                lineHeight: 1.55,
                paddingLeft: 22,
                position: "relative",
                marginBottom: 16
              }}>
              
                <span
                style={{
                  position: "absolute",
                  left: 0,
                  top: 12,
                  width: 12,
                  height: 2,
                  background: C.borderMid
                }} />
              
                {s}
              </li>
            )}
          </ul>
        </div>
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 13 — closing take ---------- */

function ClosingTake({ page, total }) {
  return (
    <Frame bg={C.yellow}>
      <Eyebrow color={C.ink}>Takeaway</Eyebrow>
      <div
        style={{
          marginTop: 80,
          fontFamily: '"Sansation","Outfit",sans-serif',
          fontSize: 124,
          fontWeight: 700,
          lineHeight: 1.02,
          letterSpacing: "-0.03em",
          color: C.ink
        }}>
        
        前台自己選技術,<br />
        後台讓同事用<br />
        <span style={{ background: C.ink, color: C.yellow, padding: "0 16px" }}>
          熟悉的工具。
        </span>
      </div>
      <div
        style={{
          marginTop: 72,
          fontSize: 32,
          fontWeight: 500,
          color: C.ink,
          lineHeight: 1.5,
          maxWidth: 1300
        }}>
        
        不追新框架,不綁雲端廠商 — 用工具鏈解問題,
        <br />
        讓<span style={{ fontWeight: 700 }}>內容自主權</span>留在自己手上。
      </div>

      <PageNumFooter n={page} total={total} />
    </Frame>);

}

/* ---------- SLIDE 14 — QR / End ---------- */

function EndQR({ page, total, qrDataUrl }) {
  return (
    <Frame bg={C.inkDeep}>
      <div
        style={{
          height: "100%",
          display: "grid",
          gridTemplateColumns: "1fr 1fr",
          alignItems: "center",
          gap: 80
        }}>
        
        {/* LEFT */}
        <div>
          <Eyebrow color="rgba(255,255,255,0.6)">Read the full post</Eyebrow>
          <div
            style={{
              marginTop: 36,
              fontFamily: '"Sansation","Outfit",sans-serif',
              fontSize: 92,
              fontWeight: 700,
              lineHeight: 1.02,
              letterSpacing: "-0.03em",
              color: "#fff"
            }}>
            
            掃我<br />
            看完整文章。
          </div>
          <div
            style={{
              marginTop: 36,
              fontSize: 24,
              color: "rgba(255,255,255,0.75)",
              lineHeight: 1.55,
              maxWidth: 640
            }}>
            
            安裝步驟、常見問題、延伸思考 —
            <br />
            還有五篇「Claude Code x 部落格架設」系列文。
          </div>
          <div
            style={{
              marginTop: 48,
              padding: "16px 24px",
              background: "rgba(255,255,255,0.06)",
              border: "1px solid rgba(255,255,255,0.12)",
              borderRadius: 12,
              fontFamily: "ui-monospace, Menlo, monospace",
              fontSize: 18,
              color: "rgba(255,255,255,0.85)",
              display: "inline-block",
              maxWidth: "100%",
              wordBreak: "break-all"
            }}>
            
            codotx.com/news/
            <br />
            claude-code-blog-setup-multi-user-cms/
          </div>
        </div>

        {/* RIGHT — QR */}
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
          <div
            style={{
              background: "#fff",
              padding: 32,
              borderRadius: 24,
              boxShadow: "0 20px 60px rgba(0,0,0,0.4)"
            }}>
            
            {qrDataUrl ?
            <img
              src={qrDataUrl}
              alt="QR code to article"
              style={{ width: 420, height: 420, display: "block" }} /> :


            <div
              style={{
                width: 420,
                height: 420,
                background: "#f5f5f5",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                color: "#888",
                fontSize: 18
              }}>
              
                generating QR…
              </div>
            }
          </div>
          <div
            style={{
              marginTop: 28,
              fontSize: 20,
              color: "rgba(255,255,255,0.6)",
              letterSpacing: "0.15em",
              textTransform: "uppercase"
            }}>
            
            想跟真人討論?→ LINE @codotx
          </div>
        </div>
      </div>

      {/* footer */}
      <div
        style={{
          position: "absolute",
          left: SPACING.paddingX,
          right: SPACING.paddingX,
          bottom: 44,
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          borderTop: "1px solid rgba(255,255,255,0.12)",
          paddingTop: 24
        }}>
        
        <Wordmark size={24} inverse />
        <div
          style={{
            fontFamily: '"Sansation","Outfit",sans-serif',
            fontSize: 22,
            fontWeight: 700,
            color: "#fff"
          }}>
          
          Solve for <span style={{ color: C.yellow }}>x</span>.
        </div>
        <span
          style={{
            fontSize: 14,
            letterSpacing: "0.2em",
            color: "rgba(255,255,255,0.4)"
          }}>
          
          THANK YOU / {String(page).padStart(2, "0")} / {String(total).padStart(2, "0")}
        </span>
      </div>
    </Frame>);

}

/* Expose to window for main script */
Object.assign(window, {
  Cover,
  AboutMe,
  TLDR,
  Scenarios,
  AstroMissing,
  WhyWordPress,
  Architecture,
  Roles,
  Tunnel,
  Install,
  Limitation,
  FitMatrix,
  ClosingTake,
  EndQR
});