/* Us Para Você — iPhone mockup: tela "Seu endereço nos EUA" (fiel ao print) */

function EnderecoMockup() {
  return (
    <div className="iphone-screen" aria-label="Tela do app: Seu endereço nos EUA">
      <div className="iphone-notch" />

      {/* Top: logo only, on white card */}
      <div style={mks.topLogo}>
        <img src="assets/logo-uspv-transparent.png" alt="" style={{ width: 38, height: 38, objectFit: "contain" }} />
      </div>

      {/* Currency + user + Menu row */}
      <div style={mks.headRow}>
        <div style={mks.currency}>
          <span style={{ color: "#5A6577", fontWeight: 700, fontSize: 9 }}>USD</span>
          <svg width="13" height="13" viewBox="0 0 24 24" aria-hidden="true">
            <circle cx="12" cy="12" r="11" fill="#1F9D6B"/>
            <path d="M5 12 L12 5 L19 12 L12 19 Z" fill="#FFDF00"/>
            <circle cx="12" cy="12" r="4" fill="#002776"/>
          </svg>
          <span style={{ fontWeight: 800, fontSize: 9.5, color: "#1B2E4B" }}>R$ 5,06</span>
          <span style={mks.bell}>
            <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#5A6577" strokeWidth="2" strokeLinecap="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0"/></svg>
          </span>
          <span style={{ fontSize: 9, color: "#1B2E4B", fontWeight: 600 }}>Lucas Furlan</span>
          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#5A6577" strokeWidth="2.5" strokeLinecap="round"><polyline points="6 9 12 15 18 9"/></svg>
        </div>
        <button style={mks.menuBtn}>
          <span style={mks.menuLines}><span /><span /><span /></span>
          Menu
        </button>
      </div>

      {/* 2x2 colored cards */}
      <div style={mks.cardsGrid}>
        <KpiCard label="PRODUTOS" value="12" tint="#E6EEF8" iconBg="#1B2E4B"
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>} />
        <KpiCard label="CAIXAS" value="74" tint="#FBE2DC" iconBg="#E04E3A"
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><path d="m3.27 6.96 8.73 5.05 8.73-5.05M12 22.08V12"/></svg>} />
        <KpiCard label="SERVIÇOS" value="15" tint="#FFF4D6" iconBg="#F1C232"
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 18v-6a9 9 0 0 1 18 0v6"/><path d="M21 19a2 2 0 0 1-2 2h-1v-5h3v3zM3 19a2 2 0 0 0 2 2h1v-5H3v3z"/></svg>} />
        <KpiCard label="ENVIOS" value="31" tint="#DCF1E5" iconBg="#1F9D6B"
          icon={<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4 20-7z"/></svg>} />
      </div>

      {/* Address section */}
      <div style={mks.addrHead}>
        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#1B2E4B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style={{ marginRight: 4 }}>
          <path d="M22 2 11 13"/><path d="M22 2 15 22l-4-9-9-4 20-7z"/>
        </svg>
        <span style={{ fontSize: 8.5, fontWeight: 800, letterSpacing: ".06em", color: "#1B2E4B" }}>SEU ENDEREÇO PARA COMPRAS</span>
      </div>

      <div style={mks.addrCard}>
        <AddrRow label="Destinatário" hint="(Full Name)" value="Lucas Furlan - Suite 1" />
        <AddrRow label="Endereço" hint="(Address)" value="Main St" />
        <AddrRow label="ade" value="Morrison" />
        <AddrRow label="" value="IL" />
        <AddrRow label="" value="61270" last />
      </div>

      {/* Bottom tab bar */}
      <div style={mks.tabbar}>
        {[
          { lbl: "Grupo de Compras", path: "M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z M23 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75" },
          { lbl: "Serviços", path: "M3 18v-6a9 9 0 0 1 18 0v6 M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3v5z M3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3v5z" },
          { lbl: "Envios", path: "M22 2 11 13 M22 2 15 22l-4-9-9-4 20-7z" },
        ].map((t, i) => (
          <div key={i} style={mks.tab}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
              <path d={t.path}/>
            </svg>
            <span style={{ fontSize: 7, fontWeight: 600, marginTop: 2, color: "white" }}>{t.lbl}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function KpiCard({ label, value, tint, iconBg, icon }) {
  return (
    <div style={mks.kpi}>
      <div style={{ fontSize: 8, fontWeight: 800, color: "#5A6577", letterSpacing: ".08em", marginBottom: 6 }}>{label}</div>
      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
        <div style={{ width: 22, height: 22, borderRadius: 6, background: iconBg, display: "grid", placeItems: "center", flexShrink: 0 }}>
          {icon}
        </div>
        <div style={{ fontSize: 16, fontWeight: 800, color: "#1B2E4B" }}>{value}</div>
      </div>
    </div>
  );
}

function AddrRow({ label, hint, value, last }) {
  return (
    <div style={{ display: "flex", alignItems: "center", padding: "5px 0", borderBottom: last ? "none" : "1px solid #EEF1F5" }}>
      <div style={{ width: 70, flexShrink: 0 }}>
        {label && <div style={{ fontSize: 8, fontWeight: 800, color: "#1B2E4B" }}>{label}</div>}
        {hint && <div style={{ fontSize: 6.5, color: "#8A93A3", fontWeight: 600 }}>{hint}</div>}
      </div>
      <div style={{ fontSize: 8.5, color: "#1B2E4B", fontWeight: 600 }}>{value}</div>
    </div>
  );
}

const mks = {
  topLogo: { padding: "30px 14px 6px", display: "flex" },
  headRow: { padding: "0 12px 8px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 6 },
  currency: { display: "inline-flex", alignItems: "center", gap: 5, background: "white", padding: "5px 8px", borderRadius: 6, boxShadow: "0 1px 2px rgba(27,46,75,.06)", flexShrink: 1 },
  bell: { display: "inline-flex", marginLeft: 2 },
  menuBtn: { display: "inline-flex", alignItems: "center", gap: 5, background: "#1B2E4B", color: "white", padding: "5px 10px", borderRadius: 8, fontSize: 9.5, fontWeight: 700, border: "none", flexShrink: 0 },
  menuLines: { display: "inline-flex", flexDirection: "column", gap: 1.5 },
  cardsGrid: { padding: "0 12px", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 },
  kpi: { background: "white", borderRadius: 8, padding: "8px 10px", boxShadow: "0 1px 3px rgba(27,46,75,.06)" },
  addrHead: { padding: "12px 12px 6px", display: "flex", alignItems: "center" },
  addrCard: { margin: "0 12px", background: "white", borderRadius: 8, padding: "4px 10px", boxShadow: "0 1px 3px rgba(27,46,75,.06)" },
  tabbar: { position: "absolute", bottom: 0, left: 0, right: 0, background: "#1B2E4B", padding: "8px 6px 12px", display: "flex", justifyContent: "space-around" },
  tab: { display: "flex", flexDirection: "column", alignItems: "center" }
};

// Keep the old name exported for backwards compat from sections.jsx
window.CreditosMockup = EnderecoMockup;
window.EnderecoMockup = EnderecoMockup;