/* global React */
// Screenshots / scenarios section — product in-situ
function Screenshots() {
  const t = window.theme;
  return (
    <section id="screenshots" data-screen-label="05 Screenshots" style={{
      background: 'linear-gradient(180deg, #F5F5FA 0%, #FFFFFF 100%)',
      padding: '120px 40px', position: 'relative', overflow: 'hidden',
    }}>
      <div aria-hidden style={{
        position: 'absolute', top: '20%', left: '-10%', width: 500, height: 500,
        background: 'radial-gradient(circle, rgba(255,207,255,0.25) 0%, transparent 70%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />
      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: 64 }}>
          <div style={{
            fontFamily: t.fontDisplay, fontSize: 12, fontWeight: 700,
            color: t.royalPurple, letterSpacing: '0.14em', textTransform: 'uppercase',
            marginBottom: 18,
          }}>In Use · 實際使用場景</div>
          <h2 style={{
            fontFamily: t.fontDisplay, fontSize: 48, fontWeight: 700,
            lineHeight: 1.1, letterSpacing: '-0.03em', color: t.charcoal,
            margin: 0, maxWidth: 720, marginInline: 'auto', textWrap: 'balance',
          }}>在你每天都用的 App 裡，安靜地工作。</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 20, marginBottom: 20 }}>
          {/* Messages scenario */}
          <ScenarioCard
            tag="MESSAGES"
            title="跟朋友傳訊息"
            caption="打注音打英文不用切換"
            visual={<MessagesPreview />}
            bg="linear-gradient(135deg, #E8F4FF 0%, #F5E8FF 100%)"
          />
          {/* Preferences pane */}
          <ScenarioCard
            tag="SETTINGS"
            title="輸入法設定面板"
            caption="住在 macOS 的系統設定裡"
            visual={<SettingsPreview />}
            bg="linear-gradient(135deg, #FFF5E8 0%, #FFE8F4 100%)"
          />
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 20 }}>
          <ScenarioCard
            tag="CAT GUARD"
            title="喵喵守門員"
            caption="貓咪踩鍵盤時，自動鎖定輸出"
            visual={<CatGuardPreview />}
            bg="linear-gradient(135deg, #F0FFE8 0%, #E8FFF4 100%)"
            footnote="＊ 僅作用於文字輸入框內，無法攔截系統快捷鍵。"
          />
          <ScenarioCard
            tag="EMAIL"
            title="寫信一氣呵成"
            caption="混打中英 + 英文自動補完"
            visual={<EmailPreview />}
            bg="linear-gradient(135deg, #FFE8F8 0%, #E8E8FF 100%)"
          />
        </div>
      </div>
    </section>
  );
}

function ScenarioCard({ tag, title, caption, visual, bg, footnote }) {
  const t = window.theme;
  return (
    <div style={{
      background: bg, borderRadius: 24, padding: 28,
      border: '1px solid rgba(255,255,255,0.8)',
      boxShadow: '0 10px 40px rgba(45,45,61,0.06)',
      display: 'flex', flexDirection: 'column', gap: 18,
    }}>
      <div>
        <div style={{
          fontFamily: t.fontMono, fontSize: 10, color: t.darkGray,
          letterSpacing: '0.14em', marginBottom: 10, fontWeight: 600,
        }}>{tag}</div>
        <h3 style={{
          fontFamily: t.fontDisplay, fontSize: 22, fontWeight: 700,
          color: t.charcoal, margin: 0, marginBottom: 4, letterSpacing: '-0.01em',
        }}>{title}</h3>
        <div style={{ fontFamily: t.fontBody, fontSize: 13, color: t.darkGray }}>{caption}</div>
      </div>
      <div style={{ flex: 1, display: 'flex', alignItems: 'stretch' }}>{visual}</div>
      {footnote && (
        <div style={{
          fontFamily: t.fontMono, fontSize: 10.5, color: t.mediumGray,
          letterSpacing: '0.02em', lineHeight: 1.5,
          paddingTop: 4, borderTop: '1px dashed rgba(45,45,61,0.12)',
        }}>{footnote}</div>
      )}
    </div>
  );
}

function MessagesPreview() {
  const t = window.theme;
  const msgs = [
    { me: false, t: '晚上要吃啥？' },
    { me: true, t: '我想吃 pizza  🍕' },
    { me: false, t: '幾點？' },
    { me: true, t: '8 pm 老地方，一起看 NBA 如何？' },
  ];
  return (
    <div style={{
      flex: 1, background: '#fff', borderRadius: 18, padding: 18,
      boxShadow: '0 12px 30px rgba(45,45,61,0.08)',
      display: 'flex', flexDirection: 'column', gap: 8, minHeight: 240,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 10, paddingBottom: 12,
        borderBottom: '1px solid #F0F0F5', marginBottom: 6,
      }}>
        <div style={{ width: 32, height: 32, borderRadius: 999, background: t.gradPrimary }} />
        <div>
          <div style={{ fontFamily: t.fontBody, fontSize: 13, fontWeight: 600, color: t.charcoal }}>阿 K</div>
          <div style={{ fontFamily: t.fontBody, fontSize: 11, color: t.mediumGray }}>iMessage</div>
        </div>
      </div>
      {msgs.map((m, i) => (
        <div key={i} style={{ display: 'flex', justifyContent: m.me ? 'flex-end' : 'flex-start' }}>
          <div style={{
            maxWidth: '80%',
            padding: '8px 13px', borderRadius: 16,
            background: m.me ? t.gradEnergetic : '#F0F0F5',
            color: m.me ? '#fff' : t.charcoal,
            fontFamily: t.fontBody, fontSize: 14, lineHeight: 1.4,
          }}>{m.t}</div>
        </div>
      ))}
    </div>
  );
}

function SettingsPreview() {
  const t = window.theme;
  const rows = [
    { label: '中英混打模式', val: '開啟', on: true },
    { label: '英文預測', val: '開啟', on: true },
    { label: '中英自動加空格', val: '開啟', on: true },
    { label: '喵喵守門員', val: '平衡', mono: true },
  ];
  return (
    <div style={{
      flex: 1, background: '#fff', borderRadius: 18, padding: 18,
      boxShadow: '0 12px 30px rgba(45,45,61,0.08)',
      minHeight: 240,
    }}>
      <div style={{
        fontFamily: t.fontDisplay, fontSize: 13, fontWeight: 600, color: t.charcoal,
        marginBottom: 14, paddingBottom: 10, borderBottom: '1px solid #F0F0F5',
      }}>ZingIME · 偏好設定</div>
      {rows.map((r, i) => (
        <div key={i} style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '9px 0', borderBottom: i < rows.length - 1 ? '1px solid #F5F5FA' : 'none',
        }}>
          <span style={{ fontFamily: t.fontBody, fontSize: 13, color: t.charcoal }}>{r.label}</span>
          {r.on !== undefined ? (
            <div style={{
              width: 32, height: 18, borderRadius: 999,
              background: r.on ? t.deepBlue : '#D4D4E0',
              position: 'relative',
            }}>
              <div style={{
                position: 'absolute', top: 2, left: r.on ? 16 : 2,
                width: 14, height: 14, borderRadius: 999, background: '#fff',
                transition: 'left 0.2s',
              }} />
            </div>
          ) : (
            <span style={{
              fontFamily: r.mono ? t.fontMono : t.fontBody, fontSize: 12,
              color: t.darkGray, background: '#F5F5FA',
              padding: '3px 8px', borderRadius: 6,
            }}>{r.val}</span>
          )}
        </div>
      ))}
    </div>
  );
}

function CatGuardPreview() {
  const t = window.theme;
  // Simulated keystroke garbage that the guard intercepted
  const garbage = 'asdfjkl;qweruiop;;;zzzxcvbnm,./';
  return (
    <div style={{
      flex: 1, borderRadius: 18, overflow: 'hidden',
      boxShadow: '0 12px 30px rgba(45,45,61,0.1)',
      minHeight: 240, display: 'flex', flexDirection: 'column',
      background: 'linear-gradient(160deg, #2A2A3D 0%, #3D2A4D 60%, #4A3D5D 100%)',
      position: 'relative',
    }}>
      {/* faint paw watermarks */}
      <div aria-hidden style={{
        position: 'absolute', inset: 0, opacity: 0.08, pointerEvents: 'none',
        backgroundImage: 'radial-gradient(circle at 18% 78%, #fff 0 2px, transparent 3px), radial-gradient(circle at 82% 22%, #fff 0 2px, transparent 3px)',
        fontSize: 40,
      }} />

      {/* fake intercepted keystrokes ribbon */}
      <div style={{
        padding: '10px 14px',
        fontFamily: t.fontMono, fontSize: 10,
        color: 'rgba(255,255,255,0.45)',
        letterSpacing: '0.08em',
        whiteSpace: 'nowrap', overflow: 'hidden',
        borderBottom: '1px solid rgba(255,255,255,0.08)',
        position: 'relative',
      }}>
        <span style={{
          textDecoration: 'line-through',
          textDecorationColor: 'rgba(255,107,107,0.7)',
          textDecorationThickness: '1.5px',
        }}>{garbage}</span>
      </div>

      {/* notification card */}
      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 16,
      }}>
        <div style={{
          width: '100%',
          background: 'rgba(255,255,255,0.12)',
          backdropFilter: 'blur(20px)',
          WebkitBackdropFilter: 'blur(20px)',
          border: '1px solid rgba(255,255,255,0.18)',
          borderRadius: 16,
          padding: '14px 14px 12px',
          color: '#fff',
        }}>
          {/* header */}
          <div style={{
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            gap: 8, marginBottom: 6,
          }}>
            <PawIcon size={14} color="rgba(255,255,255,0.85)" />
            <div style={{
              fontFamily: t.fontDisplay, fontSize: 14, fontWeight: 700,
              letterSpacing: '0.02em',
            }}>喵喵守門員</div>
          </div>
          <div style={{
            fontFamily: t.fontBody, fontSize: 11.5,
            color: 'rgba(255,255,255,0.78)', textAlign: 'center',
            marginBottom: 12, lineHeight: 1.45,
          }}>偵測到異常輸入，已暫停輸入法</div>

          {/* slide to unlock */}
          <div style={{
            position: 'relative',
            background: 'rgba(0,0,0,0.28)',
            border: '1px solid rgba(255,255,255,0.1)',
            borderRadius: 999,
            height: 38,
            display: 'flex', alignItems: 'center',
            overflow: 'hidden',
          }}>
            {/* shimmer text */}
            <div style={{
              position: 'absolute', inset: 0,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: t.fontBody, fontSize: 11.5, fontWeight: 500,
              color: 'rgba(255,255,255,0.55)',
              letterSpacing: '0.04em',
            }}>▸&nbsp;&nbsp;滑動以解鎖</div>
            {/* knob */}
            <div style={{
              position: 'relative', zIndex: 1,
              width: 32, height: 32, marginLeft: 3,
              borderRadius: 999,
              background: 'linear-gradient(135deg, #4A9FFF 0%, #6B8FFF 100%)',
              boxShadow: '0 2px 8px rgba(74,159,255,0.5)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <PawIcon size={14} color="#fff" />
            </div>
          </div>

        </div>
      </div>
    </div>
  );
}

function PawIcon({ size = 14, color = '#fff' }) {
  // Original simple paw glyph: 1 pad + 4 toes
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill={color} aria-hidden>
      <ellipse cx="12" cy="16" rx="6" ry="5" />
      <ellipse cx="5" cy="9" rx="2.2" ry="2.8" />
      <ellipse cx="9" cy="5.5" rx="2.2" ry="2.8" />
      <ellipse cx="15" cy="5.5" rx="2.2" ry="2.8" />
      <ellipse cx="19" cy="9" rx="2.2" ry="2.8" />
    </svg>
  );
}

function EmailPreview() {
  const t = window.theme;
  return (
    <div style={{
      flex: 1, background: '#fff', borderRadius: 18, padding: 18,
      boxShadow: '0 12px 30px rgba(45,45,61,0.08)',
      minHeight: 240,
    }}>
      <div style={{
        fontFamily: t.fontBody, fontSize: 11, color: t.mediumGray,
        paddingBottom: 8, borderBottom: '1px solid #F0F0F5', marginBottom: 12,
        display: 'flex', gap: 20,
      }}>
        <span>收件人：client@company.com</span>
        <span>主旨：Q2 專案進度更新</span>
      </div>
      <div style={{
        fontFamily: t.fontBody, fontSize: 13.5, lineHeight: 1.7, color: t.charcoal,
      }}>
        Hi Alex，<br /><br />
        附上本週的 <span style={{
          background: 'linear-gradient(180deg, transparent 60%, rgba(255,159,229,0.3) 60%)',
        }}>progress report</span>。我們的 <span style={{
          background: 'linear-gradient(180deg, transparent 60%, rgba(144,213,255,0.3) 60%)',
        }}>onboarding flow</span> 轉換率提升了 <span style={{
          fontFamily: t.fontMono, fontWeight: 600, color: t.deepBlue,
        }}>18%</span>，這週會和 <span style={{
          background: 'linear-gradient(180deg, transparent 60%, rgba(208,197,255,0.4) 60%)',
        }}>design team</span> 討論下一步的 iteration。
        <br /><br />
        Best,<br />
        Joan
      </div>
    </div>
  );
}

window.Screenshots = Screenshots;