// Voice, Process, Map, Contact, Footer
const AREAS = [
  { jp: "大阪府全域", en: "OSAKA", primary: true },
  { jp: "奈良",       en: "NARA" },
  { jp: "京都",       en: "KYOTO" },
  { jp: "兵庫",       en: "HYOGO" },
  { jp: "和歌山",     en: "WAKAYAMA" },
];

function Voice(){
  return (
    <section className="section cream" id="voice">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">VOICE</div>
          <h2 className="section-title">お客様の声</h2>
          <p className="section-lead">施工を終えて、お寄せいただいた言葉の一部をご紹介します。</p>
        </Reveal>
        <div className="voice-grid">
          {VOICES.map((v, i) => (
            <Reveal className="voice-card" key={i} delay={i*120}>
              <p className="voice-body">{v.body}</p>
              <div className="voice-meta">
                <span className="voice-name">{v.name}</span>
                <span className="voice-tag">— {v.tag}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Process(){
  return (
    <section className="section" id="process">
      <div className="wrap-narrow">
        <Reveal>
          <div className="eyebrow">PROCESS</div>
          <h2 className="section-title">施工の流れ</h2>
          <p className="section-lead">お問い合わせから引き渡しまで、すべて自社で一貫してご対応します。</p>
        </Reveal>
        <div className="process-wrap">
          {PROCESS.map((p, i) => (
            <Reveal className="process-step" key={p.n} delay={i*80}>
              <div className="dot">
                <span>STEP</span>
                <span className="n">{p.n}</span>
              </div>
              <div>
                <div className="step-en">— {p.en}</div>
                <h3>{p.jp}</h3>
                <p>{p.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function KinkiMap(){
  // Stylized map of Kinki region — abstracted prefecture shapes.
  // Osaka (primary), plus Nara, Kyoto, Hyogo, Wakayama highlighted.
  return (
    <svg className="map-svg" viewBox="0 0 400 360" xmlns="http://www.w3.org/2000/svg" aria-label="近畿圏 対応エリアマップ">
      <defs>
        <pattern id="hatch" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
          <line x1="0" y1="0" x2="0" y2="6" stroke="rgba(201,168,76,0.35)" strokeWidth="1"/>
        </pattern>
      </defs>
      {/* Hyogo (west) */}
      <path d="M30 120 L110 90 L160 130 L150 220 L100 250 L50 220 Z"
        fill="url(#hatch)" stroke="rgba(250,250,248,0.35)" strokeWidth="1"/>
      <text x="90" y="180" textAnchor="middle" fill="rgba(250,250,248,0.75)" fontFamily="Cormorant Garamond" fontSize="13" letterSpacing="3">HYOGO</text>
      <text x="90" y="198" textAnchor="middle" fill="rgba(201,168,76,0.85)" fontFamily="Noto Serif JP" fontSize="12">兵庫</text>

      {/* Kyoto (north) */}
      <path d="M160 50 L250 40 L280 110 L220 130 L170 130 Z"
        fill="url(#hatch)" stroke="rgba(250,250,248,0.35)" strokeWidth="1"/>
      <text x="220" y="85" textAnchor="middle" fill="rgba(250,250,248,0.75)" fontFamily="Cormorant Garamond" fontSize="13" letterSpacing="3">KYOTO</text>
      <text x="220" y="103" textAnchor="middle" fill="rgba(201,168,76,0.85)" fontFamily="Noto Serif JP" fontSize="12">京都</text>

      {/* Nara (east) */}
      <path d="M220 135 L290 125 L310 230 L250 240 L210 210 Z"
        fill="url(#hatch)" stroke="rgba(250,250,248,0.35)" strokeWidth="1"/>
      <text x="260" y="180" textAnchor="middle" fill="rgba(250,250,248,0.75)" fontFamily="Cormorant Garamond" fontSize="13" letterSpacing="3">NARA</text>
      <text x="260" y="198" textAnchor="middle" fill="rgba(201,168,76,0.85)" fontFamily="Noto Serif JP" fontSize="12">奈良</text>

      {/* Osaka (center, highlighted) */}
      <path d="M155 135 L210 135 L205 215 L160 230 L150 180 Z"
        fill="rgba(201,168,76,0.28)" stroke="var(--gold)" strokeWidth="1.5"/>
      <circle cx="178" cy="180" r="4" fill="var(--gold)"/>
      <circle cx="178" cy="180" r="14" fill="none" stroke="var(--gold)" strokeWidth="1" opacity="0.5">
        <animate attributeName="r" values="8;22;8" dur="2.4s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.6;0;0.6" dur="2.4s" repeatCount="indefinite"/>
      </circle>
      <text x="178" y="168" textAnchor="middle" fill="var(--paper)" fontFamily="Cormorant Garamond" fontSize="15" letterSpacing="4" fontWeight="500">OSAKA</text>
      <text x="178" y="205" textAnchor="middle" fill="var(--gold)" fontFamily="Noto Serif JP" fontSize="14">大阪</text>

      {/* Wakayama (south) */}
      <path d="M120 240 L220 230 L250 245 L240 320 L160 330 L110 300 Z"
        fill="url(#hatch)" stroke="rgba(250,250,248,0.35)" strokeWidth="1"/>
      <text x="180" y="280" textAnchor="middle" fill="rgba(250,250,248,0.75)" fontFamily="Cormorant Garamond" fontSize="13" letterSpacing="3">WAKAYAMA</text>
      <text x="180" y="298" textAnchor="middle" fill="rgba(201,168,76,0.85)" fontFamily="Noto Serif JP" fontSize="12">和歌山</text>

      {/* Compass */}
      <g transform="translate(350,50)">
        <circle r="14" fill="none" stroke="rgba(201,168,76,0.5)" strokeWidth="1"/>
        <path d="M0 -10 L3 0 L0 10 L-3 0 Z" fill="var(--gold)"/>
        <text y="-18" textAnchor="middle" fill="rgba(201,168,76,0.8)" fontFamily="Cormorant Garamond" fontSize="9" letterSpacing="2">N</text>
      </g>
    </svg>
  );
}

function Area(){
  return (
    <section className="section dark" id="area">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow dark">AREA</div>
          <h2 className="section-title on-dark">対応エリア</h2>
          <p className="section-lead on-dark">大阪を拠点に、近畿圏全域の現場へ。府県をまたぐ工事もご相談ください。</p>
        </Reveal>
        <div className="map-wrap">
          <Reveal><KinkiMap /></Reveal>
          <Reveal delay={120}>
            <ul className="area-list">
              {AREAS.map(a => (
                <li className="area-item" key={a.en}>
                  <span className={`jp ${a.primary ? "primary" : ""}`}>{a.jp}</span>
                  <span className="en">— {a.en}</span>
                </li>
              ))}
            </ul>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Contact(){
  const mail = `mailto:${SITE.email}?subject=${encodeURIComponent("リフォームのご相談")}&body=${encodeURIComponent("お名前:\nご住所:\nご連絡先:\n工事内容:\n\n")}`;
  return (
    <section className="section dark" id="contact" style={{paddingTop: 32}}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow dark">CONTACT</div>
          <h2 className="section-title on-dark">ご相談は、気軽にひとこと。</h2>
          <p className="section-lead on-dark">「これって頼める？」で構いません。現地調査・お見積もりまで、すべて無料で承ります。</p>
        </Reveal>
        <Reveal delay={120}>
          <div className="contact-box">
            <div className="eyebrow dark" style={{justifyContent:"center"}}>CALL US DIRECTLY</div>
            <a className="contact-tel" href={`tel:${SITE.telLink}`}>
              <Phone style={{strokeWidth: 1.2}}/>
              {SITE.tel}
            </a>
            <div className="contact-hours">受付時間 8:00 — 19:00 / 年中無休</div>
            <div className="contact-ctas">
              <a className="btn solid" href={`tel:${SITE.telLink}`}>電話でお問い合わせ <span className="arrow">→</span></a>
              <a className="btn line" href={SITE.line} target="_blank" rel="noopener">
                <span className="line-icon" aria-hidden="true">
                  <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M12 2C6.48 2 2 5.7 2 10.27c0 4.1 3.56 7.53 8.36 8.18.33.07.77.21.88.49.1.25.07.65.03.91l-.14.85c-.04.25-.2.99.86.54 1.06-.45 5.71-3.36 7.79-5.76C21.13 13.97 22 12.22 22 10.27 22 5.7 17.52 2 12 2zM8.6 13.16h-2c-.16 0-.29-.13-.29-.29V8.79c0-.16.13-.29.29-.29h.49c.16 0 .29.13.29.29v3.39H8.6c.16 0 .29.13.29.29v.42c0 .16-.13.29-.29.29zm1.36-.29c0 .16-.13.29-.29.29H9.18c-.16 0-.29-.13-.29-.29V8.79c0-.16.13-.29.29-.29h.49c.16 0 .29.13.29.29v4.08zm4.51 0c0 .16-.13.29-.29.29h-.49a.291.291 0 01-.23-.12l-1.86-2.51v2.34c0 .16-.13.29-.29.29h-.49c-.16 0-.29-.13-.29-.29V8.79c0-.16.13-.29.29-.29h.51c.09 0 .18.04.23.12l1.85 2.51V8.79c0-.16.13-.29.29-.29h.49c.16 0 .29.13.29.29v4.08zm3.66-3.59c0 .16-.13.29-.29.29h-1.78v.69h1.78c.16 0 .29.13.29.29v.42c0 .16-.13.29-.29.29h-1.78v.69h1.78c.16 0 .29.13.29.29v.42c0 .16-.13.29-.29.29h-2.59c-.16 0-.29-.13-.29-.29V8.79c0-.16.13-.29.29-.29h2.59c.16 0 .29.13.29.29v.78z"/></svg>
                </span>
                公式LINEで相談 <span className="arrow">→</span>
              </a>
              <a className="btn" href={mail}>メールでお問い合わせ <span className="arrow">→</span></a>
            </div>
          </div>
        </Reveal>
        <Reveal delay={200}>
          <div className="license-badge">
            <div className="license-badge-seal" aria-hidden="true">
              <svg viewBox="0 0 56 56" width="56" height="56">
                <circle cx="28" cy="28" r="26" fill="none" stroke="currentColor" strokeWidth="1" opacity="0.6"/>
                <circle cx="28" cy="28" r="22" fill="none" stroke="currentColor" strokeWidth="0.5" opacity="0.4"/>
                <path d="M18 28 L25 35 L38 21" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </div>
            <div className="license-badge-body">
              <div className="license-badge-label">LICENSED CONSTRUCTION BUSINESS</div>
              <div className="license-badge-title">建設業許可取得業者</div>
              <div className="license-badge-number">大阪府知事許可（般−４）第147791号</div>
              <div className="license-badge-note">大阪府知事より建設業の許可を受けた事業者として、<br/>法令を遵守し、安心してお任せいただける施工体制を整えています。</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="footer" id="company">
      <div className="wrap">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="logo-en">TAKEUCHI KOUBOU</div>
            <div className="logo-jp">武内工房</div>
            <p className="footer-desc">屋根・外壁・内装・水回り・解体まで、住まいに関わるあらゆる工事を承ります。地域に根ざした、丁寧な仕事を。</p>
          </div>
          <div>
            <h4>SITEMAP</h4>
            <ul>
              {NAV.map(n => <li key={n.en}><a href={n.href}>{n.jp} / {n.en}</a></li>)}
            </ul>
          </div>
          <div>
            <h4>COMPANY</h4>
            <div className="footer-info">
              屋号 / <span style={{color:"var(--paper)"}}>武内工房</span><br/>
              {SITE.address}<br/>
              TEL / <a href={`tel:${SITE.telLink}`} style={{color:"var(--gold)"}}>{SITE.tel}</a><br/>
              MAIL / <a href={`mailto:${SITE.email}`} style={{color:"var(--gold)"}}>{SITE.email}</a><br/>
              許可 / <span style={{color:"var(--paper)"}}>大阪府知事許可（般−４）第147791号</span>
            </div>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} TAKEUCHI KOUBOU. ALL RIGHTS RESERVED.</span>
          <span>OSAKA — KINKI — JAPAN</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Voice, Process, KinkiMap, Area, Contact, Footer });