/* Fabrica Interiors — Website UI kit · Contact + Footer (espresso surfaces) */
const { Eyebrow: CtEyebrow, Lead: CtLead, Field: CtField, Button: CtButton } =
  window.FabricaInteriorsDesignSystem_978348;

function Contact() {
  const [sent, setSent] = React.useState(false);
  const [err, setErr] = React.useState({});
  const ref = React.useRef({});

  const submit = (e) => {
    e.preventDefault();
    const f = new FormData(e.target);
    const next = {};
    if (!String(f.get("name") || "").trim()) next.name = true;
    const email = String(f.get("email") || "").trim();
    if (!email || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email)) next.email = true;
    if (!String(f.get("msg") || "").trim()) next.msg = true;
    setErr(next);
    if (Object.keys(next).length) return;
    setSent(true);
    e.target.reset();
    setTimeout(() => setSent(false), 4500);
  };

  const info = [
    ["E-mail", "info@fabricainteriors.cz", "mailto:info@fabricainteriors.cz"],
    ["Telefon", "+420 777 000 000", "tel:+420777000000"],
    ["Dílna", "Truhlářská 12, Praha", null],
    ["Instagram", "@fabrica.interiors", "#"],
  ];

  return (
    <section id="kontakt" style={{ padding: "var(--section-y) 0", background: "var(--surface-inverse)", color: "var(--text-on-dark)" }}>
      <div className="kit-wrap">
        <div className="kit-contact-grid">
          <div>
            <CtEyebrow onDark>Kontakt</CtEyebrow>
            <h2 style={{ fontFamily: "var(--font-serif)", fontWeight: 300, fontSize: "var(--fs-h2)", lineHeight: 1.04, letterSpacing: "-.01em", marginTop: "20px", color: "var(--text-on-dark)", maxWidth: "14ch" }}>
              Pojďme dát vašemu prostoru tvar.
            </h2>
            <CtLead onDark style={{ marginTop: "22px" }}>Napište nám svou představu — ozveme se s nezávaznou nabídkou a termínem konzultace.</CtLead>
            <div style={{ marginTop: "42px", display: "flex", flexDirection: "column" }}>
              {info.map(([k, v, href]) => (
                <div key={k} style={{ display: "flex", flexDirection: "column", padding: "18px 0", borderTop: "1px solid var(--border-on-dark)" }}>
                  <span style={{ fontFamily: "var(--font-body)", fontSize: "var(--fs-label)", letterSpacing: ".16em", textTransform: "uppercase", color: "var(--text-muted-on-dark)" }}>{k}</span>
                  {href
                    ? <a href={href} style={ciVal}>{v}</a>
                    : <span style={ciVal}>{v}</span>}
                </div>
              ))}
            </div>
          </div>

          <div>
            <form onSubmit={submit} noValidate style={{ display: "flex", flexDirection: "column", gap: "18px" }}>
              <CtField name="name" label="Jméno a příjmení" invalid={!!err.name} />
              <CtField name="email" label="E-mail" type="email" invalid={!!err.email} />
              <CtField name="phone" label="Telefon (nepovinné)" />
              <CtField name="msg" label="Vaše představa" multiline invalid={!!err.msg} />
              <div style={{ display: "flex", alignItems: "center", gap: "18px", marginTop: "8px", flexWrap: "wrap" }}>
                <CtButton variant="oak" type="submit" arrow>Odeslat poptávku</CtButton>
                <span style={{ fontFamily: "var(--font-body)", fontSize: ".9rem", color: "var(--oak)", opacity: sent ? 1 : 0, transition: "opacity .4s" }}>Děkujeme! Brzy se vám ozveme.</span>
              </div>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}
const ciVal = { fontFamily: "var(--font-serif)", fontSize: "var(--fs-serif-sm)", fontWeight: 300, marginTop: "6px", color: "var(--text-on-dark)" };

function Footer() {
  const links = [["#o-nas", "O nás"], ["#sluzby", "Služby"], ["#galerie", "Galerie"], ["#kontakt", "Kontakt"]];
  return (
    <footer style={{ background: "var(--surface-inverse)", color: "var(--text-on-dark)", padding: "54px 0 40px", borderTop: "1px solid var(--border-on-dark)" }}>
      <div className="kit-wrap">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "24px", flexWrap: "wrap" }}>
          <img src="../../assets/logo.png" alt="Fabrica Interiors" style={{ height: "22px", filter: "brightness(0) invert(1)", opacity: .9 }} />
          <nav style={{ display: "flex", gap: "26px", flexWrap: "wrap" }}>
            {links.map(([h, l]) => <a key={h} href={h} style={{ fontFamily: "var(--font-body)", fontSize: ".86rem", color: "var(--text-body-on-dark)" }}>{l}</a>)}
          </nav>
        </div>
        <div style={{ fontFamily: "var(--font-body)", color: "var(--text-muted)", fontSize: ".8rem", marginTop: "30px", letterSpacing: ".02em" }}>
          © {new Date().getFullYear()} Fabrica Interiors — nábytek a interiéry na míru. Všechna práva vyhrazena.
        </div>
      </div>
    </footer>
  );
}

window.Contact = Contact;
window.Footer = Footer;