/* Fabrica Interiors — Website UI kit · About + Services + Process */
const { Eyebrow: AbEyebrow, Lead: AbLead, Tag: AbTag, StatBlock: AbStat, ServiceRow: AbService, ProcessStep: AbStep } =
  window.FabricaInteriorsDesignSystem_978348;

function About() {
  return (
    <section id="o-nas" style={{ padding: "var(--section-y) 0" }}>
      <div className="kit-wrap">
        <div className="kit-about-grid">
          <figure className="kit-about-fig" style={{ position: "relative", minHeight: "clamp(460px,60vh,640px)", borderRadius: "var(--radius-xs)", margin: 0, border: "1px solid var(--border-default)", background: "var(--paper-deep)", padding: "clamp(30px,3.4vw,48px)", display: "flex", flexDirection: "column", justifyContent: "center", overflow: "hidden" }}>
            <span style={{ fontFamily: "var(--font-mono, ui-monospace, monospace)", fontSize: ".72rem", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--text-muted)" }}>Jak pracujeme</span>
            <p style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(1.3rem,1.8vw,1.6rem)", lineHeight: 1.12, letterSpacing: "-.01em", color: "var(--ink)", margin: "12px 0 clamp(26px,3.4vh,40px)", maxWidth: "22ch" }}>Od první schůzky k hotovému interiéru.</p>
            <div style={{ position: "relative" }}>
              <div style={{ position: "absolute", left: "21px", top: "22px", bottom: "22px", width: "1px", background: "var(--border-default)" }} />
              <ol style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: "clamp(20px,3vh,30px)" }}>
                {[["01", "Konzultace", "Sejdeme se, vyslechneme vaše představy a přesně zaměříme prostor."], ["02", "Návrh", "Připravíme návrh i 3D vizualizaci s jasnou cenovou nabídkou."], ["03", "Výroba", "Ve vlastní dílně vyrobíme nábytek z pečlivě vybraných materiálů."], ["04", "Montáž", "Profesionálně namontujeme a předáme hotové dílo připravené k užívání."]].map(([n, t, d]) => (
                  <li key={n} style={{ position: "relative", display: "flex", alignItems: "flex-start", gap: "18px" }}>
                    <span style={{ flex: "0 0 auto", width: "44px", height: "44px", borderRadius: "50%", border: "1px solid var(--oak)", background: "var(--paper-deep)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "1.05rem", color: "var(--oak-deep)" }}>{n}</span>
                    <span style={{ display: "flex", flexDirection: "column", paddingTop: "2px" }}>
                      <span style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "clamp(1.12rem,1.5vw,1.34rem)", color: "var(--ink)", lineHeight: 1.1 }}>{t}</span>
                      <span style={{ fontFamily: "var(--font-body)", fontSize: ".88rem", color: "var(--text-body)", marginTop: "4px", lineHeight: 1.5, maxWidth: "34ch" }}>{d}</span>
                    </span>
                  </li>
                ))}
              </ol>
            </div>
          </figure>
          <div>
            <AbEyebrow>O nás</AbEyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "var(--fs-h2)", lineHeight: 1.04, letterSpacing: "-.01em", marginTop: "20px", color: "var(--ink)" }}>
              Truhlářské studio s velkým důrazem na preciznost.
            </h2>
            <p style={aboutP}>Fabrica Interiors je truhlářské studio, které spojuje čistý moderní design s poctivým řemeslem. Každý kus nábytku navrhujeme a vyrábíme na míru konkrétnímu prostoru i člověku.</p>
            <p style={aboutP}>Pracujeme s kvalitním masivem, dýhou a prověřeným kováním. Záleží nám na detailu, který nejde vidět na první pohled — ale pozná se po letech každodenního používání.</p>
          </div>
        </div>
      </div>
    </section>
  );
}
const aboutP = { fontFamily: "var(--font-body)", color: "var(--text-body)", fontSize: "clamp(1rem,1.3vw,1.12rem)", marginTop: "1.1em", maxWidth: "50ch", lineHeight: "var(--lh-body)" };

function Services() {
  const svc = [
    ["01", "Kuchyně na míru", "Funkční a nadčasové kuchyně přizpůsobené vašemu prostoru i způsobu vaření."],
    ["02", "Vestavěné skříně & úložné prostory", "Chytrá úložná řešení, která dokonale využijí každý centimetr."],
    ["03", "Vestavěný nábytek", "Nábytek navržený přesně na míru — od stěny ke stěně, od podlahy ke stropu."],
    ["04", "Police & truhlářské prvky", "Detaily z masivu i dýhy, které dotvářejí charakter celého interiéru."],
    ["05", "Kompletní realizace interiérů", "Jeden partner pro celý interiér — od návrhu přes výrobu až po montáž."],
  ];
  return (
    <section id="sluzby" style={{ padding: "0 0 var(--section-y)" }}>
      <div className="kit-wrap">
        <div className="kit-sec-head">
          <div>
            <AbEyebrow>Služby</AbEyebrow>
            <h2 style={secH2}>Co pro vás vyrobíme</h2>
          </div>
          <AbLead style={{ maxWidth: "34ch" }}>Od jednoho prvku po kompletní interiér. Vše navržené a vyrobené na míru vašemu prostoru.</AbLead>
        </div>

        <div className="kit-services">
          {svc.map(([n, t, d]) => <AbService key={n} num={n} title={t}>{d}</AbService>)}
        </div>
      </div>
    </section>
  );
}
const secH2 = { fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "var(--fs-h2)", lineHeight: 1.04, letterSpacing: "-.01em", marginTop: "20px", color: "var(--ink)" };

window.About = About;
window.Services = Services;