// 会社案内 + お問い合わせ

const SCC = window.Site;
const { T: TCC, COMPANY: COCC, ASSETS: ASCC, CoverImg: ImgCC, Icon: IcCC, SectionHeading: SHCC, Page: PageCC, PageHero: HeroCC, PlaceholderTag: PTCC, siteHref: hrefCC, sitePhoneHref: phoneHrefCC, copyText: copyCC } = SCC;
const PhilosophyCC = window.TopPhilosophy;

// ---------------- 会社案内 ----------------
function PageCompany() {
  const { name: licenseNameCC, number: licenseNumberCC, certifications: certificationsCC } = SCC.licenseContent();
  const certificationRowsCC = certificationsCC
    .map((certification) => `${certification.name}（${certification.number}）`)
    .join('、');
  const companyAddress = COCC.address || '〒733-0035 広島県広島市西区南観音1丁目11-17';
  const companyRepresentative = COCC.representative || '角屋 政明';
  const companyEstablished = COCC.established || '2010年5月';
  const mapAddress = companyAddress;
  const mapQuery = encodeURIComponent(mapAddress);
  const mapEmbedSrc = `https://www.google.com/maps?q=${mapQuery}&output=embed`;
  const mapLink = `https://www.google.com/maps/search/?api=1&query=${mapQuery}`;
  const addressLines = companyAddress.split(/\s+/).filter(Boolean);
  return (
    <PageCC active="company">
      <HeroCC num="05" en="COMPANY" title="会社案内" lead={`${COCC.area}で、屋根・外壁・住まいの相談窓口として活動しています。`} />

      {/* ごあいさつ */}
      <section style={{ background: '#fff', padding: '72px 56px', borderBottom: `1px solid ${TCC.line}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start', maxWidth: 1280, margin: '0 auto' }}>
          <ImgCC src={ASCC.heroWide1} alt="青空の下で見える住宅の屋根" ratio="4/3" radius={6} />
          <div>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 4, marginBottom: 14, fontWeight: 700 }}>01 ／ MESSAGE</div>
            <h2 style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 34, fontWeight: 900, color: TCC.ink, margin: 0, lineHeight: 1.45, letterSpacing: '-0.01em', fontFeatureSettings: "'palt'" }}>
              屋根の上のことは、私たちにご相談ください。
            </h2>
            <p style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15.5, color: TCC.ink70, lineHeight: 2.2, marginTop: 22 }}>
              屋根や外壁は、普段なかなか目に入らない場所です。だからこそ、いざというときに不安が大きくなります。私たちは、まず現状を見て、写真でご説明することを大切にしています。
            </p>
            <p style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15.5, color: TCC.ink70, lineHeight: 2.2, marginTop: 16 }}>
              いきなり工事をご提案するのではなく、応急処置で済むのか、部分補修か、全体改修か。選択肢を整理してご案内します。
            </p>
            <div style={{ marginTop: 22, fontSize: 13, color: TCC.ink50, fontStyle: 'italic', fontFamily: '"Noto Sans JP", sans-serif' }}>
              — {COCC.name} 代表取締役 {companyRepresentative} <PTCC>要確認</PTCC>
            </div>
          </div>
        </div>
      </section>

      {/* 会社概要 — 建設業許可・雨漏り診断士資格はCMSで明示的に空にされたら行ごと出さない（未設定なら既定値） */}
      <section style={{ background: TCC.paper, padding: '72px 56px', borderBottom: `1px solid ${TCC.line}` }}>
        <div data-pc-readable="company-overview" style={{ maxWidth: 1200, margin: '0 auto' }}>
        <SHCC num="02" en="OVERVIEW" title="会社概要" align="left" />
        <div style={{ background: '#fff', borderRadius: 6 }}>
          {[
            ['会社名',      COCC.name],
            ['所在地',      companyAddress, '要確認'],
            ['電話番号',    COCC.phone],
            COCC.hours ? ['受付時間', COCC.hours] : null,
            ['対応エリア',  COCC.area],
            licenseNameCC && licenseNumberCC ? ['建設業許可', `${licenseNameCC}／${licenseNumberCC}`] : null,
            certificationRowsCC ? ['保有資格', certificationRowsCC] : null, // 雨漏り診断士など
            ['事業内容',    '屋根工事、外壁工事、雨漏り修理、内装・水回りなど住まいの修理全般'],
            ['代表者',      companyRepresentative, '要確認'],
            ['設立',        companyEstablished, '要確認'],
          ].filter(Boolean).map(([k, v, ph], i, arr) => (
            <div key={k} style={{
              display: 'grid', gridTemplateColumns: '200px 1fr', gap: 24,
              padding: '20px 28px',
              borderBottom: i < arr.length - 1 ? `1px solid ${TCC.line}` : 'none',
            }}>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 2, fontWeight: 700, paddingTop: 6 }}>{k}</div>
              <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 15, color: TCC.ink, lineHeight: 1.85 }}>
                {v}{ph && <PTCC>{ph === true ? '仮データ' : ph}</PTCC>}
              </div>
            </div>
          ))}
        </div>
        </div>
      </section>

      {/* 対応エリア + アクセス */}
      <section style={{ background: TCC.paper, padding: '72px 56px', borderBottom: `1px solid ${TCC.line}` }}>
        <SHCC num="03" en="AREA & ACCESS" title="対応エリアとアクセス" align="left" />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 28 }}>
          <div style={{ background: '#fff', padding: 28, borderRadius: 6 }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 3, marginBottom: 12, fontWeight: 700 }}>対応エリア</div>
            <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 24, fontWeight: 700, color: TCC.ink, marginBottom: 18, lineHeight: 1.5 }}>{COCC.area}</div>
            <div style={{ fontSize: 13.5, color: TCC.ink70, lineHeight: 2 }}>
              広島市を中心に、周辺エリアのご相談を承っています。対応可否はお問い合わせ時にご確認ください。
            </div>
            <div style={{ height: 1, background: TCC.line, margin: '20px 0' }} />
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 3, marginBottom: 8, fontWeight: 700 }}>所在地 <PTCC>要確認</PTCC></div>
            <div style={{ fontSize: 14, color: TCC.ink, lineHeight: 1.95 }}>
              {addressLines.map((line, index) => <React.Fragment key={index}>{index > 0 && <br />}{line}</React.Fragment>)}
            </div>
          </div>
          <div style={{ background: '#fff', borderRadius: 6, padding: 4, position: 'relative', overflow: 'hidden' }}>
            <iframe
              title={`${COCC.name}所在地 Google マップ`}
              src={mapEmbedSrc}
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              style={{
                width: '100%',
                aspectRatio: '16/10',
                border: 0,
                borderRadius: 4,
                display: 'block',
              }}
            />
            <a
              href={mapLink}
              target="_blank"
              rel="noreferrer"
              style={{
                position: 'absolute',
                left: 18,
                bottom: 18,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 8,
                padding: '10px 14px',
                background: '#fff',
                color: TCC.ink,
                border: `1px solid ${TCC.line}`,
                borderRadius: 6,
                boxShadow: '0 8px 22px rgba(20, 25, 20, 0.12)',
                fontFamily: '"Noto Sans JP", sans-serif',
                fontSize: 12.5,
                fontWeight: 700,
                textDecoration: 'none',
              }}
            >
              <IcCC.pin width="16" height="16" color={TCC.green} />
              Google マップで開く
            </a>
          </div>
        </div>
      </section>
      <PhilosophyCC />
    </PageCC>
  );
}

// ---------------- お問い合わせ ----------------
function PageContact() {
  const [contactType, setContactType] = React.useState('roof');
  const [submitStatus, setSubmitStatus] = React.useState('idle');
  const formStartedAtRef = React.useRef(Date.now());
  const privacyHeading = copyCC('privacy.contact.heading', '個人情報の取り扱いについて');
  const privacyBodyTemplate = copyCC('privacy.contact.body', 'いただいたお名前・ご連絡先・ご相談内容は、お問い合わせへのご回答とご相談内容の確認のためにのみ使用します。ご本人の同意なく第三者へ提供することはありません。取り扱いに関するお問い合わせは、お電話（{電話番号}）またはこのフォームよりご連絡ください。');
  const privacyBody = privacyBodyTemplate.replace(/\{電話番号\}/g, COCC.phone);
  const fields = [
    { id: 'contact-name', label: 'お名前', req: true, ph: '広島 太郎', type: 'text', name: 'name', autoComplete: 'name' },
    { id: 'contact-kana', label: 'ふりがな', req: false, ph: 'ひろしま たろう', type: 'text', name: 'kana', autoComplete: 'off' },
    { id: 'contact-email', label: 'メールアドレス', req: true, ph: 'example@email.com', type: 'email', name: 'email', autoComplete: 'email' },
    { id: 'contact-tel', label: '電話番号', req: false, ph: '082-xxx-xxxx', type: 'tel', name: 'tel', autoComplete: 'tel' },
  ];
  const contactTypes = [
    { id: 'roof', label: '屋根の相談' },
    { id: 'wall', label: '外壁の相談' },
    { id: 'leak', label: '雨漏りの相談' },
    { id: 'interior', label: '内装・水回り' },
    { id: 'maintenance', label: '定期点検のお問い合わせ' },
    { id: 'other', label: 'その他' },
  ];
  const submitStatusMessages = {
    sending: '送信中です。画面を閉じずにそのままお待ちください。',
    sent: '送信しました。内容を確認のうえ、担当者よりご連絡いたします。',
    failed: '送信できませんでした。お手数ですがお電話（082-299-6008）でご連絡ください。',
  };
  const submitStatusMessage = submitStatusMessages[submitStatus];
  const submitButtonStyle = {
    fontFamily: 'inherit', fontWeight: 700, letterSpacing: 0.4, fontSize: 15.5,
    padding: '14px 24px', cursor: submitStatus === 'sending' ? 'wait' : 'pointer', borderRadius: 6,
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
    background: '#fff', color: TCC.orangeDeep, border: `1.5px solid ${TCC.orangeLine}`,
    opacity: submitStatus === 'sending' ? 0.65 : 1,
  };
  const handleContactSubmit = async (event) => {
    event.preventDefault();
    const form = event.currentTarget;
    setSubmitStatus('sending');

    try {
      const payload = Object.fromEntries(new FormData(form).entries());
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'content-type': 'application/json; charset=utf-8' },
        body: JSON.stringify(payload),
      });
      const data = await response.json().catch(() => null);
      if (!response.ok || !data || data.ok !== true) {
        setSubmitStatus('failed');
        return;
      }
      if (form && typeof form.reset === 'function') form.reset();
      setContactType('roof');
      setSubmitStatus('sent');
      formStartedAtRef.current = Date.now();
    } catch (e) {
      setSubmitStatus('failed');
    }
  };
  return (
    <PageCC active="contact">
      <HeroCC num="06" en="CONTACT" title={copyCC('cta.title', 'お問い合わせ')} lead={`${copyCC('cta.lead1', '屋根や外壁、住まいのことで気になることはありませんか？')}${copyCC('cta.lead2', '小さなことでも、お電話またはメールフォームよりお気軽にご相談ください。')}`} />

      <section style={{ background: '#fff', padding: '60px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 40, alignItems: 'start' }}>
          {/* phone block */}
          <div>
            <div style={{ background: TCC.paper, border: `1px solid ${TCC.line}`, borderRadius: 6, padding: 28 }}>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 3, fontWeight: 700, marginBottom: 12 }}>01 ／ お電話でのご相談</div>
              <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 22, fontWeight: 700, color: TCC.ink, marginBottom: 18, lineHeight: 1.4 }}>
                お電話でのご相談
              </div>
              <a href={phoneHrefCC} style={{ fontFamily: '"M PLUS 1p", "Helvetica Neue", Arial, sans-serif', fontSize: 'clamp(28px, 3vw, 36px)', fontWeight: 800, color: TCC.ink, letterSpacing: 0, display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, textDecoration: 'none', whiteSpace: 'nowrap' }}>
                <IcCC.phone width="28" height="28" color={TCC.orange} /> {COCC.phone}
              </a>
              {COCC.hours && <div style={{ fontSize: 13, color: TCC.ink70 }}>受付 {COCC.hours}</div>}
            </div>

            <div style={{ marginTop: 24, fontSize: 13, color: TCC.ink70, lineHeight: 2 }}>
              <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontWeight: 700, color: TCC.ink, marginBottom: 8 }}>対応エリア</div>
              {COCC.area}
            </div>
          </div>

          {/* form */}
          <div style={{ background: '#fff', border: `1px solid ${TCC.line}`, borderRadius: 6, padding: 36 }}>
            <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, color: TCC.green, letterSpacing: 3, fontWeight: 700, marginBottom: 12 }}>02 ／ メールフォーム</div>
            <div style={{ fontFamily: '"Noto Sans JP", sans-serif', fontSize: 22, fontWeight: 700, color: TCC.ink, marginBottom: 26, lineHeight: 1.4 }}>
              メールでお問い合わせ
            </div>
            <form onSubmit={handleContactSubmit}>
              <input type="hidden" name="_form" value="desktop-contact" />
              <input type="hidden" name="_page_url" value={window.location.href} />
              <input type="hidden" name="_user_agent" value={navigator.userAgent} />
              <input type="hidden" name="_form_started_at" value={formStartedAtRef.current} />
              <div aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
                <label htmlFor="contact-website">この欄は入力しないでください</label>
                <input id="contact-website" name="website" type="text" tabIndex="-1" autoComplete="off" />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16, marginBottom: 16 }}>
                {fields.map((f) => (
                  <div key={f.id} style={{ display: 'block' }}>
                    <label htmlFor={f.id} style={{ fontSize: 12.5, color: TCC.ink, fontWeight: 700, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                      {f.label}
                      {f.req && <span style={{ fontSize: 10, color: '#fff', background: TCC.green, padding: '2px 8px', borderRadius: 4 }}>必須</span>}
                    </label>
                    <input id={f.id} name={f.name} type={f.type} autoComplete={f.autoComplete} required={f.req} placeholder={f.ph} style={{
                      width: '100%', boxSizing: 'border-box',
                      padding: '11px 14px', border: `1px solid ${TCC.line}`, borderRadius: 4,
                      fontSize: 14, fontFamily: 'inherit', color: TCC.ink, background: '#fff',
                    }} />
                  </div>
                ))}
              </div>

              <div role="radiogroup" aria-labelledby="contact-type-label" style={{ display: 'block', marginBottom: 16 }}>
                <div id="contact-type-label" style={{ fontSize: 12.5, color: TCC.ink, fontWeight: 700, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                  お問い合わせ内容
                  <span style={{ fontSize: 10, color: '#fff', background: TCC.green, padding: '2px 8px', borderRadius: 4 }}>必須</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                  {contactTypes.map((c) => {
                    const checked = contactType === c.id;
                    return (
                    <label key={c.id} htmlFor={`contact-type-${c.id}`} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', border: `1px solid ${checked ? TCC.orange : TCC.line}`, borderRadius: 4, fontSize: 13.5, color: TCC.ink, cursor: 'pointer', background: checked ? TCC.orangeSoft : '#fff' }}>
                      <input
                        id={`contact-type-${c.id}`}
                        type="radio"
                        name="contact_type"
                        value={c.id}
                        checked={checked}
                        onChange={() => setContactType(c.id)}
                        required
                        style={{ width: 14, height: 14, margin: 0, accentColor: TCC.orange, flexShrink: 0 }}
                      />
                      {c.label}
                    </label>
                  )})}
                </div>
              </div>

              <div style={{ display: 'block', marginBottom: 18 }}>
                <label htmlFor="contact-message" style={{ fontSize: 12.5, color: TCC.ink, fontWeight: 700, marginBottom: 8, display: 'flex', alignItems: 'center', gap: 8 }}>
                  詳細
                  <span style={{ fontSize: 10, color: '#fff', background: TCC.green, padding: '2px 8px', borderRadius: 4 }}>必須</span>
                </label>
                <textarea id="contact-message" name="message" required placeholder={'例：天井に茶色のシミが出ています。雨の日に音がする気がします。\n築年数 / お住まいの地域 / 気づいた時期などもあわせてご記入ください。'} rows={6} style={{
                  width: '100%', boxSizing: 'border-box',
                  padding: '12px 14px', border: `1px solid ${TCC.line}`, borderRadius: 4,
                  fontSize: 14, fontFamily: 'inherit', color: TCC.ink, background: '#fff', resize: 'vertical',
                }} />
              </div>

              <div id="privacy-notice" style={{
                margin: '20px 0 18px',
                padding: '14px 16px',
                borderLeft: `2px solid ${TCC.green}`,
                background: TCC.greenSoft,
                color: TCC.ink70,
                fontSize: 12.5,
                lineHeight: 1.85,
                scrollMarginTop: 96,
              }}>
                <div style={{ color: TCC.ink, fontWeight: 700, marginBottom: 5 }}>{privacyHeading}</div>
                <div>{privacyBody}</div>
              </div>

              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 24, marginTop: 24 }}>
                <button type="submit" disabled={submitStatus === 'sending'} style={submitButtonStyle}>
                  <IcCC.arrow width="16" height="16" /> {submitStatus === 'sending' ? '送信中…' : '送信する'}
                </button>
              </div>
              {submitStatusMessage && (
                <div role={submitStatus === 'failed' ? 'alert' : 'status'} style={{
                  marginTop: 14, padding: '10px 12px', borderRadius: 4, fontSize: 12.5,
                  color: submitStatus === 'failed' ? TCC.orangeDeep : (TCC.greenInk || TCC.ink),
                  background: submitStatus === 'failed' ? TCC.orangeSoft : TCC.greenSoft,
                  lineHeight: 1.7,
                }}>
                  {submitStatusMessage}
                </div>
              )}
            </form>
          </div>
        </div>
      </section>
    </PageCC>
  );
}

window.PageCompany = PageCompany;
window.PageContact = PageContact;