function Flow() {
  const steps = [
    { n:'01', t:'お問い合わせ', d:'フォームより必要事項を記入の上ご連絡ください。', tick:'avg. 24h reply'},
    { n:'02', t:'無料相談',     d:'課題のヒアリングと AI 適用ポイントの洗い出し。', tick:'60 min / free'},
    { n:'03', t:'企画・制作',   d:'ワークフロー設計、検証、制作を進行。',           tick:'tracked weekly'},
    { n:'04', t:'納品・運用',   d:'納品後の運用・改善まで伴走します。',            tick:'KPI dashboard'},
  ];
  return (
    <section id="flow" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S04 / Flow</div>
          <h2 className="section-title"><span className="en">How we work</span>ご相談からの流れ</h2>
          <span/>
        </div>
        <div className="flow">
          {steps.map(s => (
            <div key={s.n} className="fstep">
              <div className="n">{s.n}</div>
              <h5>{s.t}</h5>
              <p>{s.d}</p>
              <div className="tick">{s.tick}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Blog() {
  return (
    <section id="blog" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S05 / Blog</div>
          <h2 className="section-title"><span className="en">Notes from the field</span>ブログ</h2>
          <a href="https://note.com/zuno_works" target="_blank" rel="noopener noreferrer" className="zw-link" style={{fontFamily:'var(--font-mono)', fontSize:11, letterSpacing:'.2em', textTransform:'uppercase'}}>note で読む →</a>
        </div>
        <div className="blog-list">
          <a href="https://note.com/zuno_works" target="_blank" rel="noopener noreferrer" className="post" style={{textDecoration:'none', color:'inherit'}}>
            <div className="date">COMING SOON</div>
            <div>
              <h4>ブログは note で発信します</h4>
              <p>業務の現場から得た知見、AI・映像制作・BPOに関するノートを、公式 note アカウントで随時公開予定です。</p>
            </div>
            <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

// Formspree endpoint — ズノーワークスお問い合わせ form
const FORMSPREE_ENDPOINT = 'https://formspree.io/f/mjgjjzvg';

function CtaBand() {
  const [status, setStatus] = React.useState('idle'); // idle | sending | ok | err
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    const form = e.target;
    const data = new FormData(form);
    try {
      const res = await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        body: data,
        headers: { 'Accept': 'application/json' },
      });
      if (res.ok) { setStatus('ok'); form.reset(); }
      else { setStatus('err'); }
    } catch { setStatus('err'); }
  };
  return (
    <section id="contact" className="cta-band">
      <div className="container">
        <div className="sub">S06 / Contact</div>
        <h2>AIで業務を再設計しませんか</h2>
        <form className="contact-form" onSubmit={handleSubmit}>
          <div className="cf-row">
            <label>
              <span>お名前 / Name</span>
              <input name="name" type="text" required autoComplete="name" />
            </label>
            <label>
              <span>メール / Email</span>
              <input name="email" type="email" required autoComplete="email" />
            </label>
          </div>
          <label>
            <span>会社名 / Company <em>(任意)</em></span>
            <input name="company" type="text" autoComplete="organization" />
          </label>
          <label>
            <span>お問い合わせ内容 / Message</span>
            <textarea name="message" rows={6} required />
          </label>
          {/* honeypot: bots fill hidden fields — Formspree discards submissions when non-empty */}
          <input type="text" name="_gotcha" tabIndex={-1} autoComplete="off" aria-hidden="true" style={{position:'absolute', left:'-9999px', width:1, height:1, opacity:0, pointerEvents:'none'}} />
          <div className="cf-actions">
            <button type="submit" className="cta" disabled={status === 'sending'}>
              {status === 'sending' ? '送信中…' : '送信する'} <span className="mi">→</span>
            </button>
            {status === 'ok'  && <span className="cf-msg ok">送信完了。返信まで少々お待ちください。</span>}
            {status === 'err' && <span className="cf-msg err">送信に失敗しました。時間を置いて再度お試しください。</span>}
          </div>
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="zw-footer">
      <div className="container">
        <div className="brand">
          <img src="../../assets/logo-zunoworks-full.png" alt="ZUNO WORKS" />
          <p>株式会社ズノーワークス<br/>〒929-1125 石川県かほく市宇野気リ196-9<br/>TEL 076-208-3250</p>
        </div>
        <div>
          <h5>Navigate</h5>
          <ul>
            <li><a href="#top">トップ</a></li>
            <li><a href="#service">サービス</a></li>
            <li><a href="#flow">ご相談の流れ</a></li>
          </ul>
        </div>
        <div>
          <h5>Work</h5>
          <ul>
            <li><a href="#portfolio">実績</a></li>
            <li><a href="#blog">ブログ</a></li>
            <li><a href="https://note.com/zuno_works" target="_blank" rel="noopener noreferrer">note</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="#contact">お問い合わせフォーム</a></li>
          </ul>
        </div>
      </div>
      <div className="container colophon">
        <span>© 2026 Zuno Works, Inc.</span>
        <span><a href="/privacy" style={{color:'inherit'}}>プライバシーポリシー</a></span>
        <span>Built in Ishikawa · AI仕様</span>
      </div>
    </footer>
  );
}

function Company() {
  const rows = [
    ['会社名',       '株式会社ズノーワークス'],
    ['沿革',         '2024年7月設立'],
    ['事業内容',     'AI事業 ・ データ入力事業 ・ メディア事業'],
    ['資本金',       '3,200万円'],
    ['取引銀行',     'みずほ銀行 / 北國銀行'],
    ['代表取締役',   '瀬戸 宏一'],
    ['所在地',       '〒929-1125 石川県かほく市宇野気リ196-9'],
    ['TEL',          '076-208-3250'],
  ];
  return (
    <section id="company" className="section">
      <div className="container">
        <div className="section-head">
          <div className="section-label">S07 / Company</div>
          <h2 className="section-title"><span className="en">Company</span>会社概要</h2>
          <span/>
        </div>
        <dl className="company-list">
          {rows.map(([k,v]) => (
            <React.Fragment key={k}>
              <dt>{k}</dt>
              <dd>{v}</dd>
            </React.Fragment>
          ))}
        </dl>
        <div className="company-map">
          <iframe
            src="https://maps.google.com/maps?q=%E7%9F%B3%E5%B7%9D%E7%9C%8C%E3%81%8B%E3%81%BB%E3%81%8F%E5%B8%82%E5%AE%87%E9%87%8E%E6%B0%97%E3%83%AA196-9&t=&z=15&ie=UTF8&iwloc=&output=embed"
            title="株式会社ズノーワークス 所在地"
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
          />
        </div>
      </div>
    </section>
  );
}

window.Flow = Flow;
window.Blog = Blog;
window.CtaBand = CtaBand;
window.Company = Company;
window.Footer = Footer;