// Company facts + Flow + Contact.
const { Card: CCard, SectionLabel: CLabel, Button: CButton, Input: CInput, Checkbox: CCheckbox, Stat: CStat } = window.DesignSystem_82a491;

const FACTS = [
  ["代表者", "滝沢 勇"],
  ["設立", "昭和45年（1970年）"],
  ["資本金", "10,000,000 円"],
  ["従業員数", "5 名"],
  ["坪単価", "450,000 円 〜"],
  ["免許・許可", "建設業：神奈川県知事免許（般1）第10945号"],
  ["施工エリア", "横須賀市・三浦市・逗子市・横浜市・鎌倉市・藤沢市 他"],
  ["所在地", "〒238-0313 神奈川県横須賀市武1-31-8"],
];

const STEPS = [
  { icon: "phone-call", t: "お問い合わせ", d: "お電話・フォームよりお気軽にご連絡ください。" },
  { icon: "messages-square", t: "ご相談・現地調査", d: "ご要望を伺い、現地を拝見します。相談無料。" },
  { icon: "file-text", t: "お見積り・ご提案", d: "内容をご提案し、お見積りを無料で作成します。" },
  { icon: "home", t: "着工・お引き渡し", d: "ていねいに施工。アフターサービスも地元ならでは。" },
];

function Company({ bare = false }) {
  return (
    <section id="company" style={{ padding: "84px 40px", background: "var(--surface-page)" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, alignItems: "center" }}>
        <div>
          <window.Photo src="../../assets/photos/company.png?hq2" cap="施工例 / 内観" style={{ height: 420, borderRadius: "var(--radius-xl)" }} />
        </div>
        <div>
          <CLabel>About us</CLabel>
          {!bare && <h2 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-4xl)", color: "var(--text-strong)", margin: "16px 0 18px" }}>会社案内</h2>}
          <p style={{ fontSize: "var(--text-md)", lineHeight: "var(--leading-relaxed)", color: "var(--text-body)", margin: "0 0 24px" }}>
            地域に根ざし創業35年。“小さな工務店”ですが、小さいからこそ造り手の顔が見える、心のこもった住まい造りを致しております。是非一度ご相談ください。
          </p>
          <div style={{ borderTop: "1px solid var(--border-default)" }}>
            {FACTS.map(([k, v], i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "120px 1fr", gap: 16, padding: "12px 0", borderBottom: "1px solid var(--border-default)" }}>
                <span style={{ fontSize: "var(--text-sm)", fontWeight: 700, color: "var(--text-muted)" }}>{k}</span>
                <span style={{ fontSize: "var(--text-sm)", color: "var(--text-body)" }}>{v}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Flow() {
  const Icon = window.Icon;
  return (
    <section id="flow" style={{ padding: "84px 40px", background: "var(--ai-800)" }}>
      <div style={{ maxWidth: "var(--container-lg)", margin: "0 auto" }}>
        <CLabel align="center">How it works</CLabel>
        <h2 style={{ textAlign: "center", fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-4xl)", color: "#fff", margin: "16px 0 48px" }}>ご相談の流れ</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {STEPS.map((s, i) => (
            <div key={i} style={{ position: "relative" }}>
              <div style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)", color: "var(--kaki-300)", fontWeight: 600, marginBottom: 14 }}>0{i + 1}</div>
              <div style={{ width: 60, height: 60, borderRadius: "var(--radius-md)", background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.16)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>
                <Icon name={s.icon} size={28} stroke={1.7} color="#fff" />
              </div>
              <h3 style={{ fontFamily: "var(--font-gothic)", fontWeight: 700, fontSize: "var(--text-lg)", color: "#fff", margin: "0 0 8px" }}>{s.t}</h3>
              <p style={{ fontSize: "var(--text-sm)", color: "rgba(255,255,255,0.7)", lineHeight: "var(--leading-relaxed)", margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const Icon = window.Icon;
  const [sent, setSent] = React.useState(false);
  const [ok, setOk] = React.useState(false);
  return (
    <section id="contact" style={{ padding: "84px 40px", background: "var(--surface-sunken)" }}>
      <div style={{ maxWidth: 920, margin: "0 auto" }}>
        <CCard elevated padding="0" style={{ overflow: "hidden", display: "grid", gridTemplateColumns: "1fr 1.1fr" }}>
          <div style={{ background: "var(--ai-700)", padding: "44px 36px", color: "#fff", display: "flex", flexDirection: "column" }}>
            <CLabel style={{ marginBottom: 18 }}>Get in touch</CLabel>
            <h2 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-3xl)", color: "#fff", margin: "0 0 16px" }}>お見積り・<br />ご相談は無料です</h2>
            <p style={{ fontSize: "var(--text-sm)", lineHeight: "var(--leading-relaxed)", color: "rgba(255,255,255,0.82)", margin: "0 0 28px" }}>
              家のことなら何でも、お気軽にご相談ください。地元の職人がていねいに対応します。
            </p>
            <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="phone" size={18} color="var(--kaki-300)" />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-lg)", fontWeight: 600 }}>046-856-0263</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="mail" size={18} color="var(--kaki-300)" />
                <span style={{ fontFamily: "var(--font-mono)", fontSize: "var(--text-sm)" }}>is-takizawa@takizawakoumuten.jp</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="clock" size={18} color="var(--kaki-300)" />
                <span style={{ fontSize: "var(--text-sm)" }}>8:00–18:00 ／ 定休 日・祝</span>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                <Icon name="map-pin" size={18} color="var(--kaki-300)" />
                <span style={{ fontSize: "var(--text-sm)" }}>横須賀市武1-31-8</span>
              </div>
            </div>
          </div>
          <div style={{ background: "var(--surface-card)", padding: "40px 36px" }}>
            {sent ? (
              <div style={{ height: "100%", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", textAlign: "center", gap: 14 }}>
                <div style={{ width: 64, height: 64, borderRadius: "var(--radius-full)", background: "var(--color-success-subtle)", display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <Icon name="check" size={32} stroke={2.4} color="var(--color-success)" />
                </div>
                <h3 style={{ fontFamily: "var(--font-mincho)", fontWeight: 700, fontSize: "var(--text-2xl)", color: "var(--text-strong)", margin: 0 }}>送信しました</h3>
                <p style={{ fontSize: "var(--text-sm)", color: "var(--text-muted)", margin: 0 }}>担当者より折り返しご連絡いたします。</p>
                <CButton variant="ghost" size="sm" onClick={() => { setSent(false); setOk(false); }}>戻る</CButton>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
                <Input label="お名前" placeholder="山田 太郎" required />
                <Input label="メールアドレス" type="email" placeholder="you@example.com" required />
                <Input label="ご相談内容" placeholder="例：浴室のリフォームを検討しています" />
                <CCheckbox label="プライバシーポリシーに同意する" checked={ok} onChange={e => setOk(e.target.checked)} />
                <CButton variant="accent" size="lg" block type="submit" disabled={!ok} iconRight={<Icon name="send" size={16} stroke={2.2} />}>無料で相談する</CButton>
              </form>
            )}
          </div>
        </CCard>
      </div>
    </section>
  );
}

const { Input } = window.DesignSystem_82a491;
Object.assign(window, { Company, Flow, Contact });