const { TickRule, Button, Card, Icon, SectionHeading, DataRow } = (window.FintelligentComTrLanding_96e553 || (console.error("Fintelligent DS: _ds_bundle.js not loaded — check the <script src> path"), {}));

function ContactScreen({ lang, onNav }) {
  const T = window.T;
  const { Container, Section, Reveal } = window;
  const c = window.SITE.company;
  const [copied, setCopied] = React.useState(false);

  const copy = () => {
    navigator.clipboard && navigator.clipboard.writeText(c.email).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 2200);
    });
  };

  return (
    <div>
      <Container style={{ paddingTop: 72, paddingBottom: 48 }}>
        <SectionHeading eyebrow={T({ tr: "İletişim", en: "Contact" }, lang)} as="h1" size="lg"
          title={T({ tr: "Ekibimizle görüşün", en: "Talk to our team" }, lang)}
          lede={T({ tr: "Bize e-posta ile ulaşabilirsiniz.", en: "You can reach us by email." }, lang)} />
      </Container>

      <Section pad="sm" style={{ paddingTop: 0 }}>
        <Container>
          <div className="g-contact" style={{ display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: 72, alignItems: "start" }}>
            <Card padding="lg">
              <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)" }}>
                {T({ tr: "E-posta", en: "Email" }, lang)}
              </div>
              <a href={"mailto:" + c.email}
                style={{ display: "block", marginTop: 14, fontFamily: "var(--font-display)", fontSize: "clamp(24px,3.2vw,38px)", fontWeight: 600, letterSpacing: "-0.028em", lineHeight: 1.1, color: "var(--navy-900)", textDecoration: "none", overflowWrap: "anywhere" }}>
                {c.email}
              </a>
              <p style={{ marginTop: 16, fontSize: 16, lineHeight: 1.62, color: "var(--text-secondary)", maxWidth: 480 }}>
                {T({
                  tr: "İş birliği, entegrasyon, destek ve KVKK talepleriniz dahil tüm konularda bu adrese yazabilirsiniz. Entegrasyon talepleri için mevcut POS ve ERP sisteminizi belirtmeniz süreci hızlandırır.",
                  en: "You can write to this address for all matters, including partnerships, integration, support and KVKK requests. For integration requests, naming your current POS and ERP speeds things up.",
                }, lang)}
              </p>
              <div style={{ marginTop: 26, display: "flex", alignItems: "center", gap: 14, flexWrap: "wrap" }}>
                <Button size="lg" arrow onClick={() => { window.location.href = "mailto:" + c.email; }}>
                  {T({ tr: "E-posta gönderin", en: "Send an email" }, lang)}
                </Button>
                <Button size="lg" variant="secondary" onClick={copy}>
                  {copied ? T({ tr: "Kopyalandı", en: "Copied" }, lang) : T({ tr: "Adresi kopyalayın", en: "Copy the address" }, lang)}
                </Button>
              </div>
            </Card>

            <div>
              <Card padding="lg" variant="subtle">
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)" }}>
                  {T({ tr: "Kayıtlı adres", en: "Registered address" }, lang)}
                </div>
                <div style={{ marginTop: 10, fontSize: 17, lineHeight: 1.55, color: "var(--navy-900)" }}>{c.legalName}</div>
                <div style={{ marginTop: 6, fontSize: 15, lineHeight: 1.62, color: "var(--navy-500)" }}>{c.address}</div>
              </Card>
              <div style={{ marginTop: 24 }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: ".10em", textTransform: "uppercase", color: "var(--navy-400)", marginBottom: 10 }}>
                  {T({ tr: "Sicil bilgileri", en: "Registry details" }, lang)}
                </div>
                {[["VKN", c.vkn], [T({ tr: "Vergi dairesi", en: "Tax office" }, lang), c.taxOffice]].map(([k, v], i) => (
                  <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "9px 0", borderBottom: "1px solid var(--border-subtle)" }}>
                    <span style={{ fontSize: 14, color: "var(--navy-500)" }}>{k}</span>
                    <span className="tabular" style={{ fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--navy-900)" }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, { ContactScreen });