const { useState: useStateP } = React;

function Pass({ setPage }){
  var isMobile = useIsMobile();
  const { FAQ } = window.DATA;
  const [openQ, setOpenQ] = useStateP(0);
  useScrollReveal();

  return (
    <div>
      {/* ===== HERO ===== */}
      <section>
        <div className="container">
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr', gap:'clamp(24px, 4vw, 64px)', alignItems:'center'}}>
            <div className="stack-lg reveal-left">
              <div className="kicker">flower pass — 月額500円のサブスク</div>
              <h1>
                毎日を彩る、<br/>
                <span style={{fontFamily:'var(--italic)', fontStyle:'italic', fontWeight:400, color:'var(--clay)'}}>花のサブスク</span>。
              </h1>
              <p className="lead" style={{maxWidth:540}}>
                月額500円で、毎日のお買い物が500円割引になるお得なサブスクリプション。<br/>
                お部屋に毎日お花を飾りたい方、たくさんの種類を楽しみたい方に最適です。<br/>
                店頭のオーダーシートにサブスク登録時のフルネームを記入するだけで適用されます。
              </p>
              <div className="row">
                <a href="https://square.link/u/diAzbD6z" className="btn clay" onClick={(e)=>{e.preventDefault(); window.open('https://square.link/u/diAzbD6z','_blank');}}>花パスに申し込む <span className="arrow">→</span></a>
                <a href="#" className="btn ghost" onClick={(e)=>{e.preventDefault(); setPage('howto');}}>無人販売の使い方</a>
              </div>
            </div>

            {/* Pass card visual */}
            <div className="reveal-right" style={{display:'flex', justifyContent:'center'}}>
              <div className="tile" style={{width: isMobile ? '100%' : 340, maxWidth:340, padding:0, overflow:'hidden', background:'var(--accent)', color:'var(--paper)', borderColor:'var(--accent)', transform: isMobile ? 'none' : 'rotate(-3deg)', boxShadow:'0 30px 60px rgba(0,0,0,0.12)'}}>
                <div style={{padding:'28px 28px 20px'}}>
                  <div style={{display:'flex', justifyContent:'space-between', alignItems:'start'}}>
                    <div>
                      <div style={{fontFamily:'var(--italic)', fontStyle:'italic', color:'var(--clay-soft)', fontSize:12, letterSpacing:'.2em'}}>flower pass</div>
                      <div style={{fontFamily:'var(--serif)', fontSize:26, marginTop:6}}>花パス</div>
                    </div>
                    <div className="flower-seal" style={{width:52, height:52}}/>
                  </div>
                </div>
                <div style={{borderTop:'1px dashed color-mix(in oklab, #f5f0e6 40%, transparent)', padding:'18px 28px'}}>
                  <div style={{fontSize:11, letterSpacing:'.2em', color:'var(--clay-soft)'}}>MONTHLY</div>
                  <div style={{fontFamily:'var(--serif)', fontSize:44, fontWeight:500, lineHeight:1}}>¥500<span style={{fontSize:14, color:'color-mix(in oklab, #f5f0e6 70%, transparent)', marginLeft:6}}>/ 月</span></div>
                  <div style={{fontSize:12, color:'color-mix(in oklab, #f5f0e6 70%, transparent)', marginTop:10}}>▸ 1回のお会計から毎日 500円 OFF</div>
                  <div style={{fontSize:12, color:'color-mix(in oklab, #f5f0e6 70%, transparent)', marginTop:4}}>▸ 700円以上のお買い上げで利用可</div>
                </div>
                <div style={{padding:'14px 28px 22px', fontSize:10, letterSpacing:'.2em', color:'var(--clay-soft)'}}>SHIRASAKA FLOWER · 24H</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== プラン詳細 ===== */}
      <section>
        <div className="container">
          <SectionHead num="01" jp="プラン詳細" en="plan details" />
          <div className="grid grid-4 stagger">
            {[
              { k:'料金',   v:'月額 500円', sub:'毎月' },
              { k:'特典',   v:'500円 OFF', sub:'毎日のお会計から' },
              { k:'条件',   v:'700円以上', sub:'のお買い上げで利用可' },
              { k:'対象',   v:'店内すべて', sub:'単品・花束 含む' },
            ].map((d, i) => (
              <div key={d.k} className="tile reveal" style={{padding:'24px 22px 26px'}}>
                <div className="eyebrow">{d.k}</div>
                <div style={{fontFamily:'var(--serif)', fontSize:26, marginTop:10}}>{d.v}</div>
                <div style={{fontSize:12, color:'var(--ink-soft)', marginTop:6, letterSpacing:'.06em'}}>{d.sub}</div>
              </div>
            ))}
          </div>
          <p className="muted" style={{fontSize:13, marginTop:20, textAlign:'center'}}>
            例:&nbsp; <strong style={{color:'var(--ink)'}}>700円のお花が 200円に</strong>。月に2回使えばもう元が取れます。
          </p>
        </div>
      </section>

      {/* ===== ご利用方法 ===== */}
      <section style={{background:'var(--paper)', borderBlock:'1px solid var(--line)'}}>
        <div className="container">
          <SectionHead num="02" jp="ご利用方法" en="how to use" />
          <div style={{display:'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap:'clamp(24px, 4vw, 64px)', alignItems:'center'}}>
            <div>
              <ol style={{listStyle:'none', padding:0, margin:0, display:'grid', gap:14}}>
                {[
                  '店頭のオーダーシートにフルネームをご記入いただきます。',
                  '「割引チェック欄」にチェックを入れてください。',
                  '通常のお支払いから500円を差し引いた金額をお支払いください。',
                ].map((t, i) => (
                  <li key={i} style={{display:'flex', gap:16, alignItems:'baseline'}}>
                    <span style={{fontFamily:'var(--italic)', fontStyle:'italic', color:'var(--clay)', fontSize:22, fontWeight:400}}>{i+1}.</span>
                    <span style={{fontSize:15, lineHeight:1.9}}>{t}</span>
                  </li>
                ))}
              </ol>
              <p className="muted" style={{fontSize:12, marginTop:20}}>※ スタッフ在店時は口頭でもお知らせいただけます。</p>
            </div>
            <div className="tile" style={{padding:0, overflow:'hidden'}}>
              <img src="images/ordersheet.jpg" alt="オーダーシート" style={{width:'100%', display:'block'}} />
              <div style={{padding:'14px 18px', borderTop:'1px solid var(--line)', fontSize:12, color:'var(--ink-soft)', letterSpacing:'.08em'}}>店頭のオーダーシートにサブスク登録時のお名前をご記入ください。</div>
            </div>
          </div>
        </div>
      </section>

      {/* ===== FAQ ===== */}
      <section>
        <div className="container narrow">
          <SectionHead num="03" jp="よくあるご質問" en="FAQ" />
          <div style={{borderTop:'1px solid var(--line)'}}>
            {FAQ.map((f, i) => (
              <div key={i} style={{borderBottom:'1px solid var(--line)'}}>
                <button onClick={()=>setOpenQ(openQ===i?-1:i)}
                  style={{width:'100%', textAlign:'left', padding:'20px 4px', background:'transparent', border:0, cursor:'pointer', display:'flex', justifyContent:'space-between', gap:14, alignItems:'center'}}>
                  <span style={{fontFamily:'var(--serif)', fontSize:17}}>{f.q}</span>
                  <span style={{fontSize:18, color:'var(--ink-soft)', transition:'transform .2s', transform: openQ===i?'rotate(45deg)':'none'}}>＋</span>
                </button>
                {openQ===i && (
                  <div className="fade-swap" style={{padding:'0 4px 22px', color:'var(--ink-soft)', fontSize:14, lineHeight:1.9}}>{f.a}</div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ===== 申込CTA ===== */}
      <section style={{background:'var(--accent)', color:'#f5f0e6'}}>
        <div className="container center">
          <div className="eyebrow" style={{color:'var(--clay-soft)'}}>application</div>
          <h2 style={{color:'inherit', marginTop:12, fontSize:'clamp(32px, 4vw, 48px)'}}>
            お申し込みはこちら
          </h2>
          <p style={{color:'color-mix(in oklab, #f5f0e6 80%, transparent)', maxWidth:560, margin:'16px auto 28px', lineHeight:1.9}}>
            花パスのお申し込みはWebのみとなります。<br/>
            ご不明な点は公式LINEからお気軽にお問い合わせください。
          </p>
          <div style={{display:'flex', gap:12, justifyContent:'center', flexWrap:'wrap'}}>
            <a href="https://square.link/u/diAzbD6z" className="btn clay" onClick={(e)=>{e.preventDefault(); window.open('https://square.link/u/diAzbD6z','_blank');}}>花パスに申し込む <span className="arrow">→</span></a>
            <a href="#" className="btn ghost" style={{color:'var(--paper)', borderColor:'var(--paper)'}}>公式LINEで相談</a>
          </div>
        </div>
      </section>
    </div>
  );
}
window.Pass = Pass;