/* global React, Clay, ClayTile, PetPortrait, StatusBar, HomeIndicator, Brand, TabBar, TopBar, CircleIconBtn, BackBtn, QuickTile, ScoreRing, DNAStrip, MiniBars */
/* ============================================================
   Onboarding — 3-step inline (welcome / pet kind / pet info)
   Works for either theme via outer className.
   ============================================================ */

function Onboarding({ kind = "dog" }) {
  return (
    <div className="scr">
      <StatusBar />
      <div className="scrollbody">
        {/* Hero band */}
        <div style={{
          height: 320,
          background:
            "radial-gradient(ellipse at 70% 20%, var(--primary-tint), transparent 60%)," +
            "linear-gradient(180deg, var(--surface-tint), var(--bg))",
          position: "relative",
          overflow: "hidden",
          display: "flex", alignItems: "center", justifyContent: "center",
        }}>
          {/* Background DNA strip */}
          <div style={{
            position: "absolute", top: 60, left: -20, right: -20, opacity: 0.18,
          }}><DNAStrip count={32} /></div>

          {/* Big paw + pet portrait */}
          <div style={{ position: "relative" }}>
            <div style={{ position: "absolute", top: -10, right: -30, opacity: 0.15 }}>
              <Clay name="paw" tone="primary" size={70} />
            </div>
            <div style={{ position: "absolute", bottom: -10, left: -30, opacity: 0.15 }}>
              <Clay name="paw" tone="accent" size={50} />
            </div>
            <PetPortrait kind={kind} size={150} />
          </div>
        </div>

        {/* Brand + tagline */}
        <div style={{ padding: "22px 24px 8px", textAlign: "center" }}>
          <Brand size="lg" />
          <h1 className="t-display" style={{ marginTop: 18, color: "var(--ink)" }}>
            おかえり、<br />森の小さな家族。
          </h1>
          <p className="t-body" style={{ color: "var(--muted)", marginTop: 10 }}>
            DNA解析からはじまる、<br/>パーソナライズ健康管理。
          </p>
        </div>

        {/* Step indicator */}
        <div style={{
          display: "flex", justifyContent: "center", gap: 6, marginTop: 18,
        }}>
          <span style={{ width: 24, height: 4, borderRadius: 2, background: "var(--primary)" }} />
          <span style={{ width: 4, height: 4, borderRadius: 2, background: "var(--border-strong)" }} />
          <span style={{ width: 4, height: 4, borderRadius: 2, background: "var(--border-strong)" }} />
        </div>

        {/* Feature row */}
        <div style={{ padding: "24px 20px 0", display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
          {[
            { icon: "dna", tone: "primary", label: "DNA解析", sub: "150項目" },
            { icon: "heart", tone: "accent", label: "毎日のログ", sub: "5タップ" },
            { icon: "vet", tone: "primary", label: "獣医監修", sub: "信頼" },
          ].map((f, i) => (
            <div key={i} style={{
              background: "var(--surface)", borderRadius: 16, padding: "12px 6px",
              display: "flex", flexDirection: "column", alignItems: "center", gap: 6,
              border: "1px solid var(--border)",
            }}>
              <Clay name={f.icon} tone={f.tone} size={34} />
              <div style={{ fontSize: 11, fontWeight: 700 }}>{f.label}</div>
              <div style={{ fontSize: 9, color: "var(--muted)" }}>{f.sub}</div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ padding: "24px 20px 12px" }}>
          <button className="btn btn-primary btn-block">
            <span>はじめる</span>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor"
              strokeWidth="2.2" strokeLinecap="round"><path d="M3 7h8M7 3l4 4-4 4"/></svg>
          </button>
          <button className="btn btn-ghost btn-block" style={{ marginTop: 10 }}>
            既にアカウントをお持ちの方
          </button>
        </div>

        <p style={{
          textAlign: "center", color: "var(--subtle)",
          fontSize: 10, padding: "12px 32px 32px", letterSpacing: "0.04em",
        }}>
          続行すると<u>利用規約</u>と<u>プライバシーポリシー</u>に同意したものとみなされます
        </p>
      </div>
      <HomeIndicator />
    </div>
  );
}

window.Onboarding = Onboarding;