// Phone frame + 3 screen mockups (Home, Journal, Vision Board)

function PhoneFrame({ children, scale = 1, style = {} }) {
  return (
    <div className="phone-frame-shell" style={{
      width: 290,
      height: 600,
      borderRadius: 44,
      padding: 8,
      background: "linear-gradient(160deg,#1a2540,#2C3E6B 40%,#1a2540)",
      boxShadow: "0 30px 60px -20px rgba(44,62,107,0.45), 0 50px 120px -40px rgba(155,142,212,0.5), inset 0 1px 2px rgba(255,255,255,0.10)",
      transform: `scale(${scale})`,
      transformOrigin: "center",
      flexShrink: 0,
      ...style,
    }}>
      <div className="phone-frame-inner" style={{
        position: "relative",
        width: "100%", height: "100%",
        borderRadius: 36,
        overflow: "hidden",
        background: "#EEF4FF",
      }}>
        {/* Notch */}
        <div style={{
          position: "absolute", top: 10, left: "50%", transform: "translateX(-50%)",
          width: 96, height: 26, borderRadius: 14,
          background: "#0a0612",
          zIndex: 10,
        }} />
        {children}
      </div>
    </div>
  );
}

function PhoneAppScreen({ screen }) {
  const sources = {
    home: {
      light: "design/assets/screens/home-light.png",
      dark: "design/assets/screens/home-dark.png",
      alt: "Lumgoals home screen",
    },
    journal: {
      light: "design/assets/screens/journal-light.png",
      dark: "design/assets/screens/journal-dark.png",
      alt: "Lumgoals journal screen",
    },
    vision: {
      light: "design/assets/screens/vision-light.png",
      dark: "design/assets/screens/vision-dark.png",
      alt: "Lumgoals vision board screen",
    },
  }[screen];

  return (
    <div className="phone-app-screen">
      <div className="phone-app-status" aria-hidden="true">
        <span>9:41</span>
        <span className="phone-app-status-icons">
          <span className="phone-cell-bars"><i></i><i></i><i></i><i></i></span>
          <span className="phone-wifi"><i></i></span>
          <span className="phone-battery"><i></i></span>
        </span>
      </div>
      <img className="phone-app-shot phone-app-shot-light" src={sources.light} alt={sources.alt} />
      <img className="phone-app-shot phone-app-shot-dark" src={sources.dark} alt={sources.alt} />
    </div>
  );
}

// Star particle field
function Stars({ count = 14 }) {
  const stars = React.useMemo(() => Array.from({length: count}, (_, i) => ({
    id: i,
    left: Math.random() * 100,
    top: Math.random() * 100,
    size: Math.random() * 3 + 1.5,
    opacity: Math.random() * 0.5 + 0.2,
    delay: Math.random() * 3,
    dur: 2 + Math.random() * 2,
    color: i % 3 === 0 ? "#C5B4F0" : "#7EB8F7",
  })), [count]);
  return (
    <div style={{position:"absolute",inset:0,pointerEvents:"none",overflow:"hidden"}}>
      {stars.map(s => (
        <div key={s.id} style={{
          position:"absolute",
          left:`${s.left}%`, top:`${s.top}%`,
          width:s.size, height:s.size,
          borderRadius:"50%",
          background:s.color,
          opacity:s.opacity,
          animation:`twinkle ${s.dur}s ease-in-out ${s.delay}s infinite`,
        }} />
      ))}
    </div>
  );
}

// Status bar (iOS-style)
function StatusBar({ dark = false }) {
  const c = dark ? "#FAF5FF" : "#2C3E6B";
  return (
    <div style={{
      position:"relative", zIndex:5,
      display:"flex", justifyContent:"space-between", alignItems:"center",
      padding:"14px 22px 0",
      fontFamily:"'Montserrat',sans-serif", fontSize:13, fontWeight:600, color:c,
    }}>
      <span>9:41</span>
      <div style={{display:"flex", gap:6, alignItems:"center"}}>
        <svg width="16" height="10" viewBox="0 0 16 10" fill="none">
          <rect x="0" y="6" width="3" height="4" rx="0.5" fill={c}/>
          <rect x="4" y="4" width="3" height="6" rx="0.5" fill={c}/>
          <rect x="8" y="2" width="3" height="8" rx="0.5" fill={c}/>
          <rect x="12" y="0" width="3" height="10" rx="0.5" fill={c}/>
        </svg>
        <svg width="22" height="10" viewBox="0 0 22 10" fill="none">
          <rect x="0.5" y="0.5" width="18" height="9" rx="2" stroke={c} strokeOpacity="0.5"/>
          <rect x="2" y="2" width="14" height="6" rx="1" fill={c}/>
          <rect x="20" y="3.5" width="1.5" height="3" rx="0.5" fill={c} fillOpacity="0.5"/>
        </svg>
      </div>
    </div>
  );
}

// Tab bar
function PhoneTabBar({ active = "home" }) {
  const tabs = [
    {key:"home",    d:"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"},
    {key:"goals",   d:"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"},
    {key:"journal", d:"M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z"},
    {key:"vision",  d:"M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0z"},
  ];
  return (
    <div style={{
      position:"absolute", bottom:0, left:0, right:0,
      background:"rgba(238,244,255,0.92)",
      backdropFilter:"blur(40px)",
      borderTop:"1px solid rgba(180,210,255,0.4)",
      display:"flex", justifyContent:"space-around",
      padding:"10px 0 18px",
    }}>
      {tabs.map(t => {
        const isActive = t.key === active;
        return (
          <div key={t.key} style={{display:"flex",flexDirection:"column",alignItems:"center",gap:3}}>
            <div style={{height:3, width:20, borderRadius:2, background:"#7EB8F7", opacity:isActive?1:0}} />
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke={isActive?"#7EB8F7":"#A8B5CC"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{opacity:isActive?1:0.55}}>
              <path d={t.d}/>
            </svg>
          </div>
        );
      })}
    </div>
  );
}

// ─── HOME SCREEN ──────────────────────────────────────────────
function PhoneHome() {
  return (
    <div style={{
      position:"absolute", inset:0,
      background:"linear-gradient(160deg,#EEF4FF 0%,#D6E8FF 50%,#C5D8F5 100%)",
    }}>
      <Stars count={14} />
      <StatusBar />
      <div style={{padding:"42px 18px 80px"}}>
        {/* Header */}
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:18}}>
          <div>
            <div style={{fontFamily:"'Playfair Display',serif",fontSize:19,fontWeight:700,color:"#2C3E6B",lineHeight:1.2}}>
              Good morning,
            </div>
            <div style={{fontFamily:"'Playfair Display',serif",fontSize:19,fontWeight:700,color:"#2C3E6B",lineHeight:1.2,fontStyle:"italic"}}>
              Beautiful Soul
            </div>
            <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:10,color:"#A8B5CC",marginTop:4,letterSpacing:0.3}}>
              Tuesday, March 19
            </div>
          </div>
          <div style={{
            width:38, height:38, borderRadius:19,
            background:"linear-gradient(135deg,#7EB8F7,#C5B4F0)",
            display:"grid", placeItems:"center",
            color:"#fff", fontFamily:"'Playfair Display',serif", fontWeight:700, fontSize:15,
            boxShadow:"0 4px 12px rgba(126,184,247,0.35)",
          }}>S</div>
        </div>

        {/* Affirmation card */}
        <div style={{
          background:"linear-gradient(160deg,#B8D9FF,#C5B4F0,#E8C5D8,#A8D8EA)",
          borderRadius:22, padding:1.5, marginBottom:16,
        }}>
          <div style={{
            background:"rgba(255,255,255,0.88)",
            borderRadius:20, padding:"14px 16px",
            backdropFilter:"blur(20px)",
          }}>
            <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
              <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:9,fontWeight:600,letterSpacing:1.3,color:"#7EB8F7"}}>
                ✦ DAILY AFFIRMATION
              </span>
              <span style={{color:"#7EB8F7",fontSize:13}}>↻</span>
            </div>
            <div style={{fontFamily:"'Playfair Display',serif",fontSize:14,fontStyle:"italic",color:"#2C3E6B",lineHeight:1.5}}>
              "I am worthy of everything I desire."
            </div>
          </div>
        </div>

        {/* Section header */}
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10}}>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:15,fontWeight:700,color:"#2C3E6B"}}>
            Your Manifestations
          </div>
          <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:10,color:"#7EB8F7",fontWeight:500}}>View all</div>
        </div>

        {/* Goal cards */}
        <div style={{display:"flex",gap:8,marginBottom:14}}>
          {[
            {t:"Write a novel", p:68, d:42, c:"#7EB8F7", icon:"M12 20h9M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"},
            {t:"Morning yoga", p:33, d:12, c:"#C5B4F0", icon:"M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm0 6c1.1 0 2 .9 2 2v5h-1v5h-2v-5H9v-5c0-1.1.9-2 2-2z"},
          ].map((g,i) => (
            <div key={i} className="glass" style={{flex:1, padding:10, borderRadius:18, display:"flex", flexDirection:"column"}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:6}}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke={g.c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d={g.icon}/>
                </svg>
                <Ring p={g.p} size={28} color={g.c}/>
              </div>
              <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:11,fontWeight:600,color:"#2C3E6B",lineHeight:1.3,marginBottom:6}}>
                {g.t}
              </div>
              <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:9,fontWeight:600,color:"#5A96D4",background:"#B8D9FF",borderRadius:6,padding:"2px 6px",alignSelf:"flex-start"}}>
                {g.d}d
              </div>
            </div>
          ))}
        </div>

        {/* Mood */}
        <div className="glass" style={{padding:12, borderRadius:18}}>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:12,fontWeight:700,color:"#2C3E6B",marginBottom:10}}>
            How are you feeling today?
          </div>
          <div style={{display:"flex",justifyContent:"space-between"}}>
            {[
              {c:"#6B7FA8", d:"M8 14s-1-2-1-3 .5-2 1-2m8 5s1-2 1-3-.5-2-1-2M9 9h.01M15 9h.01"},
              {c:"#A8B5CC", d:"M8 15h8M9 9h.01M15 9h.01"},
              {c:"#7EB8F7", d:"M8 13s1 3 4 3 4-3 4-3M9 9h.01M15 9h.01"},
              {c:"#EC4899", d:"M16 16s-1-2-4-2-4 2-4 2M7.5 8l2 2M14.5 8l2-2"},
            ].map((m,i)=>(
              <svg key={i} width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={m.c} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                <circle cx="12" cy="12" r="10"/>
                <path d={m.d}/>
              </svg>
            ))}
          </div>
        </div>
      </div>
      <PhoneTabBar active="home" />
    </div>
  );
}

// Tiny progress ring
function Ring({ p, size = 30, color = "#7EB8F7" }) {
  const sw = 3;
  const r = (size - sw) / 2;
  const c = 2 * Math.PI * r;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="rgba(180,210,255,0.3)" strokeWidth={sw}/>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={sw} strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c*(1-p/100)}
        transform={`rotate(-90 ${size/2} ${size/2})`}/>
      <text x={size/2} y={size/2+3} textAnchor="middle" fontFamily="'Playfair Display',serif" fontWeight="700" fontSize={size*0.28} fill="#2C3E6B">{p}</text>
    </svg>
  );
}

// ─── JOURNAL SCREEN ────────────────────────────────────────────
function PhoneJournal() {
  return (
    <div style={{
      position:"absolute", inset:0,
      background:"linear-gradient(160deg,#EEF4FF,#E8F1FF,#DFE9FF)",
    }}>
      <StatusBar />
      <div style={{padding:"42px 16px 80px"}}>
        {/* Header */}
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",marginBottom:14}}>
          <div>
            <div style={{fontFamily:"'Playfair Display',serif",fontSize:24,fontWeight:700,color:"#2C3E6B",letterSpacing:-0.3}}>Journal</div>
            <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:9,color:"#A8B5CC",letterSpacing:2.2,textTransform:"uppercase",marginTop:2}}>
              daily reflections
            </div>
          </div>
          <div style={{
            display:"flex",alignItems:"center",gap:5,
            background:"rgba(245,166,35,0.10)", border:"1px solid rgba(245,166,35,0.3)",
            borderRadius:14, padding:"4px 10px",
          }}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#F5A623" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/>
            </svg>
            <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:12,color:"#E67E22",fontWeight:600}}>7</span>
            <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:9,color:"#E67E22",opacity:0.75}}>days</span>
          </div>
        </div>

        {/* Date chip */}
        <div style={{
          display:"inline-flex",alignItems:"center",gap:5,
          border:"1px solid rgba(180,210,255,0.4)",borderRadius:14,
          padding:"4px 10px",background:"rgba(255,255,255,0.8)",marginBottom:14,
        }}>
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#7EB8F7" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2z"/>
          </svg>
          <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:11,color:"#6B7FA8",fontWeight:500}}>Today</span>
        </div>

        {/* Week strip */}
        <div style={{
          background:"rgba(255,255,255,0.8)", border:"1px solid rgba(180,210,255,0.35)",
          borderRadius:16, padding:"10px 6px 8px", marginBottom:14,
        }}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
            {[
              {n:"FR",d:15, hasM:true, hasE:true, active:false},
              {n:"SA",d:16, hasM:true, hasE:true, active:false},
              {n:"SU",d:17, hasM:true, hasE:false, active:false},
              {n:"MO",d:18, hasM:false, hasE:false, active:false},
              {n:"TU",d:19, hasM:true, hasE:false, active:true},
            ].map((day,i) => (
              <div key={i} style={{
                flex:1,
                background: day.active ? "#7EB8F7" : "transparent",
                borderRadius:10, padding:"6px 2px",
                display:"flex",flexDirection:"column",alignItems:"center",gap:2,
              }}>
                <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:8,fontWeight:500,color:day.active?"#fff":"#6B7FA8",letterSpacing:0.4}}>{day.n}</span>
                <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:13,fontWeight:500,color:day.active?"#fff":"#2C3E6B"}}>{day.d}</span>
                <div style={{display:"flex",gap:2,marginTop:2}}>
                  <div style={{width:4,height:4,borderRadius:2,background:day.hasM?"#F5A623":"rgba(180,210,255,0.25)"}}/>
                  <div style={{width:4,height:4,borderRadius:2,background:day.hasE?"#9B7FE0":"rgba(180,210,255,0.25)"}}/>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* Morning entry */}
        <div style={{
          background:"rgba(245,166,35,0.08)",
          border:"1px solid rgba(245,166,35,0.25)",
          borderRadius:18, padding:14, marginBottom:10,
        }}>
          <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#F5A623" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <circle cx="12" cy="12" r="5"/>
              <path d="M12 2v2m0 16v2M5 12H3m18 0h-2M5.636 5.636l1.414 1.414m9.9 9.9 1.414 1.414M5.636 18.364l1.414-1.414m9.9-9.9 1.414-1.414"/>
            </svg>
            <div style={{background:"rgba(245,166,35,0.12)",borderRadius:12,padding:"2px 8px"}}>
              <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:8,letterSpacing:1.1,color:"#E67E22",fontWeight:600}}>MORNING</span>
            </div>
            <div style={{marginLeft:"auto",background:"rgba(245,166,35,0.12)",borderRadius:12,padding:"2px 8px"}}>
              <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:8,color:"rgba(245,166,35,0.7)"}}>Written</span>
            </div>
          </div>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:15,fontWeight:700,color:"#2C3E6B",marginBottom:3}}>Morning Intentions</div>
          <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:10,color:"#6B7FA8",lineHeight:1.4}}>
            I intend to show up fully for myself today...
          </div>
        </div>

        {/* Evening entry */}
        <div style={{
          background:"rgba(155,127,224,0.08)",
          border:"1px solid rgba(155,127,224,0.25)",
          borderRadius:18, padding:14,
        }}>
          <div style={{display:"flex",alignItems:"center",gap:6,marginBottom:4}}>
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#9B7FE0" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
            </svg>
            <div style={{background:"rgba(155,127,224,0.12)",borderRadius:12,padding:"2px 8px"}}>
              <span style={{fontFamily:"'Montserrat',sans-serif",fontSize:8,letterSpacing:1.1,color:"#7C6BC2",fontWeight:600}}>EVENING</span>
            </div>
          </div>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:15,fontWeight:700,color:"#2C3E6B",marginBottom:3}}>Evening Reflections</div>
          <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:10,color:"#6B7FA8",lineHeight:1.4}}>
            Reflect on the beauty of today...
          </div>
        </div>
      </div>
      <PhoneTabBar active="journal" />
    </div>
  );
}

// ─── VISION BOARD SCREEN ───────────────────────────────────────
function PhoneVision() {
  // Vision board collage — placeholder gradient tiles representing dream imagery
  const tiles = [
    {h:130, grad:"linear-gradient(140deg,#F5D78E,#E8C5D8)", label:"Tokyo, 2026", icon:"airplane"},
    {h:110, grad:"linear-gradient(140deg,#C5B4F0,#A8D8EA)", label:"My novel", icon:"book"},
    {h:90,  grad:"linear-gradient(140deg,#A8D8EA,#7EB8F7)", label:"Ocean view", icon:"wave"},
    {h:130, grad:"linear-gradient(140deg,#E8C5D8,#C5B4F0)", label:"Wedding day", icon:"heart"},
    {h:100, grad:"linear-gradient(140deg,#C5E8D5,#A8D8EA)", label:"Garden home", icon:"home"},
    {h:120, grad:"linear-gradient(140deg,#F5D78E,#7EB8F7)", label:"Wellness retreat", icon:"yoga"},
  ];
  return (
    <div style={{
      position:"absolute", inset:0,
      background:"linear-gradient(160deg,#EEF4FF 0%,#D6E8FF 50%,#C5D8F5 100%)",
    }}>
      <Stars count={10} />
      <StatusBar />
      <div style={{padding:"42px 16px 80px"}}>
        {/* Header */}
        <div style={{marginBottom:14}}>
          <div style={{fontFamily:"'Playfair Display',serif",fontSize:24,fontWeight:700,color:"#2C3E6B",letterSpacing:-0.3}}>
            Vision Board <span style={{color:"#C5B4F0",fontStyle:"italic"}}>✦</span>
          </div>
          <div style={{fontFamily:"'Montserrat',sans-serif",fontSize:10,color:"#A8B5CC",letterSpacing:2,textTransform:"uppercase",marginTop:2}}>
            the life i'm calling in
          </div>
        </div>

        {/* Filter chips */}
        <div style={{display:"flex",gap:6,marginBottom:14,overflowX:"hidden"}}>
          {["All", "Travel", "Love", "Career"].map((f,i) => (
            <div key={i} style={{
              fontFamily:"'Montserrat',sans-serif",fontSize:10,fontWeight:600,
              padding:"5px 12px",borderRadius:14,
              background:i===0?"#7EB8F7":"rgba(255,255,255,0.7)",
              color:i===0?"#fff":"#6B7FA8",
              border:i===0?"none":"1px solid rgba(180,210,255,0.4)",
            }}>{f}</div>
          ))}
        </div>

        {/* Collage — 2 columns masonry */}
        <div style={{display:"flex",gap:8}}>
          <div style={{flex:1,display:"flex",flexDirection:"column",gap:8}}>
            {tiles.filter((_,i)=>i%2===0).map((t,i) => (
              <VisionTile key={i} t={t} />
            ))}
          </div>
          <div style={{flex:1,display:"flex",flexDirection:"column",gap:8}}>
            {tiles.filter((_,i)=>i%2===1).map((t,i) => (
              <VisionTile key={i} t={t} />
            ))}
          </div>
        </div>
      </div>
      <PhoneTabBar active="vision" />
    </div>
  );
}

function VisionTile({ t }) {
  const icons = {
    airplane: "M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z",
    book:     "M4 19.5A2.5 2.5 0 0 1 6.5 17H20M4 19.5A2.5 2.5 0 0 0 6.5 22H20V2H6.5A2.5 2.5 0 0 0 4 4.5v15z",
    wave:     "M2 12c2-2 4-2 6 0s4 2 6 0 4-2 6 0M2 18c2-2 4-2 6 0s4 2 6 0 4-2 6 0",
    heart:    "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z",
    home:     "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",
    yoga:     "M12 2a2 2 0 1 1 0 4 2 2 0 0 1 0-4zm-6 9c0-1 1-2 2-2h8c1 0 2 1 2 2v6h-2v-4h-1v4h-6v-4h-1v4H6v-6z",
  };
  return (
    <div style={{
      position:"relative",
      borderRadius:14, overflow:"hidden",
      height:t.h,
      background:t.grad,
      boxShadow:"0 4px 12px rgba(155,142,212,0.18)",
    }}>
      {/* Soft white overlay for glassiness */}
      <div style={{position:"absolute",inset:0,background:"radial-gradient(circle at 30% 20%, rgba(255,255,255,0.55), transparent 60%)"}}/>
      {/* Icon */}
      <div style={{position:"absolute",top:8,left:8,width:24,height:24,borderRadius:8,background:"rgba(255,255,255,0.7)",display:"grid",placeItems:"center"}}>
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#2C3E6B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <path d={icons[t.icon]}/>
        </svg>
      </div>
      {/* Label at bottom */}
      <div style={{
        position:"absolute", bottom:0, left:0, right:0,
        padding:"14px 8px 6px",
        background:"linear-gradient(180deg,transparent,rgba(44,62,107,0.45))",
      }}>
        <div style={{fontFamily:"'Playfair Display',serif",fontSize:11,fontWeight:600,fontStyle:"italic",color:"#fff",letterSpacing:0.2}}>
          {t.label}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PhoneFrame, PhoneHome, PhoneJournal, PhoneVision, PhoneAppScreen, Stars, Ring });