/* global React, Clay, ClayTile, PetPortrait, StatusBar, HomeIndicator, Brand, TabBar, TopBar, CircleIconBtn, BackBtn, QuickTile, ScoreRing, DNAStrip, MiniBars, PET_PROFILES */

function Articles({ kind = "dog" }) {
  const pet = PET_PROFILES[kind];
  const featured = kind === "cat" ? {
    title: "三毛猫の腎臓ケア\n毎日の水分補給術",
    tag: "DNA RECOMMENDED",
    read: "5分",
    date: "2026.05.19",
    icon: "water",
    tone: "sky",
  } : {
    title: "柴犬の膝蓋骨脱臼を予防する\n5つの習慣",
    tag: "DNA RECOMMENDED",
    read: "3分",
    date: "2026.05.19",
    icon: "run",
    tone: "lime",
  };
  const articles = kind === "cat" ? [
    { tag: "栄養管理", title: "肥満傾向の猫に最適な食事量", date: "2026.05.17", read: "4分", icon: "food", tone: "gold" },
    { tag: "毛玉対策", title: "毎日のブラッシングで防げる体調不良", date: "2026.05.15", read: "3分", icon: "shield", tone: "navy" },
    { tag: "季節の注意", title: "【2026年夏】猫の熱中症対策まとめ", date: "2026.05.13", read: "4分", icon: "sun", tone: "gold" },
    { tag: "予防接種", title: "ワクチンスケジュールの正しい管理方法", date: "2026.05.10", read: "3分", icon: "pill", tone: "accent" },
    { tag: "日常ケア", title: "夜行性の猫と上手につきあう", date: "2026.05.08", read: "5分", icon: "moon", tone: "navy" },
  ] : [
    { tag: "栄養管理", title: "肥満傾向のある犬のフード選びのポイント", date: "2026.05.17", read: "5分", icon: "food", tone: "gold" },
    { tag: "季節の注意", title: "【2026年夏】犬の熱中症対策まとめ", date: "2026.05.15", read: "4分", icon: "sun", tone: "gold" },
    { tag: "予防接種", title: "ワクチンスケジュールの正しい管理方法", date: "2026.05.12", read: "3分", icon: "pill", tone: "accent" },
    { tag: "日常ケア", title: "毎日の散歩時間は何分が理想？犬種別ガイド", date: "2026.05.10", read: "4分", icon: "run", tone: "lime" },
    { tag: "歯みがき", title: "嫌がらない歯みがきのコツ", date: "2026.05.08", read: "3分", icon: "bone", tone: "cream" },
  ];

  return (
    <div className="scr">
      <StatusBar />
      <TopBar
        left={
          <div>
            <span className="t-eyebrow tx-accent" style={{ fontSize: 9 }}>JOURNAL</span>
            <div style={{ fontSize: 16, fontWeight: 700, marginTop: 2 }}>健康情報</div>
          </div>
        }
        right={
          <>
            <CircleIconBtn icon="bell" tone="gold" withDot />
            <CircleIconBtn icon="bag" tone="sand" />
          </>
        }
      />
      <div className="scrollbody">
        {/* Search */}
        <div style={{ padding: "4px 20px 16px" }}>
          <div style={{
            display: "flex", alignItems: "center", gap: 10,
            padding: "10px 14px",
            background: "var(--surface)",
            borderRadius: 14,
            border: "1px solid var(--border)",
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="var(--muted)"
              strokeWidth="2"><circle cx="7" cy="7" r="5" /><path d="M14 14 L10.5 10.5" strokeLinecap="round" /></svg>
            <span style={{ fontSize: 13, color: "var(--subtle)" }}>キーワードで探す</span>
          </div>
        </div>

        {/* Featured hero card */}
        <div style={{ padding: "0 20px 20px" }}>
          <div style={{
            background: "var(--surface)",
            borderRadius: 22,
            overflow: "hidden",
            boxShadow: "var(--shadow-clay-2)",
            border: "1px solid var(--border)",
          }}>
            <div style={{
              height: 160,
              background: "linear-gradient(160deg, var(--primary-tint), var(--surface-soft))",
              display: "flex", alignItems: "center", justifyContent: "center",
              position: "relative",
            }}>
              <div style={{ position: "absolute", top: 12, right: 12, opacity: 0.2 }}>
                <DNAStrip count={20} />
              </div>
              <Clay name={featured.icon} tone={featured.tone} size={110} />
              <span style={{
                position: "absolute", top: 12, left: 12,
                background: "var(--primary)", color: "var(--on-primary)",
                padding: "5px 10px", borderRadius: 999, fontSize: 9, fontWeight: 700,
                letterSpacing: 0.08, display: "inline-flex", alignItems: "center", gap: 4,
              }}>
                <Clay name="dna" tone="gold" size={12} />
                {featured.tag}
              </span>
            </div>
            <div style={{ padding: 16 }}>
              <h3 style={{
                fontSize: 17, fontWeight: 700, lineHeight: 1.3, letterSpacing: "-0.01em",
                whiteSpace: "pre-line",
              }}>
                {featured.title}
              </h3>
              <div style={{
                marginTop: 10,
                display: "flex", alignItems: "center", gap: 10,
                fontSize: 11, color: "var(--muted)", fontWeight: 600,
              }}>
                <span>{featured.date}</span>
                <span style={{ width: 3, height: 3, borderRadius: 1.5, background: "var(--subtle)" }} />
                <span>読了 {featured.read}</span>
                <span style={{ flex: 1 }} />
                <span style={{
                  display: "inline-flex", alignItems: "center", gap: 3,
                  color: "var(--accent)", fontWeight: 700,
                }}>
                  続きを読む
                  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" stroke="currentColor"
                    strokeWidth="2" strokeLinecap="round"><path d="M3 2l3 3-3 3" /></svg>
                </span>
              </div>
            </div>
          </div>
        </div>

        {/* Category chips */}
        <div style={{
          padding: "0 20px 14px", display: "flex", gap: 6, overflowX: "auto",
        }}>
          {["すべて", "栄養", "予防接種", "季節", "DNA", "しつけ", "歯みがき"].map((c, i) => (
            <span key={i} className={"pill" + (i === 0 ? "" : " pill-ghost")}
              style={{ height: 30, fontSize: 11, flexShrink: 0 }}>
              {c}
            </span>
          ))}
        </div>

        {/* Article rows */}
        <div style={{ padding: "0 20px 16px", display: "flex", flexDirection: "column", gap: 10 }}>
          {articles.map((a, i) => (
            <div key={i} className="article-tile">
              <div className="article-thumb">
                <Clay name={a.icon} tone={a.tone} size={42} />
              </div>
              <div style={{ minWidth: 0 }}>
                <span className="t-eyebrow tx-accent" style={{ fontSize: 9 }}>{a.tag}</span>
                <div style={{ fontSize: 13, fontWeight: 700, lineHeight: 1.35, marginTop: 4 }}>
                  {a.title}
                </div>
                <div style={{
                  display: "flex", gap: 8, marginTop: 4,
                  fontSize: 10, color: "var(--muted)", fontWeight: 600,
                }}>
                  <span>{a.date}</span>
                  <span>·</span>
                  <span>読了 {a.read}</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
      <TabBar active="info" />
      <HomeIndicator />
    </div>
  );
}

window.Articles = Articles;