/* global React, GlowButton, BlurOrb, Reveal, Icon */

/* Stylized phone mockup of the ATA dashboard — used in Hero and AppPreview */
function HeroPhone({ float = true, scale = 1, screen = "dashboard" }) {
  return (
    <div style={{
      position: "relative", width: 320 * scale, height: 660 * scale,
      animation: float ? "ata-float 7s ease-in-out infinite" : "none",
    }}>
      {/* Glow halo behind */}
      <div style={{
        position: "absolute", inset: -40, borderRadius: 999,
        background: "radial-gradient(50% 50% at 50% 50%, rgba(35,78,255,0.55), transparent 70%)",
        filter: "blur(20px)", zIndex: 0,
      }} />
      {/* Bezel */}
      <div style={{
        position: "absolute", inset: 0,
        borderRadius: 52 * scale,
        background: "linear-gradient(180deg, #1A2440 0%, #0B1224 100%)",
        border: "1px solid rgba(255,255,255,0.10)",
        boxShadow: "0 40px 80px rgba(0,0,0,0.55), 0 0 60px rgba(35,78,255,0.35), inset 0 1px 0 rgba(255,255,255,0.10)",
        padding: 5 * scale, zIndex: 1,
      }}>
        {/* Screen */}
        <div style={{
          width: "100%", height: "100%", borderRadius: 48 * scale, overflow: "hidden",
          background: "linear-gradient(180deg, #050816 0%, #0D1324 100%)",
          position: "relative",
        }}>
          {/* Dynamic island */}
          <div style={{
            position: "absolute", top: 12 * scale, left: "50%", transform: "translateX(-50%)",
            width: 110 * scale, height: 32 * scale, borderRadius: 999, background: "#000", zIndex: 5,
          }} />
          <PhoneScreen scale={scale} screen={screen} />
        </div>
      </div>
    </div>
  );
}

function PhoneScreen({ scale = 1, screen = "dashboard" }) {
  if (screen === "clientes") return <ScreenClientes scale={scale} />;
  if (screen === "agenda") return <ScreenAgenda scale={scale} />;
  if (screen === "aplicacoes") return <ScreenAplicacoes scale={scale} />;
  if (screen === "mapa") return <ScreenMapa scale={scale} />;
  return <ScreenDashboard scale={scale} />;
}

/* ----- Dashboard ----- */
function ScreenDashboard({ scale = 1 }) {
  const s = (n) => n * scale;
  return (
    <div style={{ padding: `${s(60)}px ${s(20)}px ${s(20)}px`, color: "#F5F7FF", fontFamily: "var(--font-sans)", height: "100%", boxSizing: "border-box", overflow: "hidden",
      background: "radial-gradient(60% 40% at 30% 0%, rgba(35,78,255,0.30), transparent 60%), linear-gradient(180deg, #050816, #0D1324)" }}>
      {/* status bar */}
      <div style={{ display: "flex", justifyContent: "space-between", fontSize: s(11), fontWeight: 600, color: "#F5F7FF", marginBottom: s(20) }}>
        <span>09:41</span>
        <span style={{ display: "flex", gap: s(4), alignItems: "center" }}>
          <Icon name="zap" size={s(10)} />
        </span>
      </div>
      <div style={{ fontSize: s(11), color: "#7B86A6", letterSpacing: "0.06em", textTransform: "uppercase", fontWeight: 600 }}>Bom dia</div>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em", marginTop: s(2) }}>Marcos Vieira</div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: s(8), marginTop: s(16) }}>
        <MiniStat scale={scale} label="Talhões" value="142" delta="+12" />
        <MiniStat scale={scale} label="Visitas/mês" value="38" delta="+5" />
      </div>

      <div style={{ marginTop: s(16), padding: s(14), borderRadius: s(20), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
        <div style={{ fontSize: s(10), color: "#7B86A6", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600 }}>Próxima visita</div>
        <div style={{ fontSize: s(15), fontWeight: 600, marginTop: s(6) }}>Fazenda São João</div>
        <div style={{ fontSize: s(11), color: "#B6C0DA", marginTop: 2 }}>Talhão 04 · Soja · 14h30</div>
        <div style={{ display: "flex", gap: s(6), marginTop: s(10) }}>
          <span style={{ fontSize: s(10), padding: `${s(4)}px ${s(8)}px`, borderRadius: 999, background: "rgba(91,127,255,0.14)", border: "1px solid rgba(91,127,255,0.40)", color: "#5B7FFF", fontWeight: 600 }}>Aplicação</span>
          <span style={{ fontSize: s(10), padding: `${s(4)}px ${s(8)}px`, borderRadius: 999, background: "rgba(46,212,162,0.10)", border: "1px solid rgba(46,212,162,0.35)", color: "#2ED4A2", fontWeight: 600 }}>Confirmada</span>
        </div>
      </div>

      <div style={{ marginTop: s(14), fontSize: s(11), color: "#7B86A6", letterSpacing: "0.08em", textTransform: "uppercase", fontWeight: 600 }}>Atividade</div>
      {[
        { t: "Aplicação registrada", s: "Talhão 12 · há 22min", c: "#2ED4A2" },
        { t: "Cliente cadastrado", s: "Agro Vale · há 1h", c: "#5B7FFF" },
        { t: "Agenda atualizada", s: "Sex · 14h30", c: "#F5B547" },
      ].map((a, i) => (
        <div key={i} style={{ display: "flex", alignItems: "center", gap: s(10), marginTop: s(10) }}>
          <div style={{ width: s(8), height: s(8), borderRadius: 999, background: a.c, boxShadow: `0 0 8px ${a.c}` }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: s(12), fontWeight: 600 }}>{a.t}</div>
            <div style={{ fontSize: s(10), color: "#7B86A6" }}>{a.s}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

function MiniStat({ scale = 1, label, value, delta }) {
  const s = (n) => n * scale;
  return (
    <div style={{ padding: s(12), borderRadius: s(16), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
      <div style={{ fontSize: s(10), color: "#7B86A6", fontWeight: 600 }}>{label}</div>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em", marginTop: s(2) }}>{value}</div>
      <div style={{ fontSize: s(10), color: "#2ED4A2", fontWeight: 600 }}>↑ {delta}</div>
    </div>
  );
}

/* ----- Clientes ----- */
function ScreenClientes({ scale = 1 }) {
  const s = (n) => n * scale;
  const items = [
    { n: "Fazenda São João", a: "Soja · 480 ha", i: "SJ", c: "#234EFF" },
    { n: "Agro Vale", a: "Milho · 320 ha", i: "AV", c: "#5B7FFF" },
    { n: "Sítio Esperança", a: "Café · 120 ha", i: "SE", c: "#6EE7FF" },
    { n: "Fazenda Boa Vista", a: "Soja · 660 ha", i: "BV", c: "#2ED4A2" },
    { n: "Rancho do Sol", a: "Milho · 240 ha", i: "RS", c: "#F5B547" },
  ];
  return (
    <div style={{ padding: `${s(60)}px ${s(18)}px 0`, color: "#F5F7FF", fontFamily: "var(--font-sans)", height: "100%", boxSizing: "border-box", background: "linear-gradient(180deg, #050816, #0D1324)" }}>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>Clientes</div>
      <div style={{ marginTop: s(12), height: s(38), borderRadius: s(14), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", padding: `0 ${s(12)}px`, display: "flex", alignItems: "center", gap: s(8), color: "#7B86A6", fontSize: s(12) }}>
        <span style={{ width: s(14), height: s(14), borderRadius: 999, border: "1.5px solid #7B86A6", display: "inline-block" }} />
        Buscar cliente, propriedade…
      </div>
      <div style={{ marginTop: s(12), display: "flex", flexDirection: "column", gap: s(8) }}>
        {items.map((it, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: s(12), padding: s(12), borderRadius: s(16), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
            <div style={{ width: s(40), height: s(40), borderRadius: s(12), background: `linear-gradient(135deg, ${it.c}, ${it.c}99)`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: s(13), fontWeight: 700, color: "#fff" }}>{it.i}</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: s(13), fontWeight: 600 }}>{it.n}</div>
              <div style={{ fontSize: s(11), color: "#7B86A6" }}>{it.a}</div>
            </div>
            <span style={{ color: "#5B7FFF", fontSize: s(16) }}>›</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ----- Agenda ----- */
function ScreenAgenda({ scale = 1 }) {
  const s = (n) => n * scale;
  const days = ["S","T","Q","Q","S","S","D"];
  return (
    <div style={{ padding: `${s(60)}px ${s(18)}px 0`, color: "#F5F7FF", fontFamily: "var(--font-sans)", height: "100%", boxSizing: "border-box", background: "linear-gradient(180deg, #050816, #0D1324)" }}>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>Outubro</div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: s(4), marginTop: s(14) }}>
        {days.map((d, i) => <div key={i} style={{ textAlign: "center", fontSize: s(10), color: "#7B86A6", fontWeight: 600 }}>{d}</div>)}
        {Array.from({ length: 21 }).map((_, i) => {
          const isToday = i === 9; const has = [3,7,9,12,16].includes(i);
          return <div key={i} style={{
            aspectRatio: "1", borderRadius: s(10), display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: s(11), fontWeight: 600,
            background: isToday ? "linear-gradient(135deg,#234EFF,#5B7FFF)" : has ? "rgba(91,127,255,0.10)" : "transparent",
            color: isToday ? "#fff" : has ? "#5B7FFF" : "#B6C0DA",
            border: has && !isToday ? "1px solid rgba(91,127,255,0.30)" : "none",
          }}>{i + 8}</div>;
        })}
      </div>
      <div style={{ marginTop: s(16), fontSize: s(10), color: "#7B86A6", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Hoje · Quinta</div>
      {[
        { t: "Visita técnica", s: "08h30 · Fazenda São João", c: "#5B7FFF" },
        { t: "Aplicação fungicida", s: "14h00 · Talhão 04", c: "#2ED4A2" },
        { t: "Reunião agro vale", s: "17h30", c: "#F5B547" },
      ].map((e, i) => (
        <div key={i} style={{ marginTop: s(8), padding: s(12), borderRadius: s(14), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", gap: s(10), alignItems: "center" }}>
          <div style={{ width: s(3), height: s(28), borderRadius: 999, background: e.c, boxShadow: `0 0 8px ${e.c}` }} />
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: s(13), fontWeight: 600 }}>{e.t}</div>
            <div style={{ fontSize: s(10), color: "#7B86A6" }}>{e.s}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

/* ----- Aplicações ----- */
function ScreenAplicacoes({ scale = 1 }) {
  const s = (n) => n * scale;
  return (
    <div style={{ padding: `${s(60)}px ${s(18)}px 0`, color: "#F5F7FF", fontFamily: "var(--font-sans)", height: "100%", boxSizing: "border-box", background: "linear-gradient(180deg, #050816, #0D1324)" }}>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>Aplicações</div>
      <div style={{ marginTop: s(12), padding: s(14), borderRadius: s(18), background: "linear-gradient(135deg, rgba(35,78,255,0.18), rgba(91,127,255,0.10))", border: "1px solid rgba(91,127,255,0.30)" }}>
        <div style={{ fontSize: s(10), color: "#5B7FFF", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Em andamento</div>
        <div style={{ fontSize: s(15), fontWeight: 600, marginTop: s(6) }}>Fungicida · Talhão 04</div>
        <div style={{ fontSize: s(11), color: "#B6C0DA", marginTop: 2 }}>Soja · 78 / 120 ha</div>
        <div style={{ marginTop: s(10), height: s(6), borderRadius: 999, background: "rgba(255,255,255,0.06)", overflow: "hidden" }}>
          <div style={{ width: "65%", height: "100%", background: "linear-gradient(90deg, #234EFF, #5B7FFF)", boxShadow: "0 0 12px rgba(35,78,255,0.6)" }} />
        </div>
      </div>
      <div style={{ marginTop: s(14), fontSize: s(10), color: "#7B86A6", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>Histórico</div>
      {[
        { p: "Glifosato", t: "Talhão 02 · Soja", d: "Há 2 dias", st: "ok" },
        { p: "Adubo NPK 10-10-10", t: "Talhão 07 · Milho", d: "Há 5 dias", st: "ok" },
        { p: "Herbicida atrazina", t: "Talhão 12 · Milho", d: "Há 7 dias", st: "ok" },
      ].map((a, i) => (
        <div key={i} style={{ marginTop: s(8), padding: s(12), borderRadius: s(14), background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div style={{ fontSize: s(13), fontWeight: 600 }}>{a.p}</div>
            <span style={{ fontSize: s(9), color: "#2ED4A2" }}>● Concluído</span>
          </div>
          <div style={{ fontSize: s(11), color: "#7B86A6", marginTop: 2 }}>{a.t} · {a.d}</div>
        </div>
      ))}
    </div>
  );
}

/* ----- Mapa ----- */
function ScreenMapa({ scale = 1 }) {
  const s = (n) => n * scale;
  return (
    <div style={{ padding: `${s(60)}px ${s(18)}px 0`, color: "#F5F7FF", fontFamily: "var(--font-sans)", height: "100%", boxSizing: "border-box", background: "linear-gradient(180deg, #050816, #0D1324)", position: "relative", overflow: "hidden" }}>
      <div style={{ fontSize: s(22), fontWeight: 700, fontFamily: "var(--font-display)", letterSpacing: "-0.02em" }}>Mapa</div>
      <div style={{ marginTop: s(12), height: s(380), borderRadius: s(20), border: "1px solid rgba(255,255,255,0.08)", position: "relative", overflow: "hidden",
        background: "radial-gradient(60% 60% at 50% 50%, rgba(35,78,255,0.20), transparent 70%), #0B1224" }}>
        {/* topo grid */}
        <svg viewBox="0 0 320 380" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
          <defs>
            <pattern id="g" width="20" height="20" patternUnits="userSpaceOnUse">
              <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.04)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="320" height="380" fill="url(#g)"/>
          <path d="M 30 80 Q 90 40 160 90 T 290 110 L 290 200 Q 220 250 140 220 T 30 240 Z" fill="rgba(35,78,255,0.18)" stroke="rgba(91,127,255,0.55)" strokeWidth="1.5"/>
          <path d="M 50 250 Q 110 230 170 260 T 280 280 L 280 340 Q 210 360 140 330 T 50 340 Z" fill="rgba(46,212,162,0.16)" stroke="rgba(46,212,162,0.50)" strokeWidth="1.5"/>
          <circle cx="150" cy="140" r="6" fill="#5B7FFF"/>
          <circle cx="150" cy="140" r="14" fill="rgba(91,127,255,0.30)"/>
          <circle cx="220" cy="290" r="5" fill="#2ED4A2"/>
        </svg>
        <div style={{ position: "absolute", left: s(12), bottom: s(12), padding: `${s(8)}px ${s(12)}px`, borderRadius: 999, background: "rgba(10,15,30,0.7)", backdropFilter: "blur(20px)", border: "1px solid rgba(255,255,255,0.10)", fontSize: s(11), fontWeight: 600 }}>Talhão 04 · 120 ha</div>
      </div>
    </div>
  );
}

window.HeroPhone = HeroPhone;
window.PhoneScreen = PhoneScreen;