/* TEN GROW — Contact (お問い合わせ) */
const DS_Contact = window.TENGROWDesignSystem_8927da;

function TG_Contact() {
  const { SectionHeading, Breadcrumb, FormField, Input, Textarea, Select, Checkbox, Radio, Button } = DS_Contact;
  const { Container, Section, GhostWord } = window;
  const [sent, setSent] = React.useState(false);
  const [agree, setAgree] = React.useState(false);
  const Arrow = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>;

  return (
    <div>
      <section style={{ background: "var(--ink-900)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <Container size="wide" style={{ position: "relative", zIndex: 1, paddingTop: "var(--space-9)", paddingBottom: "var(--space-9)" }}>
          <div style={{ opacity: 0.85 }}>
            <Breadcrumb items={[{ label: "HOME", href: "#home" }, { label: "お問い合わせ" }]} style={{ ["--color-text-muted"]: "rgba(247,242,233,0.7)" }} />
          </div>
          <div style={{ marginTop: "var(--space-6)" }}>
            <span style={{ fontFamily: "var(--font-en-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--amber-400)", fontSize: "clamp(2rem,1.4rem + 2.4vw,3rem)" }}>Contact</span>
            <h1 style={{ color: "#fff", fontFamily: "var(--font-jp-heading)", fontWeight: 900, fontSize: "var(--fs-h1)", letterSpacing: ".06em", margin: "0.1em 0 0" }}>お問い合わせ</h1>
          </div>
        </Container>
      </section>

      <Section tone="cream">
        <div style={{ maxWidth: "var(--container-narrow)", margin: "0 auto" }}>
          {sent ? (
            <div style={{ textAlign: "center", padding: "var(--space-9) 0" }}>
              <div style={{ fontFamily: "var(--font-en-display)", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.1em", color: "var(--color-primary)", fontSize: "2rem" }}>Thank You</div>
              <h2 style={{ margin: "var(--space-3) 0 var(--space-4)" }}>送信が完了しました</h2>
              <p style={{ color: "var(--color-text-secondary)", lineHeight: "var(--lh-body)" }}>お問い合わせありがとうございます。担当者より折り返しご連絡いたします。</p>
              <div style={{ marginTop: "var(--space-6)" }}>
                <Button variant="ghost" onClick={() => setSent(false)}>フォームに戻る</Button>
              </div>
            </div>
          ) : (
            <>
              <p style={{ color: "var(--color-text-secondary)", lineHeight: "var(--lh-body)", marginBottom: "var(--space-6)" }}>
                サービスに関するご相談・ご質問など、下記フォームよりお気軽にお問い合わせください。<span style={{ color: "var(--color-emphasis)", fontWeight: 700 }}>必須</span>の項目は必ずご入力ください。
              </p>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "var(--space-3)", marginBottom: "var(--space-8)" }}>
                <a href="tel:0363841688" style={{ display: "inline-flex", alignItems: "center", gap: "0.6rem", padding: "0.75rem 1.2rem", borderRadius: "var(--radius-md)", border: "1px solid var(--line-strong)", background: "var(--color-surface)", textDecoration: "none", color: "var(--ink-900)", fontFamily: "var(--font-en-ui)", fontWeight: 700, letterSpacing: ".04em" }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M4 5c0 8.3 6.7 15 15 15 .8 0 1.3-.6 1.3-1.3v-2.6c0-.6-.4-1.1-1-1.2l-3-.6c-.5-.1-1 .1-1.3.5l-1 1.2a12 12 0 01-5.4-5.4l1.2-1c.4-.3.6-.8.5-1.3l-.6-3c-.1-.6-.6-1-1.2-1H5.3C4.6 3.7 4 4.2 4 5z" fill="currentColor"/></svg>
                  03-6384-1688
                </a>
                <a href="mailto:info@ten-grow.co.jp" style={{ display: "inline-flex", alignItems: "center", gap: "0.6rem", padding: "0.75rem 1.2rem", borderRadius: "var(--radius-md)", border: "1px solid var(--line-strong)", background: "var(--color-surface)", textDecoration: "none", color: "var(--ink-900)", fontFamily: "var(--font-en-ui)", fontWeight: 700, letterSpacing: ".04em" }}>
                  <svg width="17" height="17" viewBox="0 0 24 24" fill="none"><path d="M4 6h16v12H4z" stroke="currentColor" strokeWidth="1.8"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  info@ten-grow.co.jp
                </a>
              </div>
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "var(--space-6)" }} className="tg-form">
                <FormField label="お問い合わせ種別" htmlFor="c-type" required style={{ gridColumn: "1 / -1" }}>
                  <div style={{ display: "flex", gap: "var(--space-6)", flexWrap: "wrap", paddingTop: "0.3rem" }}>
                    <Radio name="c-type" value="corp" label="法人" defaultChecked />
                    <Radio name="c-type" value="personal" label="個人" />
                  </div>
                </FormField>
                <FormField label="お名前" htmlFor="c-name" required>
                  <Input id="c-name" placeholder="山田 太郎" required />
                </FormField>
                <FormField label="会社名" htmlFor="c-company">
                  <Input id="c-company" placeholder="株式会社〇〇" />
                </FormField>
                <FormField label="メールアドレス" htmlFor="c-email" required>
                  <Input id="c-email" type="email" placeholder="taro@example.com" required />
                </FormField>
                <FormField label="電話番号" htmlFor="c-tel">
                  <Input id="c-tel" type="tel" placeholder="03-0000-0000" />
                </FormField>
                <FormField label="ご相談内容" htmlFor="c-topic" required style={{ gridColumn: "1 / -1" }}>
                  <Select id="c-topic" defaultValue="" required>
                    <option value="" disabled>選択してください</option>
                    <option>成果報酬型 広告運用について</option>
                    <option>SNS・ショート動画広告について</option>
                    <option>Web集客・分析改善について</option>
                    <option>採用について</option>
                    <option>その他</option>
                  </Select>
                </FormField>
                <FormField label="お問い合わせ内容" htmlFor="c-msg" required style={{ gridColumn: "1 / -1" }} help="できるだけ具体的にご記入いただけますと、スムーズにご案内できます。">
                  <Textarea id="c-msg" rows={6} placeholder="お問い合わせ内容をご記入ください" required />
                </FormField>
                <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "center" }}>
                  <Checkbox label="プライバシーポリシーに同意します" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
                </div>
                <div style={{ gridColumn: "1 / -1", display: "flex", justifyContent: "center" }}>
                  <Button type="submit" variant="primary" size="lg" disabled={!agree} icon={<Arrow/>}>この内容で送信する</Button>
                </div>
              </form>
            </>
          )}
        </div>
      </Section>
    </div>
  );
}
window.TG_Contact = TG_Contact;