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

function ProductDetail({ kind = "dog", ec = "inapp" }) {
  const pet = PET_PROFILES[kind];
  return (
    <div className="scr">
      <StatusBar />
      {/* Image hero */}
      <div style={{
        height: 280,
        background: "linear-gradient(160deg, var(--gold-soft) 0%, var(--surface-soft) 100%)",
        position: "relative", flexShrink: 0,
        overflow: "hidden",
      }}>
        {/* topbar overlaid */}
        <TopBar
          left={<BackBtn />}
          right={
            <>
              <CircleIconBtn icon="bell" tone="gold" />
              <div style={{
                width: 38, height: 38, borderRadius: 19,
                background: "var(--surface)",
                border: "1px solid var(--border)",
                display: "flex", alignItems: "center", justifyContent: "center",
              }}>
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="var(--accent)"
                  strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M7 12 L1.5 6.5 C-0.5 4 2 1 4 1 C5 1 6 2 7 3 C8 2 9 1 10 1 C12 1 14.5 4 12.5 6.5 Z" />
                </svg>
              </div>
            </>
          }
        />
        {/* Product image */}
        <div style={{
          position: "absolute", inset: 0,
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          <Clay name="food" tone="gold" size={180} />
        </div>
        {/* Dots */}
        <div style={{
          position: "absolute", bottom: 14, left: 0, right: 0,
          display: "flex", justifyContent: "center", gap: 6,
        }}>
          {[0, 1, 2, 3].map((i) => (
            <span key={i} style={{
              width: i === 0 ? 16 : 5, height: 5, borderRadius: 3,
              background: i === 0 ? "var(--primary)" : "var(--border-strong)",
            }} />
          ))}
        </div>
        {/* DNA badge */}
        <span style={{
          position: "absolute", top: 56, left: 20,
          background: "var(--primary)", color: "var(--on-primary)",
          padding: "5px 10px", borderRadius: 8, fontSize: 10, fontWeight: 700,
          letterSpacing: 0.06, boxShadow: "var(--shadow-clay-1)",
          display: "inline-flex", alignItems: "center", gap: 4,
        }}>
          <Clay name="dna" tone="gold" size={14} />
          DNA MATCH 96%
        </span>
      </div>

      <div className="scrollbody" style={{
        marginTop: -20,
        background: "var(--bg)",
        borderRadius: "24px 24px 0 0",
        padding: "20px 0 0",
      }}>
        <div style={{ padding: "0 20px" }}>
          <span className="t-eyebrow tx-accent">PREMIUM FOOD · LIMITED</span>
          <h1 className="t-h2" style={{ marginTop: 6 }}>
            {kind === "cat" ? "毛玉ケア フード" : "関節サポート フード"}
          </h1>
          <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 4 }}>
            {kind === "cat" ? "三毛猫向け · 高消化性タンパク 1kg" : "成犬用 · 低脂肪 グルコサミン配合 2kg"}
          </div>

          <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
              {Array.from({ length: 5 }).map((_, i) => (
                <svg key={i} width="14" height="14" viewBox="0 0 14 14"
                  fill={i < 4 ? "var(--gold)" : "var(--border-strong)"}>
                  <path d="M7 0.5 L8.8 5 L13.5 5.5 L10 8.5 L11 13 L7 10.5 L3 13 L4 8.5 L0.5 5.5 L5.2 5 Z" />
                </svg>
              ))}
            </div>
            <span style={{ fontSize: 11, color: "var(--muted)", fontWeight: 600 }}>4.8 · 287件</span>
          </div>

          <div style={{
            marginTop: 16,
            padding: 14,
            background: "var(--surface)",
            borderRadius: 16,
            border: "1px solid var(--primary-soft)",
            display: "flex", gap: 12, alignItems: "center",
          }}>
            <Clay name="dna" tone="primary" size={36} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 11, fontWeight: 700, color: "var(--primary)", letterSpacing: 0.06 }}>
                {pet.name}のDNAに最適
              </div>
              <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2, lineHeight: 1.4 }}>
                {kind === "cat" ? "腎臓ケア + 毛玉対応の体質に基づき、150項目から選定" : "膝蓋骨脱臼リスク + 肥満傾向に基づき、150項目から選定"}
              </div>
            </div>
          </div>
        </div>

        {/* Subscription / one-time */}
        <div style={{ padding: "20px 20px 16px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>
            お届けプランを選ぶ
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
            <div className="sub-opt active">
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>毎月お届け（定期）</div>
                <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>
                  自動配送 · いつでもスキップ・解約OK
                </div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{
                  fontSize: 9, color: "var(--accent)", fontWeight: 700, letterSpacing: 0.06,
                }}>10% OFF</div>
                <div className="t-num" style={{
                  fontSize: 17, fontWeight: 700, color: "var(--primary)", lineHeight: 1.1,
                }}>
                  ¥{kind === "cat" ? "2,952" : "3,582"}
                </div>
              </div>
            </div>
            <div className="sub-opt">
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>隔月お届け（定期）</div>
                <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>2ヶ月に1回</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div style={{ fontSize: 9, color: "var(--accent)", fontWeight: 700 }}>5% OFF</div>
                <div className="t-num" style={{ fontSize: 17, fontWeight: 700, color: "var(--ink)" }}>
                  ¥{kind === "cat" ? "3,116" : "3,781"}
                </div>
              </div>
            </div>
            <div className="sub-opt">
              <div>
                <div style={{ fontSize: 13, fontWeight: 700 }}>1回のみ購入</div>
                <div style={{ fontSize: 10, color: "var(--muted)", marginTop: 2 }}>通常価格</div>
              </div>
              <div className="t-num" style={{ fontSize: 17, fontWeight: 700, color: "var(--ink)" }}>
                ¥{kind === "cat" ? "3,280" : "3,980"}
              </div>
            </div>
          </div>
        </div>

        {/* Ingredient pills */}
        <div style={{ padding: "0 20px 16px" }}>
          <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 10 }}>
            DNAに基づく配合
          </div>
          <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
            {(kind === "cat"
              ? ["タウリン", "低リン", "高消化性タンパク", "EPA/DHA", "ブドウ抽出物"]
              : ["グルコサミン", "コンドロイチン", "低脂肪", "オメガ3", "MSM", "緑イ貝"]
            ).map((n, i) => (
              <span key={i} className="pill pill-accent">{n}</span>
            ))}
          </div>
        </div>

        {/* Trust row */}
        <div style={{ padding: "0 20px 20px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
          <div className="card-flat" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: 10, textAlign: "center" }}>
            <Clay name="shield" tone="gold" size={32} />
            <div style={{ fontSize: 10, fontWeight: 700 }}>獣医師監修</div>
          </div>
          <div className="card-flat" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: 10, textAlign: "center" }}>
            <Clay name="check" tone="primary" size={32} />
            <div style={{ fontSize: 10, fontWeight: 700 }}>無添加</div>
          </div>
          <div className="card-flat" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, padding: 10, textAlign: "center" }}>
            <Clay name="paw" tone="accent" size={32} />
            <div style={{ fontSize: 10, fontWeight: 700 }}>国産原料</div>
          </div>
        </div>
      </div>

      {/* Sticky bottom CTA */}
      <div style={{
        flexShrink: 0,
        padding: "12px 20px 20px",
        background: "var(--surface)",
        borderTop: "1px solid var(--divider)",
        display: "flex", gap: 10, alignItems: "center",
      }}>
        <div>
          <div style={{ fontSize: 9, color: "var(--muted)", fontWeight: 700, letterSpacing: 0.04 }}>
            初回特別価格
          </div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 4 }}>
            <span className="t-num" style={{
              fontSize: 20, fontWeight: 700, color: "var(--accent)",
            }}>
              ¥{kind === "cat" ? "1,980" : "2,490"}
            </span>
            <span style={{ fontSize: 10, color: "var(--subtle)", textDecoration: "line-through" }}>
              ¥{kind === "cat" ? "3,280" : "3,980"}
            </span>
          </div>
        </div>
        <button className="btn btn-accent" style={{ flex: 1, height: 48 }}>
          {ec === "external" ? (
            <>
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"
                strokeWidth="2" strokeLinecap="round"><path d="M4 4h6v6M10 4 L4 10" /></svg>
              ECで購入する
            </>
          ) : "カートに追加"}
        </button>
      </div>
    </div>
  );
}

window.ProductDetail = ProductDetail;