// phone.jsx — animated phone mockup showing splitfast bill flow

function PhoneFrame({ children, tilt = 0, scale = 1 }){
  return (
    <div style={{
      width: 280, height: 580,
      background: "#0A0A0A",
      borderRadius: 44,
      padding: 12,
      boxShadow: "10px 10px 0 #0A0A0A, 12px 12px 0 #FF3D00",
      transform: `rotate(${tilt}deg) scale(${scale})`,
      flexShrink: 0,
    }}>
      <div style={{
        width: "100%", height: "100%",
        background: "#F5F1E8",
        borderRadius: 32,
        overflow: "hidden", position: "relative",
        fontFamily: "'Space Grotesk', sans-serif",
        color: "#0A0A0A",
      }}>
        <div style={{
          position:"absolute", top:8, left:"50%", transform:"translateX(-50%)",
          width:80, height:22, background:"#0A0A0A", borderRadius:999, zIndex:5,
        }} />
        {children}
      </div>
    </div>
  );
}

function PhoneScreen1(){
  return (
    <div style={{ padding: "44px 18px 18px", height:"100%", display:"flex", flexDirection:"column", gap:14 }}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center" }}>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:11, opacity:0.6, textTransform:"uppercase" }}>tap to log</div>
        <div style={{ width:28, height:28, background:"#FFEF00", border:"2px solid #0A0A0A", borderRadius:999 }}/>
      </div>
      <div style={{ fontFamily:"'Anton', sans-serif", fontSize:42, lineHeight:0.9, textTransform:"uppercase" }}>
        Pizza<br/>Wednesday
      </div>
      <div style={{ background:"#FFEF00", border:"2.5px solid #0A0A0A", padding:14, marginTop:4 }}>
        <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, textTransform:"uppercase", opacity:0.7 }}>total</div>
        <div style={{ fontFamily:"'Anton', sans-serif", fontSize:54, lineHeight:0.9 }}>$87.40</div>
      </div>
      <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, textTransform:"uppercase", opacity:0.6 }}>SPLIT BETWEEN</div>
      <div style={{ display:"flex", gap:6, flexWrap:"wrap" }}>
        {["AL","KAI","JO","MO"].map((n,i)=>(
          <div key={i} style={{
            padding:"8px 12px", border:"2.5px solid #0A0A0A",
            background:i===3?"#FF3D00":"#fff", color:i===3?"#FFEF00":"#0A0A0A",
            fontFamily:"'Anton', sans-serif", fontSize:18, letterSpacing:"0.02em",
          }}>{n}{i===3 && " ✓"}</div>
        ))}
        <div style={{ padding:"8px 12px", border:"2.5px dashed #0A0A0A", fontFamily:"'JetBrains Mono', monospace", fontSize:11 }}>+ ADD</div>
      </div>
      <div style={{ marginTop:"auto", display:"flex", gap:8 }}>
        <div style={{ flex:1, background:"#0A0A0A", color:"#FFEF00", padding:"14px", textAlign:"center", fontFamily:"'Anton', sans-serif", fontSize:22, letterSpacing:"0.04em" }}>SEND IT</div>
      </div>
    </div>
  );
}

function PhoneScreen2(){
  return (
    <div style={{ padding: "44px 18px 18px", height:"100%", display:"flex", flexDirection:"column", gap:12 }}>
      <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, textTransform:"uppercase", opacity:0.6 }}>FRIDAY 14:22</div>
      <div style={{ fontFamily:"'Anton', sans-serif", fontSize:36, lineHeight:0.9, textTransform:"uppercase" }}>
        Bill split<br/>in <span style={{ background:"#FF3D00", color:"#FFEF00", padding:"0 4px" }}>1.8s</span>
      </div>
      <div style={{ display:"flex", flexDirection:"column", gap:7, marginTop:6 }}>
        {[
          ["Kai", "$21.85", true],
          ["Jo", "$21.85", true],
          ["Mo", "$21.85", false],
          ["You", "$21.85", true],
        ].map(([n,a,paid],i)=>(
          <div key={i} style={{
            display:"flex", justifyContent:"space-between", alignItems:"center",
            padding:"10px 12px", border:"2.5px solid #0A0A0A",
            background: paid ? "#FFEF00" : "#fff",
          }}>
            <div style={{ fontFamily:"'Space Grotesk', sans-serif", fontWeight:600, fontSize:14 }}>{n}</div>
            <div style={{ display:"flex", gap:8, alignItems:"center" }}>
              <div style={{ fontFamily:"'Anton', sans-serif", fontSize:18 }}>{a}</div>
              <div style={{
                fontFamily:"'JetBrains Mono', monospace", fontSize:9, padding:"2px 6px",
                background: paid?"#0A0A0A":"#FF3D00", color: paid?"#FFEF00":"#FFEF00",
              }}>{paid?"PAID":"DUE"}</div>
            </div>
          </div>
        ))}
      </div>
      <div style={{ marginTop:"auto", fontFamily:"'JetBrains Mono', monospace", fontSize:10, opacity:0.6, textAlign:"center" }}>
        // EVERYONE CAN SEE. NO SCREENSHOTS NEEDED.
      </div>
    </div>
  );
}

function PhoneScreen3(){
  return (
    <div style={{ padding: "44px 18px 18px", height:"100%", display:"flex", flexDirection:"column", gap:12 }}>
      <div style={{ fontFamily:"'JetBrains Mono', monospace", fontSize:10, textTransform:"uppercase", opacity:0.6 }}>THIS MONTH</div>
      <div style={{ fontFamily:"'Anton', sans-serif", fontSize:36, lineHeight:0.9, textTransform:"uppercase" }}>
        You're owed<br/>
        <span style={{ color:"#FF3D00" }}>$127.40</span>
      </div>
      <div style={{ display:"flex", justifyContent:"space-between", padding:"6px 0", borderTop:"2px solid #0A0A0A", borderBottom:"2px solid #0A0A0A", fontFamily:"'JetBrains Mono', monospace", fontSize:11, textTransform:"uppercase" }}>
        <span>32 BILLS</span><span>4 GROUPS</span><span>NETTED</span>
      </div>
      <div style={{ display:"flex", flexDirection:"column", gap:6 }}>
        {[
          ["Flat 14B", "+$64.20"],
          ["Lisbon Crew", "+$42.10"],
          ["Sunday Roast", "+$21.10"],
          ["Mo (loan)", "$0.00"],
        ].map(([n,a],i)=>(
          <div key={i} style={{ display:"flex", justifyContent:"space-between", padding:"8px 10px", background:i%2?"#FFEF00":"#fff", border:"2px solid #0A0A0A" }}>
            <span style={{ fontWeight:600, fontSize:13 }}>{n}</span>
            <span style={{ fontFamily:"'Anton', sans-serif", fontSize:18 }}>{a}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop:"auto", background:"#FF3D00", color:"#FFEF00", padding:"12px", textAlign:"center", fontFamily:"'Anton', sans-serif", fontSize:20 }}>SETTLE WITH 1 TAP</div>
    </div>
  );
}

function AnimatedPhone(){
  const [idx, setIdx] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setIdx((i) => (i + 1) % 3), 3200);
    return () => clearInterval(t);
  }, []);
  const screens = [PhoneScreen1, PhoneScreen2, PhoneScreen3];
  const Cur = screens[idx];
  return (
    <div style={{ display:"flex", justifyContent:"center", alignItems:"center", gap:30, flexWrap:"wrap" }}>
      <PhoneFrame tilt={-4}>
        <Cur />
      </PhoneFrame>
      <div style={{ display:"flex", flexDirection:"column", gap:10, fontFamily:"'JetBrains Mono', monospace", fontSize:11, color:"#FFEF00", textTransform:"uppercase" }}>
        {["log it","split it","done"].map((t,i)=>(
          <div key={i} style={{
            padding:"8px 14px", border:"2px solid currentColor",
            opacity: idx===i?1:0.35, background: idx===i?"#FFEF00":"transparent",
            color: idx===i?"#0A0A0A":"#FFEF00",
            transition:"all 0.3s",
          }}>{i+1}. {t}</div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { AnimatedPhone, PhoneFrame });