const { SiteHeader, StickyFooterCta } = window.UnaDS;

const SHIRYO_PDF_PATH = '../../collateral/shushi-model-shiryo.pdf';
const SHIRYO_PDF_FILENAME = 'うなぎ乃助_収支モデル資料.pdf';

/* どのLP・どの媒体から来た訪問者かをURLから読み取る（例: ?lp=a&utm_source=instagram&utm_medium=social&utm_campaign=aug）。
   広告・SNSのリンクにこのパラメータを付けておくと、リード1件ごとに出どころが記録される。 */
function leadContext() {
  const p = new URLSearchParams(window.location.search);
  return {
    lp_id: p.get('lp') || 'franchise-lp',
    utm_source: p.get('utm_source') || '',
    utm_medium: p.get('utm_medium') || '',
    utm_campaign: p.get('utm_campaign') || ''
  };
}

/* Records the lead (Supabase), notifies Discord, and hands the PDF to the visitor. */
function submitLead(form) {
  const cfg = window.UNA_CONFIG || {};
  const ctx = leadContext();
  const record = (cfg.SUPABASE_URL && cfg.SUPABASE_ANON_KEY)
    ? fetch(cfg.SUPABASE_URL + '/rest/v1/leads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', apikey: cfg.SUPABASE_ANON_KEY, Authorization: 'Bearer ' + cfg.SUPABASE_ANON_KEY, Prefer: 'return=minimal' },
        body: JSON.stringify({ name: form.name, email: form.email, region: form.region, source: 'lp-shiryo', lp_id: ctx.lp_id, utm_source: ctx.utm_source, utm_medium: ctx.utm_medium, utm_campaign: ctx.utm_campaign })
      }).catch(function () { /* 記録失敗でも資料は渡す */ })
    : Promise.resolve();
  const notify = cfg.DISCORD_WEBHOOK_URL
    ? (function () {
        /* multipart/form-data (payload_json) はCORSプリフライト不要で、ブラウザから直接送れる */
        const src = ctx.utm_source ? ctx.utm_source + (ctx.utm_medium ? ' / ' + ctx.utm_medium : '') + (ctx.utm_campaign ? ' / ' + ctx.utm_campaign : '') : '直接アクセス';
        const fd = new FormData();
        fd.append('payload_json', JSON.stringify({
          content: '📩 **LPから資料請求がありました**\nお名前: ' + form.name + '\nメール: ' + form.email + '\n地域: ' + (form.region || '未入力') + '\nLP: ' + ctx.lp_id + '\n流入元: ' + src
        }));
        return fetch(cfg.DISCORD_WEBHOOK_URL, { method: 'POST', body: fd }).catch(function () { /* 通知失敗でも資料は渡す */ });
      })()
    : Promise.resolve();
  return Promise.all([record, notify]).then(function () {
    const a = document.createElement('a');
    a.href = SHIRYO_PDF_PATH;
    a.download = SHIRYO_PDF_FILENAME;
    document.body.appendChild(a);
    a.click();
    a.remove();
  });
}

function LeadDialog({ open, onClose }) {
  const { Button } = window.UnaDS;
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [region, setRegion] = React.useState('');
  const [sent, setSent] = React.useState(false);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  React.useEffect(function () { if (open) { setSent(false); setBusy(false); setError(''); } }, [open]);
  if (!open) return null;

  const inputStyle = { font: 'inherit', fontSize: 14, color: 'var(--text-body)', padding: '9px 11px', border: '1px solid var(--line-strong)', borderRadius: 'var(--radius-sm)', background: 'var(--kinari-100)' };
  const handleSubmit = function () {
    if (!name.trim()) { setError('お名前をご入力ください。'); return; }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) { setError('メールアドレスの形式をご確認ください。'); return; }
    setError('');
    setBusy(true);
    submitLead({ name: name.trim(), email: email.trim(), region: region.trim() }).then(function () {
      setBusy(false);
      setSent(true);
    });
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, zIndex: 60, background: 'rgba(10,8,7,.62)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20 }}>
      <div onClick={function (e) { e.stopPropagation(); }} style={{ width: 420, maxWidth: '100%', background: 'var(--surface-card-alt)', border: 'var(--border-gold)', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-raised)', overflow: 'hidden' }}>
        <div style={{ background: 'var(--surface-panel)', color: 'var(--kinari-100)', padding: '12px 16px', fontFamily: 'var(--font-mincho)', fontWeight: 700, fontSize: 17 }}>収支モデル資料のご請求（無料）</div>
        {sent ? (
          <div style={{ padding: 22, display: 'grid', gap: 12, textAlign: 'center' }}>
            <div style={{ fontFamily: 'var(--font-mincho)', fontWeight: 700, fontSize: 18, color: 'var(--text-strong)' }}>資料をお送りしました。</div>
            <p style={{ margin: 0, fontFamily: 'var(--font-gothic)', fontSize: 12.5, lineHeight: 1.9, color: 'var(--text-body)' }}>収支モデル資料（PDF）のダウンロードを開始しました。<br />始まらない場合は下のリンクからどうぞ。</p>
            <a href={SHIRYO_PDF_PATH} download={SHIRYO_PDF_FILENAME} style={{ fontFamily: 'var(--font-gothic)', fontSize: 13, fontWeight: 700 }}>資料をもう一度ダウンロードする</a>
            <Button variant="secondary" size="md" label="閉じる" block arrow={false} onClick={onClose} style={{ justifyContent: 'center' }} />
          </div>
        ) : (
          <div style={{ padding: 18, display: 'grid', gap: 12 }}>
            <label style={{ display: 'grid', gap: 5, fontFamily: 'var(--font-gothic)', fontSize: 12, color: 'var(--text-muted)' }}>
              お名前
              <input value={name} onChange={function (e) { setName(e.target.value); }} placeholder="お名前" style={inputStyle} />
            </label>
            <label style={{ display: 'grid', gap: 5, fontFamily: 'var(--font-gothic)', fontSize: 12, color: 'var(--text-muted)' }}>
              メールアドレス
              <input type="email" value={email} onChange={function (e) { setEmail(e.target.value); }} placeholder="メールアドレス" style={inputStyle} />
            </label>
            <label style={{ display: 'grid', gap: 5, fontFamily: 'var(--font-gothic)', fontSize: 12, color: 'var(--text-muted)' }}>
              お住まいの地域
              <input value={region} onChange={function (e) { setRegion(e.target.value); }} placeholder="お住まいの地域" style={inputStyle} />
            </label>
            {error ? <p style={{ margin: 0, fontFamily: 'var(--font-gothic)', fontSize: 12, color: 'var(--text-accent)' }}>{error}</p> : null}
            <Button variant="primary" size="md" label={busy ? '送信中…' : '資料を受け取る'} sub="ご入力内容はご案内のみに使用します" block arrow={false} onClick={busy ? undefined : handleSubmit} style={{ justifyContent: 'center' }} />
            <p style={{ margin: 0, fontFamily: 'var(--font-gothic)', fontSize: 10, textAlign: 'center', color: 'var(--text-muted)' }}>しつこい営業は一切いたしません。</p>
          </div>
        )}
      </div>
    </div>
  );
}

function App() {
  const [open, setOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(function () {
    const onScroll = function () { setScrolled(window.scrollY > 420); };
    window.addEventListener('scroll', onScroll);
    onScroll();
    return function () { window.removeEventListener('scroll', onScroll); };
  }, []);
  const cta = function () { setOpen(true); };
  return (
    <div style={{ background: 'var(--surface-page)', paddingBottom: 84 }}>
      <SiteHeader onCta={cta} nav={[
        { label: 'うなぎ乃助の強み' }, { label: '収支モデル' }, { label: 'プラン・費用' },
        { label: 'オーナー事例' }, { label: '開業までの流れ' }, { label: 'よくある質問' }
      ]} />
      <HeroSection onCta={cta} />
      <WorrySection />
      <NumbersSection />
      <ModelSection />
      <PlansSection />
      <SupportSection />
      <FlowSection onCta={cta} />
      <ClosingSection onCta={cta} />
      <StickyFooterCta visible={scrolled} note="しつこい営業は一切いたしません。お気軽にご相談ください。" onPrimary={cta} onSecondary={cta} />
      <LeadDialog open={open} onClose={function () { setOpen(false); }} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);