// sections.jsx — all page sections for the Miseba homepage.

// render a mixed array of strings + {hl|scr|em|pop} spans
function rich(arr) {
  if (!Array.isArray(arr)) return arr;
  return arr.map((part, i) => {
    if (typeof part === 'string') return <React.Fragment key={i}>{part}</React.Fragment>;
    if (part.hl) return <span className="hl" key={i}>{part.hl}</span>;
    if (part.scr) return <span className="scr" key={i}>{part.scr}</span>;
    if (part.em) return <em key={i}>{part.em}</em>;
    if (part.pop) return <span className="pop" key={i}>{part.pop}</span>;
    return null;
  });
}

// ── nav ─────────────────────────────────────────
function Nav() {
  const { t, lang, setLang } = useI18n();
  const go = (e) => { e.preventDefault(); const el = document.getElementById('contact'); if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' }); };
  const top = (e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); };
  return (
    <nav className="nav">
      <div className="wrap nav-inner">
        <a href="#" className="brand" onClick={top}>
          <span className="brand-word"><b>ミセバ</b><i>Miseba</i></span>
        </a>
        <div className="nav-right">
          <div className="lang-toggle">
            <button className={lang === 'ja' ? 'on' : ''} onClick={() => setLang('ja')}>JA</button>
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
          </div>
          <a href="#contact" className="btn btn-pop btn-sm btn-nav" onClick={go}>{t.nav.cta}</a>
        </div>
      </div>
    </nav>
  );
}

// ── hero ────────────────────────────────────────
function Hero() {
  const { t } = useI18n();
  const h = t.hero;
  const go = (e, id) => { e.preventDefault(); const el = document.getElementById(id); if (el) window.scrollTo({ top: el.offsetTop - 50, behavior: 'smooth' }); };
  return (
    <header className="hero">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-pill rv">
              <span className="live"></span>
              <span>{h.pill} · {h.live}</span>
            </div>
            <h1 className="rv" data-delay="60">
              {rich(h.h1)}
            </h1>
            <div className="hero-flourish rv" data-delay="90">
              <div className="googly" aria-hidden="true">
                <span className="eye gw"><i className="pupil"></i></span>
                <span className="eye gw"><i className="pupil"></i></span>
              </div>
              <span>{h.scr}</span>
            </div>
            <p className="hero-sub rv" data-delay="140">{h.sub}</p>
            <div className="hero-cta rv" data-delay="200">
              <a href="#contact" className="btn btn-pop" onClick={(e) => go(e, 'contact')}><span className="ic">✦</span>{h.ctaDM}</a>
              <a href="#contact" className="btn btn-line" onClick={(e) => go(e, 'contact')}>{h.ctaLINE}</a>
            </div>
            <div className="hero-trust rv" data-delay="260">
              {h.trust.map((tr, i) => (
                <span className="tag" key={i}>{tr[0]} <b>{tr[1]}</b> {tr[2]}</span>
              ))}
            </div>
          </div>
          <FeedWall />
        </div>
      </div>
    </header>
  );
}

// ── services ────────────────────────────────────
function Services() {
  const { t } = useI18n();
  const s = t.services;
  return (
    <section className="sec" id="services">
      <div className="wrap">
        <div className="sec-head rv">
          <span className="tag"><span className="dot">●</span> {s.tag}</span>
          <h2>{s.heading}</h2>
          <p>{s.sub}</p>
        </div>
        <div className="svc-grid">
          {s.items.map((it, i) => (
            <div className="svc rv" data-delay={i * 60} key={it.n}>
              <span className="num">{it.n}</span>
              <div className="svc-ic"><Icon name={it.ic} /></div>
              <div className="en">{it.en}</div>
              <h3>{it.t}</h3>
              <p>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── why / meaning / steps ───────────────────────
function Why() {
  const { t } = useI18n();
  const w = t.why;
  return (
    <section className="sec why" id="why">
      <div className="wrap">
        <div className="sec-head rv">
          <span className="tag"><span className="dot">●</span> {w.tag}</span>
          <h2>{w.heading}</h2>
          <p>{w.sub}</p>
        </div>
        <div className="meaning">
          {w.cards.map((c, i) => (
            <div className="meaning-card rv" data-delay={i * 90} key={i}>
              <div className="kanji">{rich(c.kanji)}</div>
              <div className="romaji">{c.romaji}</div>
              <h4>{c.h}</h4>
              <p>{c.p}</p>
            </div>
          ))}
        </div>
        <div className="sec-head rv" style={{ marginTop: 8 }}>
          <span className="tag"><span className="dot">●</span> {w.stepsTag}</span>
        </div>
        <div className="steps">
          {w.steps.map((st, i) => (
            <div className="step rv" data-delay={i * 60} key={st.n}>
              <div className="sn">{st.n}</div>
              <h4>{st.t}<span style={{ color: 'var(--muted)', fontSize: '13px', marginLeft: 6 }}>/ {st.s}</span></h4>
              <p>{st.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── results ─────────────────────────────────────
function Results() {
  const { t } = useI18n();
  const r = t.results;
  return (
    <section className="sec results" id="results">
      <div className="wrap">
        <div className="sec-head rv">
          <span className="tag"><span className="dot">●</span> {r.tag}</span>
          <h2>{r.heading}</h2>
          <p>{r.sub}</p>
        </div>
        <div className="results-grid">
          <div className="case rv">
            <div className="case-top">
              <h3>{r.case.t}</h3>
              <span className="chip">{r.case.chip}</span>
            </div>
            <div className="sub">{r.case.sub}</div>
            <GrowthChart />
            <div className="case-foot">
              {r.case.metrics.map((m, i) => (
                <div className="m" key={i}><b>{m[0]}</b><span>{m[1]}</span></div>
              ))}
            </div>
          </div>
          <div className="ba rv" data-delay="120">
            <h3>{r.ba.t}</h3>
            <div className="ba-cols">
              <div className="ba-col before">
                <div className="lbl">{r.ba.before}</div>
                <div className="ba-mini"><i></i><i></i><i></i><i></i></div>
              </div>
              <div className="ba-col after">
                <div className="lbl">{r.ba.after}</div>
                <div className="ba-mini"><i></i><i></i><i></i><i></i></div>
              </div>
            </div>
            <div className="ba-arrow">{r.ba.arrow} ✦</div>
          </div>
        </div>
        <div className="results-stats rv">
          {r.stats.map((st, i) => (
            <div className="rs" key={i}><b>{st[0]}</b><span>{st[1]}</span></div>
          ))}
        </div>
        <div className="note">{r.note}</div>
      </div>
    </section>
  );
}

// ── part of Veska ───────────────────────────────
function VeskaLine() {
  const { t } = useI18n();
  const v = t.veska;
  return (
    <section className="veska-line">
      <div className="wrap">
        <div className="veska-card rv">
          <div className="vk-l">
            <span className="vk-mark"><i></i><i></i></span>
            <div className="vk-t">
              <b>{v.pre} {v.name} {v.post}</b>
              <span>{v.sub}</span>
            </div>
          </div>
          <a href="https://veska.jp" target="_blank" rel="noopener" className="btn btn-ghost btn-sm">{v.link} →</a>
        </div>
      </div>
    </section>
  );
}

// ── cta + form ──────────────────────────────────
function Cta() {
  const { t, lang } = useI18n();
  const c = t.cta;
  const [sent, setSent] = React.useState(false);
  const [sending, setSending] = React.useState(false);
  // Sends via FormSubmit (no backend). First live submission emails an activation
  // link to the recipient — it must be confirmed once before leads are delivered.
  const onSubmit = async (e) => {
    e.preventDefault();
    if (sending || sent) return;
    const form = e.target;
    const fd = new FormData(form);
    if (fd.get('_honey')) return; // bot trap
    const params = new URLSearchParams();
    for (const [k, val] of fd.entries()) { if (k !== '_honey') params.append(k, val); }
    params.append('_subject', 'ミセバ — 新規お問い合わせ / Miseba inquiry');
    params.append('_template', 'table');
    params.append('_captcha', 'false');
    setSending(true);
    try {
      await fetch('https://formsubmit.co/ajax/veskagroup@gmail.com', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded', Accept: 'application/json' },
        body: params.toString(),
      });
      setSent(true);
      form.reset();
    } catch (err) {
      setSent(true); // fail soft — never trap a lead behind an error screen
    } finally {
      setSending(false);
    }
  };
  const btnLabel = sent
    ? (lang === 'ja' ? '✓ 送信しました' : '✓ Sent')
    : (sending ? (lang === 'ja' ? '送信中…' : 'Sending…') : c.form.submit);
  return (
    <section className="sec cta" id="contact">
      <div className="wrap">
        <div className="cta-grid">
          <div className="cta-left rv">
            <span className="tag"><span className="dot">●</span> {c.tag}</span>
            <h2 style={{ marginTop: 14 }}>{rich(c.h)}</h2>
            <p className="cta-lead">{c.lead}</p>
            <div className="cta-channels">
              {c.channels.map((ch) => (
                <a className="chan" key={ch.k}
                  href={ch.url || '#'}
                  target={ch.url ? '_blank' : undefined}
                  rel={ch.url ? 'noopener noreferrer' : undefined}
                  onClick={ch.url ? undefined : (e) => e.preventDefault()}>
                  <span className={`chan-ic ${ch.k}`}><Icon name={ch.k} /></span>
                  <span className="ct"><b>{ch.t}</b><span>{ch.s}</span></span>
                  <span className="arr">→</span>
                </a>
              ))}
            </div>
          </div>
          <form className="form rv" data-delay="120" onSubmit={onSubmit}>
            <input type="text" name="_honey" tabIndex="-1" autoComplete="off" aria-hidden="true" style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, opacity: 0 }} />
            <div className="frow">
              <label>{c.form.name}</label>
              <input type="text" name="name" placeholder={c.form.namePh} required />
            </div>
            <div className="frow">
              <label>{c.form.biz}</label>
              <select name="industry" defaultValue="">
                <option value="" disabled>—</option>
                {c.form.bizOpts.map((o, i) => <option key={i} value={o}>{o}</option>)}
              </select>
            </div>
            <div className="frow">
              <label>{c.form.msg}</label>
              <textarea name="message" placeholder={c.form.msgPh}></textarea>
            </div>
            <button type="submit" className="btn btn-pop" disabled={sending || sent}>{btnLabel}</button>
            <p className="fnote">{c.form.note}</p>
          </form>
        </div>
      </div>
    </section>
  );
}

// ── footer ──────────────────────────────────────
function Footer() {
  const { t } = useI18n();
  const f = t.foot;
  return (
    <footer>
      <div className="wrap">
        <div className="foot-top">
          <div className="foot-brand">
            <div className="brand">
              <span className="brand-word"><b>ミセバ</b><i>Miseba</i></span>
            </div>
            <p>{f.desc}</p>
          </div>
          <div className="foot-links">
            {f.cols.map((col, i) => (
              <div className="foot-col" key={i}>
                <h5>{col.h}</h5>
                {col.links.map((l, j) => {
                  const ext = col.h === 'Group' ? (j === 0 ? 'https://veska.jp' : 'https://bridgewebdesign.jp') : null;
                  return ext
                    ? <a href={ext} target="_blank" rel="noopener" key={j}>{l}</a>
                    : <a href="#" key={j} onClick={(e) => e.preventDefault()}>{l}</a>;
                })}
              </div>
            ))}
          </div>
        </div>
        <div className="foot-bot">
          <span className="tag">{f.copyright}</span>
          <a className="vk" href="https://veska.jp" target="_blank" rel="noopener">{f.group.split('Veska')[0]}<b>Veska Venture Group</b></a>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, Services, Why, Results, VeskaLine, Cta, Footer });