const { Field, Input, Textarea, Select, Checkbox, Radio, Button, Alert, Icon, SectionLabel, Divider, Card } = window.BuildingInvestDesignSystem_f8840b;

function Contact({ lang }) {
  const t = window.I18N[lang];
  const width = useViewportWidth();
  const stack = width < 860;
  const formCols = width < 560 ? 1 : 2;
  const [sent, setSent] = React.useState(false);
  const [kind, setKind] = React.useState("pj");
  const [gdpr, setGdpr] = React.useState(false);
  const [err, setErr] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (!gdpr) { setErr(true); return; } setErr(false); setSent(true); };
  const infoRows = [
    ["map-pin", t.company.address],
    ["phone", t.company.phone],
    ["mail", t.company.email],
    ["clock", t.company.hours],
  ];
  return (
    <Section tone="light">
      <div style={{ display: "grid", gridTemplateColumns: stack ? "1fr" : "1.15fr 1fr", gap: stack ? "var(--space-8)" : "var(--space-11)", alignItems: "start" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
          <SectionLabel>{t.contact.label}</SectionLabel>
          <h1 style={{ font: "var(--type-h1)", letterSpacing: "var(--tracking-tight)" }}>{t.contact.h1}</h1>
          <p style={{ font: "var(--type-body-lg)", color: "var(--text-secondary)", maxWidth: "var(--measure-prose)" }}>{t.contact.lead}</p>
          {sent ? <Alert tone="success" title={t.contact.sentTitle}>{t.contact.sentBody}</Alert> : null}
          {err ? <Alert tone="danger" title={t.contact.errTitle}>{t.contact.errBody}</Alert> : null}
          <form onSubmit={submit} style={{ display: "grid", gridTemplateColumns: `repeat(${formCols},1fr)`, gap: "var(--space-5) var(--space-6)" }}>
            <div style={{ gridColumn: "1 / -1", display: "flex", gap: "var(--space-6)", flexWrap: "wrap" }}>
              <Radio name="kind" label={t.contact.kindLegal} checked={kind === "pj"} onChange={() => setKind("pj")} />
              <Radio name="kind" label={t.contact.kindPrivate} checked={kind === "pf"} onChange={() => setKind("pf")} />
              <Radio name="kind" label={t.contact.kindPublic} checked={kind === "ip"} onChange={() => setKind("ip")} />
            </div>
            <Field label={t.contact.nameLabel} htmlFor="c-name" required><Input id="c-name" placeholder={t.contact.namePlaceholder} /></Field>
            <Field label={kind === "pf" ? t.contact.orgLabelCity : t.contact.orgLabelCompany} htmlFor="c-org"><Input id="c-org" placeholder={kind === "pf" ? t.contact.orgPlaceholderCity : t.contact.orgPlaceholderCompany} /></Field>
            <Field label={t.contact.phoneLabel} htmlFor="c-tel" required hint={t.contact.phoneHint}><Input id="c-tel" icon="phone" placeholder={t.contact.phonePlaceholder} /></Field>
            <Field label={t.contact.emailLabel} htmlFor="c-mail"><Input id="c-mail" icon="mail" placeholder={t.contact.emailPlaceholder} /></Field>
            <Field label={t.contact.typeLabel} htmlFor="c-type"><Select id="c-type" placeholder={t.contact.typePlaceholder} options={window.BI_DATA[lang].services.map((s) => s.title)} /></Field>
            <Field label={t.contact.budgetLabel} htmlFor="c-bud"><Select id="c-bud" placeholder={t.contact.budgetPlaceholder} options={t.contact.budgetOptions} /></Field>
            <Field label={t.contact.msgLabel} htmlFor="c-msg" style={{ gridColumn: "1 / -1" }}><Textarea id="c-msg" rows={4} placeholder={t.contact.msgPlaceholder} /></Field>
            <div style={{ gridColumn: "1 / -1" }}><Checkbox checked={gdpr} onChange={() => setGdpr(!gdpr)} label={t.contact.gdprLabel} /></div>
            <div style={{ gridColumn: "1 / -1", display: "flex", gap: "var(--space-3)", flexWrap: "wrap" }}>
              <Button size="lg" type="submit" iconRight="arrow-right">{t.contact.submitButton}</Button>
              <Button size="lg" variant="ghost" iconLeft="phone">{t.company.phone}</Button>
            </div>
          </form>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-6)" }}>
          <div style={{ aspectRatio: "4 / 3", borderRadius: "var(--radius-image)", overflow: "hidden" }}>
            <img src="photos/hero.jpg" alt={t.contact.photoLabel} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 25%", display: "block" }} />
          </div>
          <Card variant="flat" padding="var(--card-pad-lg)" style={{ display: "flex", flexDirection: "column", gap: "var(--space-5)" }}>
            {infoRows.map(([ic, txt]) => (
              <div key={txt} style={{ display: "flex", gap: "var(--space-3)", alignItems: "flex-start" }}>
                <Icon name={ic} size="sm" color="var(--amber-600)" style={{ marginTop: 3 }} />
                {ic === "map-pin" ? (
                  <a href={t.company.mapsUrl} target="_blank" rel="noopener noreferrer" style={{ font: "var(--type-body)", color: "var(--text-primary)" }}>{txt}</a>
                ) : (
                  <span style={{ font: "var(--type-body)" }}>{txt}</span>
                )}
              </div>
            ))}
            <Divider />
            <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2)" }}>
              <span style={{ font: "var(--weight-semibold) var(--text-xs)/1 var(--font-condensed)", letterSpacing: "var(--tracking-wider)", textTransform: "uppercase", color: "var(--text-tertiary)" }}>{t.contact.registryLabel}</span>
              <span style={{ font: "var(--type-mono)", fontSize: 12, color: "var(--text-secondary)" }}>{t.company.registryName}</span>
              <span style={{ font: "var(--type-mono)", fontSize: 12, color: "var(--text-secondary)" }}>{t.company.registryNumbers}</span>
            </div>
          </Card>
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Contact });