/* global React */

const BP_BASE = (window.BOLDER_LOCAL_ASSETS || 'assets/') + 'blueprint/';

const SEM = ['sem-1.png','sem-2.png','sem-3.png','sem-4.png'];
const COM = ['com-1.png','com-2.png','com-3.png','com-4.png'];

function Blueprint() {
  return (
    <Section id="blueprint" tone="paper">
      <SectionHead
        num="05 / Fundação"
        tag={<BeTag name="Blueprint" size="lg" />}
        title="O <em>ADN generativo</em> da sua marca."
        sub="Estudo exaustivo da marca + mercado, transformado em modelo proprietário, prompts-base e LoRA treinado. Setup único."
      />

      <div className="grid-2">

        {/* SEM BLUEPRINT */}
        <Reveal>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, alignItems: "center" }}>
            <span className="mono mono-ink">Sem Blueprint</span>
            <span className="mono" style={{ color: "var(--muted-2)" }}>△ Sem identidade própria</span>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6,
            padding: 8,
            border: "1px dashed var(--rule-strong)", borderRadius: 12
          }}>
            {SEM.map((f, i) => (
              <div key={i} style={{ position: "relative", borderRadius: 8, overflow: "hidden", aspectRatio: "1/1" }}>
                <img
                  src={BP_BASE + f}
                  alt={`Sem Blueprint ${i + 1}`}
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 20%", display: "block", filter: "saturate(0.7)" }}
                />
                <span className="mono" style={{
                  position: "absolute", left: 6, top: 6, fontSize: 9,
                  background: "rgba(0,0,0,0.55)", color: "rgba(255,255,255,0.8)",
                  padding: "2px 6px", borderRadius: 4
                }}>
                  IMG_{String.fromCharCode(65 + i)}
                </span>
              </div>
            ))}
          </div>
          <p className="mono" style={{ marginTop: 10, color: "var(--muted)", fontSize: 11 }}>
            Bom conteúdo. Podia ser qualquer marca do segmento.
          </p>
        </Reveal>

        {/* COM BLUEPRINT */}
        <Reveal delay={1}>
          <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12, alignItems: "center" }}>
            <span className="mono mono-ink">Com Blueprint</span>
            <span className="mono mono-coral">✓ Inconfundível</span>
          </div>
          <div style={{
            display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6,
            padding: 8,
            border: "1px solid var(--coral)", borderRadius: 12,
            background: "var(--coral-soft)"
          }}>
            {COM.map((f, i) => (
              <div key={i} style={{ position: "relative", borderRadius: 8, overflow: "hidden", aspectRatio: "1/1" }}>
                <img
                  src={BP_BASE + f}
                  alt={`Com Blueprint ${i + 1}`}
                  style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "50% 20%", display: "block" }}
                />
                <span className="mono" style={{
                  position: "absolute", left: 6, top: 6, fontSize: 9,
                  background: "rgba(255,87,51,0.85)", color: "#fff",
                  padding: "2px 6px", borderRadius: 4
                }}>
                  BP_0{i + 1}
                </span>
                {/* selo HV no último card */}
                {i === 3 && (
                  <div style={{ position: "absolute", bottom: 6, right: 6 }}>
                    <HumanVerifiedBadge id="HV-BP-001" />
                  </div>
                )}
              </div>
            ))}
          </div>
          <p className="mono mono-coral" style={{ marginTop: 10, fontSize: 11 }}>
            O mesmo produto. O mesmo segmento. Mas é desta marca — e só desta.
          </p>
        </Reveal>
      </div>

      <div className="grid-3" style={{ marginTop: 56, paddingTop: 32, borderTop: "1px solid var(--rule)" }}>
        <div>
          <span className="mono">Inclui</span>
          <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "flex", flexDirection: "column", gap: 8, fontFamily: "var(--font-mono)", fontSize: 12 }}>
            {["MANUAL_DE_MARCA_AI", "PROMPTS_BASE.LIB", "ESTILO_PROPRIETÁRIO", "LORA_TREINADO.MODEL", "GUIDELINES.PDF"].map((x, i) => (
              <li key={i} style={{ display: "flex", gap: 10 }}>
                <span style={{ color: "var(--coral)" }}>{String(i + 1).padStart(2, "0")}_</span>{x}
              </li>
            ))}
          </ul>
        </div>
        <div>
          <span className="mono">Duração</span>
          <div className="display" style={{ fontSize: 56, marginTop: 6, lineHeight: 1, letterSpacing: "-0.04em" }}>
            2–3 <span className="mono">semanas</span>
          </div>
        </div>
        <div>
          <span className="mono">Investimento · setup único</span>
          <div className="display" style={{ fontSize: 56, marginTop: 6, lineHeight: 1, letterSpacing: "-0.04em" }}>
            €1.000
          </div>
          <p className="mono mono-coral" style={{ marginTop: 10 }}>→ Descontos progressivos · Grátis no Agency</p>
        </div>
      </div>
    </Section>
  );
}

window.Blueprint = Blueprint;