Contact Split

"use client";

import type { ReactNode } from "react";
import { useState } from "react";

export interface ContactLink {
  label: string;
  value: string;
  /** Куда ведёт: `mailto:`, `tel:`, ссылка. Пусто — просто строка. */
  href?: string;
}

export interface ContactSplitProps {
  eyebrow?: string;
  title?: string;
  sub?: string;
  /** Способы связи слева от формы. */
  contacts?: ContactLink[];
  namePlaceholder?: string;
  emailPlaceholder?: string;
  messagePlaceholder?: string;
  submit?: string;
  /** Строка под кнопкой: про приватность, сроки ответа. */
  note?: string;
  /** Что показать после отправки. */
  done?: string;
  /**
   * Куда отправлять. Без него секция ничего не шлёт и просто показывает состояние «готово» —
   * так демо не уводит со страницы, а в проекте достаточно передать адрес обработчика.
   */
  action?: string;
  /**
   * Сокет фона: любой эффект с `mount.role: "background"`, например `<AuroraField />`.
   * Занят — секция снимает собственную заливку, чтобы не спорить за слой.
   */
  background?: ReactNode;
  /** Какой текст читается поверх фона; приходит из `mount.tone` подставленной записи. */
  tone?: "dark" | "light";
  /** Плотность скрима между фоном и текстом (формат «0.5»); 0 — выключить. */
  scrim?: number;
}

const CONTACTS: ContactLink[] = [
  { label: "Почта", value: "hello@example.com", href: "mailto:hello@example.com" },
  { label: "Телефон", value: "+00 000 00-00", href: "tel:+000000000" },
  { label: "Телеграм", value: "@studio", href: "https://t.me/studio" },
  { label: "Адрес", value: "Примерная улица, 7 — второй этаж" },
];

/**
 * Форма связи рядом с прямыми контактами.
 *
 * Валидация — НАТИВНАЯ: `required`, `type="email"`, `minlength`. Своя проверка на состоянии
 * означала бы повторить браузерную логику разбора адреса, потерять поддержку экранного диктора
 * и сломать автозаполнение — а взамен получить ровно то же сообщение.
 *
 * Ключевая деталь — псевдокласс `:user-invalid`, а не `:invalid`. Пустое обязательное поле
 * невалидно СРАЗУ, поэтому на `:invalid` форма встречает человека тремя красными рамками
 * ещё до единого нажатия клавиши. `:user-invalid` срабатывает только после того, как поле
 * трогали и ушли с него, — то есть ошибка появляется тогда, когда она уже про пользователя,
 * а не про пустую страницу.
 *
 * Без `action` секция ничего не отправляет и показывает состояние «готово»: демо не уводит
 * со страницы, а в проекте достаточно передать адрес обработчика.
 */
export function ContactSplit({
  eyebrow = "связаться",
  title = "Расскажите, что нужно сделать",
  sub = "Отвечаем в течение рабочего дня. Если задача не наша — скажем сразу и посоветуем, к кому пойти.",
  contacts = CONTACTS,
  namePlaceholder = "Как вас зовут",
  emailPlaceholder = "Почта для ответа",
  messagePlaceholder = "Пара слов о задаче: что есть сейчас и что должно получиться",
  submit = "Отправить",
  note = "Не передаём контакты третьим лицам и не подписываем на рассылки.",
  done = "Письмо ушло. Ответим на указанную почту.",
  action,
  background,
  tone,
  scrim = 0.5,
}: ContactSplitProps) {
  const [sent, setSent] = useState(false);


  return (
    <section
      className="cnt"
      data-slot-bg={background ? "" : undefined}
      data-tone={tone}
      style={{ textAlign: "start", ["--cnt-scrim" as string]: scrim }}
    >
      <style>{`
        .cnt { position: relative; isolation: isolate; width: 100%;
          padding-block: var(--ds-section-y, var(--ds-8, 80px));
          background: var(--ds-bg, oklch(0.14 0.02 275));
          color: var(--ds-fg, oklch(0.95 0.01 265));
          font-family: var(--ds-font, system-ui, sans-serif); }
        .cnt-in { max-width: var(--ds-container, 1120px); margin-inline: auto;
          padding-inline: var(--ds-gutter, clamp(18px, 5vw, 54px));
          display: grid; gap: var(--ds-7, 54px);
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }

        .cnt-eyebrow { margin: 0 0 var(--ds-3, 12px); text-transform: uppercase;
          font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.14em;
          color: var(--ds-accent, oklch(0.78 0.16 300)); }
        .cnt-h { margin: 0; max-width: 18ch; text-wrap: balance;
          font-size: var(--ds-text-xl, 2rem); font-weight: 780; line-height: 1.1;
          letter-spacing: var(--ds-tracking-tight, -0.03em); }
        .cnt-sub { margin: var(--ds-3, 12px) 0 0; max-width: 46ch;
          font-size: var(--ds-text-md, 1rem); line-height: var(--ds-leading-body, 1.55);
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        .cnt-list { margin: var(--ds-6, 36px) 0 0; padding: 0; list-style: none;
          display: grid; gap: var(--ds-4, 16px); }
        .cnt-k { display: block; font-family: var(--ds-font-mono, ui-monospace, monospace);
          font-size: var(--ds-text-xs, 0.75rem); letter-spacing: 0.08em;
          color: var(--ds-muted, oklch(0.72 0.02 265)); }
        .cnt-v { font-size: var(--ds-text-md, 1rem); color: inherit; text-decoration: none;
          border-bottom: 1px solid transparent;
          transition: border-color var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        a.cnt-v:hover, a.cnt-v:focus-visible { border-bottom-color: var(--ds-accent, oklch(0.78 0.16 300)); }

        .cnt-form { display: grid; gap: var(--ds-3, 12px);
          padding: var(--ds-5, 24px); border-radius: var(--ds-radius-lg, 20px);
          background: var(--ds-surface, oklch(0.18 0.02 275));
          border: 1px solid var(--ds-border, oklch(0.3 0.02 275)); }
        .cnt-field { display: grid; gap: var(--ds-1, 4px); }
        .cnt-input, .cnt-area { width: 100%; box-sizing: border-box; font: inherit; color: inherit;
          padding: var(--ds-3, 12px) var(--ds-4, 16px);
          border-radius: var(--ds-radius, 14px);
          background: var(--ds-bg, oklch(0.14 0.02 275));
          border: 1px solid var(--ds-border, oklch(0.3 0.02 275));
          transition: border-color var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      box-shadow var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
        .cnt-area { min-height: 128px; resize: vertical; }
        .cnt-input::placeholder, .cnt-area::placeholder { color: var(--ds-muted, oklch(0.72 0.02 265)); }
        .cnt-input:focus-visible, .cnt-area:focus-visible { outline: none;
          border-color: var(--ds-accent, oklch(0.78 0.16 300));
          box-shadow: 0 0 0 3px var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); }

        /* :user-invalid, а НЕ :invalid — иначе пустое обязательное поле краснеет ещё до
           первого нажатия клавиши, и форма встречает человека тремя ошибками ни за что */
        .cnt-input:user-invalid, .cnt-area:user-invalid {
          border-color: var(--ds-danger, oklch(0.62 0.19 25)); }
        .cnt-err { font-size: var(--ds-text-xs, 0.75rem);
          color: var(--ds-danger, oklch(0.62 0.19 25));
          visibility: hidden; }
        .cnt-input:user-invalid ~ .cnt-err, .cnt-area:user-invalid ~ .cnt-err { visibility: visible; }

        .cnt-btn { justify-self: start; margin-top: var(--ds-2, 8px); font: inherit; font-weight: 640;
          cursor: pointer; padding: var(--ds-3, 12px) var(--ds-6, 36px);
          border: 0; border-radius: var(--ds-radius-pill, 999px);
          color: var(--ds-accent-fg, oklch(0.14 0.02 275));
          background: var(--ds-accent, oklch(0.78 0.16 300));
          transition: background var(--ds-fast, 0.18s) var(--ds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                      translate var(--ds-fast, 0.18s) var(--ds-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
        .cnt-btn:hover { background: var(--ds-accent-hover, oklch(0.84 0.16 300)); }
        .cnt-btn:active { translate: 0 1px; }
        .cnt-note { margin: 0; font-size: var(--ds-text-xs, 0.75rem);
          color: var(--ds-muted, oklch(0.72 0.02 265)); }

        .cnt-done { display: grid; gap: var(--ds-2, 8px); place-items: start;
          padding: var(--ds-6, 36px) var(--ds-5, 24px);
          border-radius: var(--ds-radius-lg, 20px);
          background: var(--ds-surface, oklch(0.18 0.02 275));
          border: 1px solid var(--ds-accent-ring, oklch(0.72 0.16 300 / 0.35)); }
        .cnt-done-t { font-size: var(--ds-text-lg, 1.25rem); font-weight: 680; }

        /* СОКЕТ ФОНА: слой на z-index -1 внутри своего stacking context */
        .cnt-bg { position: absolute; inset: 0; z-index: -1; }
        .cnt[data-slot-bg] { background: transparent; }
        .cnt-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
        .cnt[data-tone="dark"] { --ds-fg: oklch(0.96 0.01 265); --ds-muted: oklch(0.84 0.02 265);
          --ds-border: oklch(0.98 0.01 265 / 0.16); color: var(--ds-fg); }
        .cnt[data-tone="dark"] .cnt-bg::after {
          background: oklch(0.09 0.02 265 / calc(var(--cnt-scrim, 0.5) * 0.9)); }
        .cnt[data-tone="light"] { --ds-fg: oklch(0.2 0.02 265); --ds-muted: oklch(0.42 0.02 265);
          --ds-border: oklch(0.2 0.02 265 / 0.14); color: var(--ds-fg); }
        .cnt[data-tone="light"] .cnt-bg::after {
          background: oklch(0.99 0 0 / calc(var(--cnt-scrim, 0.5) * 0.9)); }
      `}</style>

      {background && <div className="cnt-bg">{background}</div>}

      <div className="cnt-in">
        <div>
          {eyebrow && <p className="cnt-eyebrow">{eyebrow}</p>}
          <h2 className="cnt-h">{title}</h2>
          {sub && <p className="cnt-sub">{sub}</p>}

          <ul className="cnt-list">
            {contacts.map((c) => (
              <li key={c.label}>
                <span className="cnt-k">{c.label}</span>
                {c.href ? (
                  <a className="cnt-v" href={c.href}>
                    {c.value}
                  </a>
                ) : (
                  <span className="cnt-v">{c.value}</span>
                )}
              </li>
            ))}
          </ul>
        </div>

        {sent ? (
          <div className="cnt-done" role="status">
            <span className="cnt-done-t">{done}</span>
            <p className="cnt-note">{note}</p>
          </div>
        ) : (
          <form
            className="cnt-form"
            action={action}
            method="post"
            onSubmit={(e) => {
              if (action) return; // настоящая отправка — обычным сабмитом формы
              e.preventDefault();
              setSent(true);
            }}
          >
            <div className="cnt-field">
              <input className="cnt-input" name="name" type="text" required minLength={2}
                autoComplete="name" placeholder={namePlaceholder} aria-label={namePlaceholder} />
              <span className="cnt-err">Хотя бы два символа</span>
            </div>
            <div className="cnt-field">
              <input className="cnt-input" name="email" type="email" required
                autoComplete="email" placeholder={emailPlaceholder} aria-label={emailPlaceholder} />
              <span className="cnt-err">Адрес в формате «имя@домен»</span>
            </div>
            <div className="cnt-field">
              <textarea className="cnt-area" name="message" required minLength={10}
                placeholder={messagePlaceholder} aria-label={messagePlaceholder} />
              <span className="cnt-err">Хотя бы десять символов — иначе не поймём задачу</span>
            </div>
            <button className="cnt-btn" type="submit">
              {submit}
            </button>
            {note && <p className="cnt-note">{note}</p>}
          </form>
        )}
      </div>
    </section>
  );
}