var { Button, Card, Badge, Icon, Tag } = window.GloryWaveDesignSystem_1a6704;

var LINEUP = [
  ['box', '魔方 Demo Kit', '魔方＋立面欄杆＋SPB', '2026/10 台灣能源展', 'ok'],
  ['package', 'Test Kit', 'BIPV＋SPB，台灣生產、日本推廣', '需求測試', 'info'],
  ['cpu', 'MPPT 控制器', '鈣鈦礦專用・8 通道', '開發中', 'info'],
  ['layout-grid', '立面 BIPV＋SPB', '窗單元產品', '2027 筑波示範線', 'neutral'],
  ['building-2', '立面＋SPB 儲能系統', '建物級光儲整合', '規劃中', 'neutral'],
];

function Lineup() {
  return (
    <section style={{ ...WRAP, padding: 'var(--section-y) var(--gutter) 0' }}>
      <Eyebrow>Product roadmap</Eyebrow>
      <H2>每一輪疊代，一個可出貨的產品。</H2>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,minmax(0,1fr))', gap: 'var(--space-4)' }}>
        {LINEUP.map(([icon, t, d, s, tone], i) => (
          <Card key={t} interactive accentRule={i === 0}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ color: 'var(--accent-hover)', display: 'inline-flex' }}><Icon name={icon} size={24} /></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)' }}>0{i + 1}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', fontWeight: 700, margin: '14px 0 6px' }}>{t}</h3>
            <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', lineHeight: 1.7, color: 'var(--text-secondary)', margin: '0 0 12px' }}>{d}</p>
            <Badge tone={tone}>{s}</Badge>
          </Card>
        ))}
      </div>
    </section>
  );
}

function CtaBand({ go }) {
  return (
    <section style={{ marginTop: 'var(--section-y)', background: 'var(--surface-accent)' }}>
      <div style={{ ...WRAP, padding: '56px var(--gutter)', display: 'flex', alignItems: 'center', gap: 'var(--space-8)' }}>
        <div>
          <h2 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-display-3)', fontWeight: 700, color: 'var(--on-accent)', margin: 0 }}>10 月台灣能源展，現場看魔方 Demo Kit。</h2>
          <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', color: 'var(--ink-800)', margin: '10px 0 0' }}>2026/10/14–16・魔方 Demo Kit＋SPB 與立面欄杆實機展示。</p>
        </div>
      </div>
    </section>
  );
}


function HeroB({ go }) {
  return (
    <section style={{ ...WRAP, padding: '72px var(--gutter) 0' }}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 440px), 1fr))', gap: 'var(--space-10)', alignItems: 'center' }}>
      <div>
      <Eyebrow>Perovskite façade PV × Storage</Eyebrow>
      <h1 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'clamp(32px, 3.8vw, 58px)', lineHeight: 1.15, fontWeight: 700, margin: '20px 0 0', maxWidth: 980, wordBreak: 'keep-all' }}>
        <span style={{ whiteSpace: 'nowrap' }}>建築的每一面牆，</span><br /><span style={{ whiteSpace: 'nowrap' }}>都是一座光儲電站。</span>
      </h1>
      <div style={{ marginTop: 'var(--space-8)' }}>
        <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 18, lineHeight: 1.75, color: 'var(--text-secondary)', maxWidth: 620, margin: 0 }}>
          鈣鈦礦（PSC）太陽能板半透明、輕薄，以 A4 大小的模組自由組合，可以直接取代陽台欄杆、町屋格窗與教室窗戶的玻璃：透光、保留視線，同時發電。群來能源提供從發電、電力轉換到儲能的完整光儲系統：鈣鈦礦立面板發電，專用 MPPT 控制器追蹤每個模組的電力，再由 SPB 鋰電池把電存下來。
        </p>
      </div>
      </div>
      <figure style={{ margin: 0 }}>
        <div style={{ position: 'relative' }}>
          <img src="../../assets/scenes/psc-structure.jpg" alt="PSC 鈣鈦礦模組結構分解圖" style={{ width: '100%', aspectRatio: '4 / 3', objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-md)' }} />
          <span style={{ position: 'absolute', right: 8, bottom: 8, fontFamily: 'var(--font-cjk)', fontSize: 11, color: '#fff', background: 'rgba(16,21,31,.55)', padding: '2px 6px', borderRadius: 4 }}>示意圖</span>
        </div>
        <figcaption style={{ marginTop: 'var(--space-3)' }}>
          <div style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: 700, color: 'var(--text-primary)', marginBottom: 'var(--space-2)' }}>PSC 模組結構（由上而下）</div>
          <ol style={{ margin: 0, paddingLeft: 20, display: 'grid', gridTemplateColumns: 'repeat(2, minmax(0, 1fr))', columnGap: 'var(--space-6)', rowGap: 2, fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', lineHeight: 1.7, color: 'var(--text-muted)', gridAutoFlow: 'column', gridTemplateRows: 'repeat(4, auto)' }}>
            {PSC_LAYERS.map((l) => <li key={l}>{l}</li>)}
          </ol>
        </figcaption>
      </figure>
      </div>
      <div style={{ marginTop: 'var(--space-10)' }}><SceneRow /></div>
    </section>
  );
}

var PSC_LAYERS = ['前玻璃', '透明導電層 TCO', '電子傳輸層 ETL', '鈣鈦礦吸光層', '電洞傳輸層 HTL', '透明背電極', '封裝膜', '背玻璃＋邊緣封裝'];

var PRODUCTS = [
  ['創能欄杆', 'Balcony Railing', '取代陽台玻璃欄杆，A4 模組 3×3 為一組，沿陽台連續排列。', '集合住宅・陽台', '../../assets/scenes/product-railing-render.jpg', '示意圖'],
  ['創能推射窗', 'Casement Window', '可開啟的推射窗，A4 模組嵌入窗格，通風、透光同時發電。', '住宅・辦公室', '../../assets/scenes/product-casement-render.jpg', '示意圖'],
  ['創能落地窗', 'Floor-to-ceiling Window', '整面落地窗與門，A4 模組嵌入窗格，教室、辦公室與店面直接換裝，透光同時發電。', '學校・公共建築', '../../assets/scenes/product-floor-render.jpg', '示意圖'],
  ['創能溫室', 'Greenhouse', '溫室屋頂與牆面換成鈣鈦礦模組，透進作物需要的光，同時發電，適合農電共生。', '農業・溫室', '../../assets/scenes/product-greenhouse-render.jpg', '示意圖'],
  ['SPB 儲能', 'Storage', '鋰電池儲能，接收各窗單元經 MPPT 追蹤後的電力，白天存、晚上用。', '整棟建築', '../../assets/scenes/product-spb-photo2.jpg', '合作夥伴鑫鋰電池（XinLib）提供'],
];

function ProductsB() {
  return (
    <section style={{ ...WRAP, padding: 'var(--section-y) var(--gutter) 0' }}>
      <Eyebrow>Products</Eyebrow>
      <H2 style={{ marginBottom: 'var(--space-4)' }}>鈣鈦礦創能建材</H2>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)', marginBottom: 'var(--space-8)' }}>
        {['發電', '透光', '隔熱', '儲能'].map((t) => <span key={t} style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: 600, padding: '6px 14px', borderRadius: 999, border: '1px solid var(--border-default)', whiteSpace: 'nowrap', flexShrink: 0 }}>{t}</span>)}
      </div>
      <div className="gw-products" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 150px), 1fr))', gap: 'var(--space-4)' }}>
        {PRODUCTS.map(([zh, en, d, use, img, credit]) => (
          <Card key={zh} interactive>
            {img ? <img src={img} alt={zh} style={{ width: '100%', height: 220, objectFit: 'cover', display: 'block', borderRadius: 'var(--radius-sm)' }} /> : <ImageSlot label={zh + ' 產品照'} height={220} />}
            <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'baseline', columnGap: 8, rowGap: 2, marginTop: 'var(--space-4)' }}>
              <h3 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-subheading)', fontWeight: 700, margin: 0, whiteSpace: 'nowrap', flexShrink: 0 }}>{zh}</h3>
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)' }}>{en}</span>
            </div>
            <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', lineHeight: 1.7, color: 'var(--text-secondary)', margin: '8px 0 12px' }}>{d}</p>
            <Badge tone="neutral">{use}</Badge>
            {credit && <div style={{ fontFamily: 'var(--font-cjk)', fontSize: 11, color: 'var(--text-muted)', marginTop: 10 }}>圖片：{credit}</div>}
          </Card>
        ))}
      </div>
    </section>
  );
}

var SYSTEM_FEATURES = [
  ['8CH', 'sun', '8 通道獨立 MPPT', 'SPB 內建 8 個各自獨立的 MPPT 通道。立面上每一組 PSC 的光照量不同、發電量也不同，各通道分別追蹤，互不拖累。'],
  ['可擴充', 'layers', '電池可擴充', 'SPB 電池模組可以堆疊擴充，依建築用電需求增加儲能容量。'],
  ['3kW', 'zap', '3kW 逆變器＋AC 充電', '平時以太陽能優先供電；光照不足時，透過 AC 充電補電，用電不中斷。'],
  ['可攜', 'truck', '移動式緊急電源', 'SPB 搭配輕薄可攜帶的 PSC，可以大幅提升移動性，為救援小組提供緊急應變電源。'],
];

function Flow({ color = 'var(--amber-400)', label, vertical }) {
  const dash = { background: `repeating-linear-gradient(${vertical ? '180deg' : '90deg'}, ${color} 0 6px, transparent 6px 12px)`, backgroundSize: vertical ? '100% 24px' : '24px 100%', animation: `${vertical ? 'gwflowv' : 'gwflow'} 0.9s linear infinite`, borderRadius: 2 };
  return (
    <div className="gw-flow" style={{ display: 'flex', flexDirection: vertical ? 'row' : 'column', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
      <div className="gw-flow-dash" style={{ ...dash, '--fc': color, width: vertical ? 3 : 44, height: vertical ? 28 : 3 }}></div>
      {label && <span style={{ fontFamily: 'var(--font-cjk)', fontSize: 11, color: 'var(--ink-300)', whiteSpace: 'nowrap' }}>{label}</span>}
    </div>
  );
}

function SpbDiagram() {
  const box = { background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-inverse)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4)', color: 'var(--white)' };
  const lbl = { fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', fontWeight: 700, margin: 0, color: 'var(--white)' };
  const sub = { fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-caption)', color: 'var(--ink-300)', margin: 0 };
  const photo = (src, hgt, pos = 'center') => <img src={src} alt="" className="gw-d-photo" style={{ flexShrink: 0, width: '100%', height: hgt, minHeight: hgt, objectFit: 'cover', objectPosition: pos, display: 'block', borderRadius: 'var(--radius-sm)' }} />;
  const light = [1, 0.75, 0.5, 0.9, 0.35, 0.65, 0.85, 0.45];
  const tile = { borderRadius: 'var(--radius-sm)', background: 'rgba(255,255,255,0.06)', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 4, padding: 8 };
  return (
    <div data-om-raster="" className="gw-diagram" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) auto minmax(0,1.4fr) auto minmax(0,1fr)', columnGap: 'var(--space-3)', rowGap: 'var(--space-2)', alignItems: 'stretch', marginBottom: 'var(--space-8)' }}>
      <div className="gw-d-psc" style={{ ...box, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        <p style={lbl}>PSC 鈣鈦礦模組</p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(8,1fr)', gap: 4 }}>
          {light.map((o, i) => <div key={i} style={{ aspectRatio: '21 / 30', borderRadius: 2, background: '#f2b34a', opacity: o, boxShadow: `0 0 ${Math.round(o * 10)}px rgba(242,179,74,${o * 0.8})` }}></div>)}
        </div>
        <p style={sub}>8 組光照量各不相同</p>
      </div>
      <div className="gw-d-flow1" style={{ display: 'flex' }}><Flow label="8 路直流" /></div>
      <div className="gw-d-spb" style={{ ...box, gridRow: '1 / span 2', borderColor: 'var(--amber-400)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-3)' }}>
          <img src="../../assets/scenes/product-spb-photo2.jpg" alt="SPB" className="gw-d-spbimg" style={{ flexShrink: 0, width: 64, height: 64, minHeight: 64, objectFit: 'cover', borderRadius: 'var(--radius-sm)', display: 'block' }} />
          <div><p style={{ ...lbl, fontFamily: 'var(--font-mono)', fontSize: 'var(--size-subheading)' }}>SPB</p><p style={sub}>光儲一體機</p></div>
        </div>
        <div style={{ display: 'flex', gap: 'var(--space-3)', alignItems: 'stretch', flex: 1 }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 4, width: 64, flexShrink: 0 }}>
            {light.map((o, i) => <div key={i} style={{ flex: 1, minHeight: 16, borderRadius: 3, background: `rgba(242,179,74,${0.25 + o * 0.6})`, color: 'var(--ink-900)', fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600, display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'nowrap' }}>{`CH${i + 1}`}</div>)}
            <p style={{ ...sub, marginTop: 4, lineHeight: 1.35 }}>8CH<br />獨立 MPPT</p>
          </div>
          <div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
              {[0, 1].map((i) => <div key={i} style={{ height: 18, borderRadius: 3, background: 'linear-gradient(90deg, #31c2b9 0%, #31c2b9 ' + (i ? 70 : 100) + '%, rgba(49,194,185,0.25) ' + (i ? 70 : 100) + '%)' }}></div>)}
              <div style={{ height: 18, borderRadius: 3, border: '1px dashed var(--ink-400)' }}></div>
              <p style={sub}>電池（可擴充）</p>
            </div>
            <div style={{ flex: 1, display: 'flex', gap: 6 }}>
              <div style={{ ...tile, flex: 1 }}><span style={{ fontFamily: 'var(--font-mono)', fontWeight: 600, fontSize: 'var(--size-subheading)', color: 'var(--amber-400)' }}>3kW</span><p style={sub}>逆變器</p></div>
              <div style={{ ...tile, flex: 1 }}><span style={{ color: '#31c2b9', display: 'inline-flex' }}><Icon name="battery-charging" size={20} /></span><p style={sub}>充電器</p></div>
            </div>
          </div>
        </div>
      </div>
      <div className="gw-d-flow2" style={{ gridRow: '1 / span 2', display: 'flex' }}><Flow color="var(--white)" label="太陽能優先" /></div>
      <div className="gw-d-out" style={{ gridRow: '1 / span 2', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
        <div style={{ ...box, flex: 1, padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'relative', flex: 1, minHeight: 130 }}><img src="../../assets/scenes/scene-mansion-graded.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 40%', display: 'block' }} /></div>
          <div style={{ padding: 'var(--space-2) var(--space-4)', display: 'flex', alignItems: 'baseline', gap: 8, whiteSpace: 'nowrap', overflow: 'hidden' }}><p style={lbl}>建築用電</p><p style={{ ...sub, overflow: 'hidden', textOverflow: 'ellipsis' }}>AC 輸出</p></div>
        </div>
        <div style={{ ...box, flex: 1, padding: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
          <div style={{ position: 'relative', flex: 1, minHeight: 130 }}><img src="../../assets/scenes/scene-rescue-v2.jpg" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: '58% 72%', display: 'block' }} /><span style={{ position: 'absolute', right: 6, bottom: 6, fontFamily: 'var(--font-cjk)', fontSize: 10, color: '#fff', background: 'rgba(16,21,31,.55)', padding: '1px 5px', borderRadius: 3 }}>示意圖</span></div>
          <div style={{ padding: 'var(--space-2) var(--space-4)', display: 'flex', alignItems: 'baseline', gap: 8, whiteSpace: 'nowrap', overflow: 'hidden' }}><p style={lbl}>救援現場</p><p style={{ ...sub, overflow: 'hidden', textOverflow: 'ellipsis' }}>搭配可攜式 PSC</p></div>
        </div>
      </div>
      <div className="gw-d-mains" style={{ gridColumn: '1', gridRow: '2', ...box, display: 'flex', alignItems: 'center', gap: 10, borderStyle: 'dashed' }}><span style={{ color: '#31c2b9', display: 'inline-flex' }}><Icon name="plug-zap" size={22} /></span><div><p style={lbl}>市電輸入</p><p style={sub}>備用電力</p></div></div>
      <div className="gw-d-flowac" style={{ gridColumn: '2', gridRow: '2', display: 'flex' }}><Flow color="#31c2b9" label="AC 充電" /></div>
    </div>
  );
}

function SystemB() {
  return (
    <section style={{ marginTop: 'var(--section-y)', background: 'var(--surface-ink)', backgroundImage: 'var(--texture-dots-ink)', backgroundSize: 'var(--texture-dots-size)', color: 'var(--text-inverse)' }}>
      <div style={{ ...WRAP, padding: 'var(--section-y-tight) var(--gutter)' }}>
        <Eyebrow inverse>SPB × PSC</Eyebrow>
        <H2 inverse style={{ marginBottom: 'var(--space-8)' }}>SPB＋PSC 光儲系統</H2>
        <SpbDiagram />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 200px), 1fr))', gap: 'var(--space-4)' }}>
          {SYSTEM_FEATURES.map(([v, icon, t, d]) => (
            <div key={t} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid var(--border-inverse)', borderRadius: 'var(--radius-md)', padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span className="gw-feat-v" style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-title)', fontWeight: 600, whiteSpace: 'nowrap', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', color: 'var(--amber-400)' }}>{v}</span>
                <span style={{ color: 'var(--ink-300)', display: 'inline-flex', flexShrink: 0 }}><Icon name={icon} size={22} /></span>
              </div>
              <h3 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body)', fontWeight: 700, margin: 0, color: 'var(--white)' }}>{t}</h3>
              <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', lineHeight: 1.75, color: 'var(--ink-300)', margin: 0 }}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

var COOP_ITEMS = [
  ['layout-grid', 'PSC 產品', 'Perovskite Products', '創能欄杆、推射窗、落地窗與溫室等鈣鈦礦創能建材，以 PSC 模組組合，適用住宅、商辦、學校與農業設施。'],
  ['battery-charging', '光儲系統', 'PV + Storage System', 'SPB 搭配 PSC 的完整光儲系統：8CH 獨立 MPPT、可擴充電池、3kW 逆變器與 AC 充電，用於溫室、建築與緊急電源。'],
  ['factory', 'PSC 生產技術', 'Manufacturing Technology', '鈣鈦礦模組產線的製程、設備與 SOP 技術移轉，協助建立在地生產能力。'],
];

function CoopB({ go }) {
  return (
    <section id="coop" style={{ ...WRAP, padding: 'var(--section-y) var(--gutter) 0' }}>
      <Eyebrow>Partnership</Eyebrow>
      <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'end', gap: 'var(--space-4)', marginBottom: 'var(--space-8)' }}>
        <H2 style={{ margin: 0 }}>合作洽詢</H2>
        <Button variant="primary" iconRight="arrow-right" style={{ marginLeft: 'auto' }} onClick={() => go('contact')}>聯絡我們</Button>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 240px), 1fr))', gap: 'var(--space-5)' }}>
        {COOP_ITEMS.map(([icon, t, en, d], i) => (
          <Card key={t} interactive onClick={() => go('contact')}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              <span style={{ color: 'var(--accent-hover)', display: 'inline-flex' }}><Icon name={icon} size={26} /></span>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)' }}>0{i + 1}</span>
            </div>
            <h3 style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-heading)', fontWeight: 700, margin: '16px 0 2px' }}>{t}</h3>
            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--size-caption)', color: 'var(--text-muted)' }}>{en}</div>
            <p style={{ fontFamily: 'var(--font-cjk)', fontSize: 'var(--size-body-sm)', lineHeight: 1.75, color: 'var(--text-secondary)', margin: '12px 0 0' }}>{d}</p>
          </Card>
        ))}
      </div>
    </section>
  );
}

function Home({ go }) {
  return <><HeroB go={go} /><ProductsB /><SystemB /><CoopB go={go} /><CtaBand go={go} /></>;
}
Object.assign(window, { PSC_LAYERS, Home, Lineup, CtaBand, PRODUCTS, SystemB });