/* Foto Neon — About page. Brand-true copy only (no invented years/team/stats):
   what they make, how they work, where they work, and the values behind it. */

const FNA = window.FotoNeonDesignSystem_0a5c5f;
const { NeonHeading: AHeading, NeonText: AText, SectionLabel: ALabel, NeonButton: AButton, GlassCard: ACard } = FNA;

const VALUES = [
  { icon: "🔧", color: "pink", title: "Ručna izrada", text: "Svaki znak savijamo, spajamo i testiramo ručno — bez prečica, sa pažnjom na svaki detalj." },
  { icon: "🎨", color: "cyan", title: "Custom dizajn", text: "Vaš tekst, vaša boja, vaše dimenzije. Pre izrade dobijate digitalni mock-up na odobrenje." },
  { icon: "💡", color: "yellow", title: "LED tehnologija", text: "Moderni LED neon: energetski efikasan, dugotrajan, dimabilan i bezbedan za dodir." },
];

const AREAS = ["Niš", "Medijana", "Palilula", "Pantelej", "Crveni Krst", "Niška Banja", "Aleksinac", "Doljevac", "Merošina", "Gadžin Han"];

function AboutSection({ children, style }) {
  return <section style={{ position: "relative", padding: "0 1.5rem 6rem", ...style }}><div style={{ maxWidth: "72rem", margin: "0 auto" }}>{children}</div></section>;
}

function AboutPage({ onNav }) {
  window.useFotoNeonAnimations();
  const nav = onNav || (() => {});
  return (
    <div>
      {/* Header */}
      <section style={{ position: "relative", padding: "9rem 1.5rem 3rem", textAlign: "center" }}>
        <div style={{ maxWidth: "50rem", margin: "0 auto" }}>
          <ALabel color="cyan" align="center" data-hero="eyebrow">O nama</ALabel>
          <AHeading color="pink" size="lg" align="center" animate="flicker" data-hero="title" style={{ margin: "1rem 0 1.5rem" }}>Foto Neon</AHeading>
          <p data-hero="lead" style={{ color: "var(--text-secondary)", fontSize: "1.25rem", lineHeight: 1.6, margin: 0 }}>
            Radionica za <AText color="cyan">custom neon znakove</AText> iz Niša. Pretvaramo ideje u svetlost — od jedne reči do celog izloga.
          </p>
        </div>
      </section>

      {/* Story */}
      <AboutSection>
        <div className="fn-split" data-reveal data-parallax="6" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3.5rem", alignItems: "center", padding: "2.5rem", border: "1px solid var(--border-hairline)", background: "var(--surface-card)", backdropFilter: "blur(12px)" }}>
          <div style={{ display: "grid", placeItems: "center", minHeight: "16rem" }}>
            <AHeading size="md" color="cyan" animate="pulse" align="center">Od ideje<br/>do sjaja</AHeading>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: "1.1rem" }}>
            <p style={{ margin: 0, color: "var(--text-secondary)", lineHeight: 1.7, fontSize: "1.05rem" }}>
              Foto Neon izrađuje svetleće znakove, LED reklame i alu-bond signalizaciju po meri. Svaki komad nastaje u radionici, ručno — od dizajna i mock-upa, preko izrade, do montaže kod vas.
            </p>
            <p style={{ margin: 0, color: "var(--text-secondary)", lineHeight: 1.7, fontSize: "1.05rem" }}>
              Bilo da opremate bar, restoran, radnju ili dom, cilj je isti: znak koji tačno pogađa vašu ideju i lepo svetli godinama.
            </p>
          </div>
        </div>
      </AboutSection>

      {/* Values */}
      <AboutSection>
        <div style={{ textAlign: "center", marginBottom: "3rem" }}>
          <ALabel color="yellow" align="center">Zašto Foto Neon</ALabel>
          <AHeading color="pink" size="md" align="center" animate="pulse" style={{ marginTop: "0.75rem" }}>Naše vrednosti</AHeading>
        </div>
        <div data-reveal-stagger="up" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))", gap: "1.75rem" }}>
          {VALUES.map((v) => (
            <ACard key={v.title} color={v.color} interactive corners padding="2rem">
              <div style={{ fontSize: "2.5rem", marginBottom: "1rem", color: `var(--neon-${v.color})` }}>{v.icon}</div>
              <h3 style={{ margin: "0 0 0.6rem", fontSize: "1.3rem", fontWeight: 700, color: "var(--text-primary)", textShadow: `0 0 18px color-mix(in srgb, var(--neon-${v.color}) 40%, transparent)` }}>{v.title}</h3>
              <p style={{ margin: 0, color: "var(--text-secondary)", lineHeight: 1.6 }}>{v.text}</p>
            </ACard>
          ))}
        </div>
      </AboutSection>

      {/* Service area */}
      <AboutSection>
        <div data-reveal data-parallax="9" style={{ textAlign: "center", padding: "3rem 2rem", border: "1px solid var(--border-hairline)", background: "var(--surface-card-alt)", backdropFilter: "blur(12px)" }}>
          <ALabel color="cyan" align="center">Gde radimo</ALabel>
          <AHeading color="cyan" size="md" align="center" style={{ margin: "0.75rem 0 1.75rem" }}>Niš i okolina</AHeading>
          <div style={{ display: "flex", flexWrap: "wrap", gap: "0.6rem", justifyContent: "center", maxWidth: "48rem", margin: "0 auto" }}>
            {AREAS.map((a) => (
              <span key={a} style={{ padding: "0.4rem 0.9rem", borderRadius: 9999, border: "1px solid rgba(255,255,255,0.16)", color: "var(--text-secondary)", fontSize: "0.85rem" }}>{a}</span>
            ))}
          </div>
        </div>
      </AboutSection>

      {/* CTA */}
      <AboutSection>
        <div data-reveal data-parallax="5" style={{ textAlign: "center" }}>
          <AHeading color="pink" size="lg" animate="pulse">Osvetlite svoju ideju</AHeading>
          <p style={{ color: "var(--text-secondary)", fontSize: "1.1rem", margin: "1.25rem auto 2rem", maxWidth: "34rem", lineHeight: 1.6 }}>
            Pošaljite nam ideju — dobićete besplatan mock-up i ponudu u roku od 24h.
          </p>
          <div style={{ display: "flex", gap: "1rem", justifyContent: "center", flexWrap: "wrap" }}>
            <AButton color="pink" onClick={() => nav("home")}>Kontaktirajte nas</AButton>
            <AButton color="cyan" onClick={() => nav("shop")}>Pogledaj shop</AButton>
          </div>
        </div>
      </AboutSection>
    </div>
  );
}

window.AboutPage = AboutPage;