{steps.map((s, i) => (

{i {s.label}

))}

{/* Step 0 - Origins */} {step === 0 && (

{t('興味のある産地を選択', 'Select origins of interest')} *

{t('複数選択可。今後参加予定の産地も対象です。', 'Multiple selections welcome.')}

{ORIGINS.map(o => ( toggleArr('origins', o.id)}/> {o.name[lang]} · {o.code} {o.importer} ))}

{t('精製方法（任意）', 'Process preferences (optional)')}

{['Washed','Natural','Honey','Anaerobic','Wet Hulled'].map(p => ( toggleArr('process', p)}/> {p} ))}

)} {/* Step 1 - Detail */} {step === 1 && (

{t('使用目的・想定する用途', 'Intended use')} *

update('purpose', e.target.value)} placeholder={t('例: シングルオリジンとして店頭で販売予定。エスプレッソ・ドリップ両対応のロットを希望。', 'e.g. Single origin offering for retail; suitable for both espresso and drip.')}/>
          </div>

<div className="field">
            <label>{t('希望サンプル量', 'Sample size')}</label>
            <div className="checks" style={{gridTemplateColumns:'repeat(3,1fr)'}}>
              {[
                {v:'small', lab: t('100g 程度','~100g'), sub: t('テイスティング向け','For tasting')},
                {v:'medium', lab: t('300g - 500g','300g – 500g'), sub: t('焙煎テスト向け','Roast testing')},
                {v:'large', lab: t('1kg 以上','1kg or more'), sub: t('量産前の検証','Pre-production')}
              ].map(o => (
                <label key={o.v} className={`check ${data.quantity===o.v?'on':''}`}>
                  <input type="radio" checked={data.quantity===o.v} onChange={()=>update('quantity', o.v)}/>
                  <span className="box"></span>
                  <span className="lab"><b>{o.lab}</b><span>{o.sub}</span></span>
                </label>
              ))}
            </div>
          </div>

<div className="field">
            <label>{t('ご希望の時期', 'Timing')}</label>
            <select value={data.timing} onChange={e=>update('timing', e.target.value)}>
              <option value="asap">{t('できるだけ早く', 'As soon as possible')}</option>
              <option value="month">{t('1ヶ月以内', 'Within 1 month')}</option>
              <option value="quarter">{t('3ヶ月以内', 'Within 3 months')}</option>
              <option value="flex">{t('時期は柔軟', 'Flexible')}</option>
            </select>
          </div>

<div className="field">
            <label>{t('その他ご要望（任意）', 'Other notes (optional)')}</label>
            <textarea value={data.notes} onChange={e=>update('notes', e.target.value)}/>
          </div>
        </div>
      )}

{/* Step 2 - Contact */}
      {step === 2 && (
        <div>
          <div className="form-grid-2">
            <div className="field">
              <label>{t('会社・屋号名', 'Company / Roastery name')} <span className="req">*</span></label>
              <input type="text" value={data.company} onChange={e=>update('company', e.target.value)}/>
            </div>
            <div className="field">
              <label>{t('役職', 'Role')}</label>
              <input type="text" value={data.role} onChange={e=>update('role', e.target.value)} placeholder={t('代表 / バイヤー / ロースター 等', 'Owner / Buyer / Roaster')}/>
            </div>
          </div>
          <div className="form-grid-2">
            <div className="field">
              <label>{t('ご担当者名', 'Your name')} <span className="req">*</span></label>
              <input type="text" value={data.name} onChange={e=>update('name', e.target.value)}/>
            </div>
            <div className="field">
              <label>{t('電話番号', 'Phone')}</label>
              <input type="tel" value={data.phone} onChange={e=>update('phone', e.target.value)}/>
            </div>
          </div>
          <div className="field">
            <label>Email <span className="req">*</span></label>
            <input type="email" value={data.email} onChange={e=>update('email', e.target.value)}/>
          </div>

<div style={{padding:'18px 20px',background:'var(--bg-2)',border:'1px solid var(--rule)',marginTop:8}}>
            <div style={{fontSize:11,letterSpacing:'.16em',textTransform:'uppercase',color:'var(--muted)',fontWeight:500,marginBottom:10}}>{t('依頼内容の確認', 'Request summary')}</div>
            <div style={{fontSize:13,color:'var(--ink-2)',lineHeight:1.7}}>
              <div>{t('産地', 'Origins')}: <b style={{color:'var(--ink)'}}>{data.origins.map(id => ORIGINS.find(o=>o.id===id).name[lang]).join(' · ') || '—'}</b></div>
              {data.process.length > 0 && <div>{t('精製', 'Process')}: <b style={{color:'var(--ink)'}}>{data.process.join(' · ')}</b></div>}
              <div>{t('量', 'Quantity')}: <b style={{color:'var(--ink)'}}>{data.quantity === 'small' ? t('100g 程度','~100g') : data.quantity === 'medium' ? '300g–500g' : '1kg+'}</b></div>
            </div>
          </div>
        </div>
      )}

<div className="form-nav">
        <span className="progress">{t(`ステップ ${step+1} / ${steps.length}`, `Step ${step+1} of ${steps.length}`)}</span>
        <div className="form-nav__btns">
          {step > 0 && <button className="btn btn--ghost" onClick={()=>setStep(step-1)}>← {t('戻る','Back')}</button>}
          {step < steps.length-1 && <button className="btn btn--solid" disabled={!canNext()} onClick={()=>setStep(step+1)} style={{opacity:canNext()?1:.4}}>{t('次へ','Next')} <span className="arrow">→</span></button>}
          {step === steps.length-1 && <button className="btn btn--solid" disabled={!canNext()} onClick={submit} style={{opacity:canNext()?1:.4}}>{t('送信する','Submit')} <span className="arrow">→</span></button>}
        </div>
      </div>
    </>
  );
};

// ================== EVENT REGISTRATION ==================
const EventDetail = () => {
  const lang = useLang();
  const [open, setOpen] = useState(false);
  const [step, setStep] = useState(0);
  const [data, setData] = useState({ name:'', company:'', email:'', session:'am', count:1 });
  const [done, setDone] = useState(false);
  const t = (jp, en) => lang === 'jp' ? jp : en;
  const update = (k, v) => setData(d => ({ ...d, [k]: v }));

return (
    <>
      <span className="eyebrow"><span data-jp>第一回 イベント</span><span data-en>Inaugural Event</span></span>
      <h2 data-jp>SCAJ2025 期間中、<br/>東京で<em>初開催。</em></h2>
      <h2 data-en>Tokyo, alongside<br/><em>SCAJ 2025.</em></h2>
      <p data-jp>初の試みとなる合同カッピング会。LinkOne 加盟5社のシグネチャーロットを、午前部・午後部の2回、計3ラウンドのカッピングで体験いただけます。</p>
      <p data-en>The first joint cupping. Five LinkOne members present their signature lots across three cupping rounds, in AM and PM sessions.</p>

<dl className="event__meta">
        <div><dt>{t('日付','Date')}</dt><dd>2025.09.28 (Sun)</dd></div>
        <div><dt>{t('会場','Venue')}</dt><dd>UCC Coffee Academy Tokyo</dd></div>
        <div><dt>{t('時間','Time')}</dt><dd>{t('午前部 / 午後部','AM / PM Session')}</dd></div>
        <div><dt>{t('カッピング','Cuppings')}</dt><dd>{t('3 ラウンド','3 Rounds')}</dd></div>
      </dl>

<div className="event__cta">
        <button className="btn btn--solid" onClick={()=>{setOpen(true);setStep(0);setDone(false);}}>
          {t('参加申し込み','RSVP')} <span className="arrow">→</span>
        </button>
        <a href="#sample" className="btn btn--ghost">{t('サンプルを先に依頼','Request samples first')}</a>
      </div>

{open && (
        <div onClick={()=>setOpen(false)} style={{position:'fixed',inset:0,background:'rgba(14,13,11,.72)',zIndex:80,display:'grid',placeItems:'center',padding:'20px',backdropFilter:'blur(6px)'}}>
          <div onClick={e=>e.stopPropagation()} style={{background:'var(--bg)',maxWidth:560,width:'100%',padding:'40px 36px',position:'relative',maxHeight:'90vh',overflowY:'auto'}}>
            <button onClick={()=>setOpen(false)} style={{position:'absolute',top:14,right:14,width:32,height:32,display:'grid',placeItems:'center',color:'var(--ink-2)'}} aria-label="Close">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            </button>

{!done ? (
              <>
                <span className="eyebrow">RSVP · 2025.09.28</span>
                <h3 style={{fontSize:28,fontWeight:300,letterSpacing:'-.02em',margin:'12px 0 24px',lineHeight:1.1}}>{t('合同カッピング会・参加申込','Joint Cupping RSVP')}</h3>

<div className="form-steps" style={{marginBottom:24,paddingBottom:18}}>
                  <div className={`form-step ${step===0?'active':''} ${step>0?'done':''}`}><div className="n">{step>0?'✓':1}</div><span>{t('セッション','Session')}</span></div>
                  <div className={`form-step ${step===1?'active':''}`}><div className="n">2</div><span>{t('情報','Details')}</span></div>
                </div>

{step===0 && (
                  <>
                    <div className="field">
                      <label>{t('参加セッション','Session')} <span className="req">*</span></label>
                      <div className="checks" style={{gridTemplateColumns:'1fr 1fr'}}>
                        {[
                          {v:'am',lab:t('午前部','AM Session'),sub:'10:00 – 12:00'},
                          {v:'pm',lab:t('午後部','PM Session'),sub:'14:00 – 16:00'}
                        ].map(o => (
                          <label key={o.v} className={`check ${data.session===o.v?'on':''}`}>
                            <input type="radio" checked={data.session===o.v} onChange={()=>update('session',o.v)}/>
                            <span className="box"></span>
                            <span className="lab"><b>{o.lab}</b><span>{o.sub}</span></span>
                          </label>
                        ))}
                      </div>
                    </div>

<div className="field">
                      <label>{t('参加人数','Number of attendees')}</label>
                      <select value={data.count} onChange={e=>update('count', +e.target.value)}>
                        {[1,2,3,4].map(n => <option key={n} value={n}>{n} {t('名','attendee'+(n>1?'s':''))}</option>)}
                      </select>
                    </div>
                  </>
                )}

{step===1 && (
                  <>
                    <div className="field">
                      <label>{t('会社・屋号','Company / Roastery')} <span className="req">*</span></label>
                      <input type="text" value={data.company} onChange={e=>update('company',e.target.value)}/>
                    </div>
                    <div className="field">
                      <label>{t('お名前','Name')} <span className="req">*</span></label>
                      <input type="text" value={data.name} onChange={e=>update('name',e.target.value)}/>
                    </div>
                    <div className="field">
                      <label>Email <span className="req">*</span></label>
                      <input type="email" value={data.email} onChange={e=>update('email',e.target.value)}/>
                    </div>
                  </>
                )}

<div className="form-nav">
                  <span className="progress">{step+1} / 2</span>
                  <div className="form-nav__btns">
                    {step>0 && <button className="btn btn--ghost" onClick={()=>setStep(0)}>← {t('戻る','Back')}</button>}
                    {step===0 && <button className="btn btn--solid" onClick={()=>setStep(1)}>{t('次へ','Next')} <span className="arrow">→</span></button>}
                    {step===1 && (
                      <button className="btn btn--solid"
                        disabled={!data.name || !data.company || !data.email}
                        style={{opacity:(data.name && data.company && data.email)?1:.4}}
                        onClick={()=>{
                          // Submit to Contact Form 7 (event form) if configured
                          if (window.linkoneCF7 && window.linkoneCF7.eventFormId && window.linkoneCF7.restUrl) {
                            const form = new FormData();
                            form.append('your-company', data.company);
                            form.append('your-name', data.name);
                            form.append('your-email', data.email);
                            form.append('your-session', data.session === 'am' ? 'AM Session (10:00-12:00)' : 'PM Session (14:00-16:00)');
                            form.append('your-count', String(data.count));
                            const url = window.linkoneCF7.restUrl + 'contact-form-7/v1/contact-forms/' + window.linkoneCF7.eventFormId + '/feedback';
                            fetch(url, { method:'POST', body:form, credentials:'same-origin' })
                              .then(()=>setDone(true))
                              .catch(()=>setDone(true));
                          } else {
                            setDone(true);
                          }
                        }}>
                        {t('申し込む','Confirm RSVP')} <span className="arrow">→</span>
                      </button>
                    )}
                  </div>
                </div>
              </>
            ) : (
              <div className="form-success" style={{padding:'8px 0'}}>
                <div className="form-success__check">
                  <svg width="22" height="22" viewBox="0 0 22 22" fill="none"><path d="M5 11.5l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <h3>{t('お申込みを受付けました','RSVP confirmed')}</h3>
                <p>{t(`${data.session==='am'?'午前部':'午後部'} ・ ${data.count}名 でお席をお取りしました。詳細をメールでお送りします。`,
                       `${data.session==='am'?'AM':'PM'} session · ${data.count} attendee(s) reserved. Details sent to your email.`)}</p>
                <button className="btn btn--ghost" onClick={()=>setOpen(false)}>{t('閉じる','Close')}</button>
              </div>
            )}
          </div>
        </div>
      )}
    </>
  );
};

// ================== TWEAKS ==================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#C84B1F",
  "showOrbit": true,
  "compactHero": false
}/*EDITMODE-END*/;

const Tweaks = () => {
  if(!window.useTweaks) return null;
  const [t, set] = window.useTweaks(TWEAK_DEFAULTS);

useEffect(() => {
    document.documentElement.style.setProperty('--hi', t.accentColor);
    const orbit = document.getElementById('hero-orbit');
    if(orbit) orbit.style.display = t.showOrbit ? '' : 'none';
  }, [t]);

const { TweaksPanel, TweakSection, TweakColor, TweakToggle } = window;
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor label="Accent color" value={t.accentColor} onChange={v=>set('accentColor', v)}/>
      </TweakSection>
      <TweakSection title="Hero">
        <TweakToggle label="Show orbit graphic" value={t.showOrbit} onChange={v=>set('showOrbit', v)}/>
      </TweakSection>
    </TweaksPanel>
  );
};

// ================== MOUNT ==================
function mount(){
  const originRoot = document.getElementById('origin-app');
  const tabsRoot = document.getElementById('origin-tabs');
  const evRoot = document.getElementById('event-detail');
  const formRoot = document.getElementById('sample-form');

if(originRoot){
    // Replace both origin-app and origin-tabs with single combined module that owns state
    const wrap = document.createElement('div');
    originRoot.parentNode.insertBefore(wrap, originRoot);
    originRoot.remove();
    if(tabsRoot) tabsRoot.remove();
    ReactDOM.createRoot(wrap).render(<OriginsModule/>);
  }

if(evRoot) ReactDOM.createRoot(evRoot).render(<EventDetail/>);
  if(formRoot) ReactDOM.createRoot(formRoot).render(<SampleForm/>);

// tweaks
  const tweakRoot = document.createElement('div');
  document.body.appendChild(tweakRoot);
  ReactDOM.createRoot(tweakRoot).render(<Tweaks/>);
}

mount();

{active.name[lang]}

{active.name[lang]}

{t('依頼を受け付けました', 'Request received')}