// Splash - mobile: capa no modelo do Cenáculo; desktop: foto de São José ao lado do título

const VERSICULO = "“Aquele que perseverar até o fim será salvo.”";

// Barra do topo no padrão do Muscle Builder: marca à esquerda, Instalar app + Entrar à direita.
function SplashHeader({ dark, onStart }) {
  return (
    <header className="relative z-20 flex items-center justify-between gap-2 w-full">
      <div className="flex items-center gap-2.5 min-w-0">
        <img src="assets/favicon-192.png" alt="" className="w-8 h-8 lg:w-9 lg:h-9 rounded-xl shrink-0" />
        <span className="hidden min-[380px]:inline font-headline font-bold text-[15px] lg:text-[16px] truncate" style={{ color: dark ? "#FAF7F2" : "#1B2329" }}>
          Perseverança
        </span>
      </div>
      <div className="relative flex items-center gap-1.5 lg:gap-2 shrink-0">
        <InstallButton dark={dark} />
        {/* No desktop o "Começar o estudo" já faz esse papel. */}
        {!dark && (
          <button
            type="button"
            onClick={onStart}
            className="rounded-full px-3 py-1.5 text-[12px] font-bold"
            style={{ color: "#1B2329", border: "1px solid rgba(27,35,41,0.25)", background: "rgba(255,253,248,0.6)" }}
          >
            Entrar
          </button>
        )}
      </div>
    </header>
  );
}

function SplashCapa({ ultimo, onStart, onContinue }) {
  const glow = { textShadow: "0 1px 14px rgba(248,244,238,0.95), 0 0 2px rgba(248,244,238,0.9)" };
  return (
    <div className="absolute inset-0 overflow-hidden" style={{ background: "#F8F4EE" }}>
      <img
        src="assets/capa-splash.webp"
        alt="São José com o Menino Jesus"
        className="absolute inset-0 w-full h-full fade-in"
        style={{ objectFit: "cover", objectPosition: "center top" }}
      />
      <div
        className="absolute inset-0 pointer-events-none"
        style={{
          background:
            "linear-gradient(to bottom, rgba(248,244,238,0.42) 0%, rgba(248,244,238,0.04) 15%, rgba(248,244,238,0.06) 30%, rgba(248,244,238,0.38) 44%, rgba(248,244,238,0.62) 60%, rgba(248,244,238,0.86) 78%, #F8F4EE 100%)",
        }}
      />

      <div
        className="relative h-full flex flex-col items-center text-center px-6"
        style={{ paddingBottom: "calc(env(safe-area-inset-bottom, 0px) + 108px)" }}
      >
        <div className="w-full -mx-1 pt-[calc(env(safe-area-inset-top,0px)+14px)]">
          <SplashHeader dark={false} onStart={onStart} />
        </div>
        <div className="mt-6 slide-up" style={glow}>
          <div className="font-label text-[11px] uppercase tracking-[0.28em] font-bold" style={{ color: "#5E3B10" }}>
            Grupo de Perseverança São Lucas
          </div>
          <div className="font-label text-[11px] tracking-[0.4em] font-bold mt-2" style={{ color: "#5E3B10" }}>
            · 2026 ·
          </div>
        </div>

        <div className="flex-1" />

        <div className="w-full flex flex-col items-center slide-up" style={glow}>
          <h1
            className="font-headline font-bold tracking-tight leading-[1.02]"
            style={{ color: "#1B2329", fontSize: "clamp(38px, 12vw, 50px)" }}
          >
            Perseverança
            <span className="block" style={{ color: "#7A4F18" }}>São José</span>
          </h1>
          <p className="font-headline italic text-[22px] leading-snug mt-3" style={{ color: "#1B2329" }}>
            Grupo RCC 2026
          </p>
          <div className="flex items-center gap-3 mt-3 w-40">
            <div className="gilded-divider flex-1" />
            <span className="text-[11px]" style={{ color: "#C4914E" }}>✦</span>
            <div className="gilded-divider flex-1" />
          </div>
          <p className="font-headline italic text-[15px] leading-snug mt-3 max-w-[310px]" style={{ color: "#2A333A" }}>
            {VERSICULO} — Mt 24,13
          </p>
        </div>

        <button
          onClick={onStart}
          className="mt-6 w-full py-[18px] rounded-2xl font-headline text-[19px] tracking-wide flex items-center justify-center gap-2 active:scale-[0.98] transition-transform slide-up"
          style={{
            color: "#FAF7F2",
            background: "linear-gradient(135deg, rgba(122,79,24,0.96) 0%, rgba(138,90,30,0.94) 100%)",
            boxShadow: "0 18px 36px -18px rgba(59,40,21,0.6), inset 0 1px 0 rgba(255,255,255,0.15)",
          }}
        >
          Entrar
          <Icon name="arrow_forward" />
        </button>

        <div className="mt-5 slide-up">
          <div className="font-label text-[10px] uppercase tracking-[0.25em] font-bold" style={{ color: "#1F3749" }}>
            Tela inicial da Perseverança
          </div>
          {ultimo && ultimo.titulo ? (
            <button onClick={onContinue} className="text-[13px] mt-1.5 underline underline-offset-[3px]" style={{ color: "#55606A" }}>
              Continuar: {ultimo.titulo} · Pág. {ultimo.pg}
            </button>
          ) : (
            <p className="text-[13px] leading-relaxed mt-1.5 max-w-[300px]" style={{ color: "#55606A" }}>
              Use a barra inferior para navegar entre Módulos, Estudo e Dúvidas.
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

function SplashDesktop({ ultimo, onStart, onContinue }) {
  return (
    <div className="absolute inset-0 flex flex-col overflow-hidden night-gradient">
      <div className="w-full max-w-[1180px] mx-auto px-12 pt-6">
        <SplashHeader dark onStart={onStart} />
      </div>
      <div className="flex items-center gap-16 w-full max-w-[1180px] mx-auto flex-1 min-h-0 px-12 pt-6 pb-10">
        <div className="relative h-full flex-1 min-w-0 flex items-center justify-center fade-in">
          <img
            src="assets/capa-splash.webp"
            alt="São José com o Menino Jesus"
            className="max-h-full max-w-full rounded-[28px]"
            style={{ objectFit: "contain", boxShadow: "0 40px 90px -30px rgba(0,0,0,0.75), 0 0 0 1px rgba(237,200,119,0.18)" }}
          />
        </div>
        <div className="w-[440px] shrink-0 slide-up">
          <div className="font-label text-[10px] uppercase tracking-[0.3em] font-bold" style={{ color: "#EDC877" }}>
            Renovação Carismática Católica
          </div>
          <h1 className="font-headline text-[56px] leading-[1.05] tracking-tight mt-2" style={{ color: "#FAF7F2" }}>
            Grupo de <em style={{ color: "#EDC877" }}>Perseverança</em>
          </h1>
          <p className="font-headline italic text-[18px] mt-4" style={{ color: "rgba(250,247,242,0.72)" }}>
            {VERSICULO} — Mt 24,13
          </p>
          <button
            onClick={onStart}
            className="mt-10 w-full py-4 rounded-xl gold-gradient font-headline text-lg tracking-wide flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
            style={{ color: "#08161A", boxShadow: "0 14px 32px -18px rgba(237,200,119,0.6)" }}
          >
            Começar o estudo
            <Icon name="arrow_forward" />
          </button>
          {ultimo && ultimo.titulo && (
            <button
              onClick={onContinue}
              className="mt-3 w-full py-3 rounded-xl text-[13px] font-bold tracking-wide flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
              style={{ color: "#FAF7F2", background: "rgba(250,247,242,0.08)", border: "1px solid rgba(237,200,119,0.25)" }}
            >
              <Icon name="menu_book" style={{ fontSize: 18 }} />
              Continuar: {ultimo.titulo} · Pág. {ultimo.pg}
            </button>
          )}
        </div>
      </div>
    </div>
  );
}

function SplashScreen({ wide = false, ...props }) {
  return wide ? <SplashDesktop {...props} /> : <SplashCapa {...props} />;
}

Object.assign(window, { SplashScreen });