/* global React, LC, NavBar, AppMark, StoreBadge, PhoneFrame, PhoneHomePreview, PhoneFridgePreview, PhoneRecipePreview */
const { useState, useEffect } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Hero — split: copy left, phone right

function Hero() {
  return <section style={{background:LC.bg,paddingBottom:80,position:'relative',overflow:'hidden'}}>
    <NavBar/>
    <div style={{maxWidth:1200,margin:'0 auto',padding:'40px 32px 0',display:'grid',gridTemplateColumns:'1.1fr 1fr',gap:64,alignItems:'center'}}>
      <div>
        <div style={{display:'inline-flex',alignItems:'center',gap:8,padding:'6px 14px 6px 10px',borderRadius:9999,background:LC.primaryFixed,color:LC.primaryDeep,font:'600 13px/16px var(--font-pretendard)'}}>
          <span style={{width:8,height:8,borderRadius:9999,background:LC.primary}}/>
          1인 가구를 위한 냉장고 레시피
        </div>
        <h1 style={{font:'800 72px/76px var(--font-pretendard)',letterSpacing:'-2px',color:LC.text,margin:'24px 0 0',wordBreak:'keep-all'}}>
          오늘은<br/>
          <span style={{color:LC.primary}}>뭐 먹지?</span>
        </h1>
        <p style={{font:'500 19px/28px var(--font-pretendard)',color:LC.textVar,margin:'24px 0 0',maxWidth:480,wordBreak:'keep-all'}}>
          냉장고에 있는 재료로 <strong style={{color:LC.text,fontWeight:700}}>지금 만들 수 있는 것</strong>,
          하나만 사면 만들 수 있는 것을 먼저 보여줘요.
          고민 대신 한 끼.
        </p>
        <p style={{font:'500 13px/18px var(--font-pretendard)',color:LC.textVar,opacity:.75,margin:'8px 0 0',letterSpacing:.2}}>
          What's in your fridge, today.
        </p>
        <div style={{display:'flex',gap:12,marginTop:36,flexWrap:'wrap'}}>
          <StoreBadge store="app" variant="dark" disabled/>
          <StoreBadge store="play" variant="dark"/>
        </div>
        <div style={{display:'flex',alignItems:'center',gap:20,marginTop:28,font:'500 13px/18px var(--font-pretendard)',color:LC.textVar}}>
          <div style={{display:'flex',alignItems:'center',gap:4}}>
            <span style={{color:'#FFBA38'}}>★★★★★</span>
            <span><strong style={{color:LC.text,fontWeight:700}}>4.8</strong> · 사용자 평점</span>
          </div>
          <div style={{width:1,height:14,background:LC.divider}}/>
          <div>무료 · 광고 없음</div>
        </div>
      </div>
      <div style={{position:'relative',display:'flex',justifyContent:'center'}}>
        {/* Decorative warm splotches */}
        <div style={{position:'absolute',top:-20,right:-10,width:180,height:180,borderRadius:9999,background:LC.peach,filter:'blur(60px)',opacity:.55,zIndex:0}}/>
        <div style={{position:'absolute',bottom:40,left:-20,width:220,height:220,borderRadius:9999,background:LC.mint,filter:'blur(70px)',opacity:.55,zIndex:0}}/>
        <div style={{position:'relative',zIndex:1}}>
          <PhoneFrame>
            <PhoneHomePreview/>
          </PhoneFrame>
        </div>
      </div>
    </div>
  </section>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Match-% demo strip

function MatchStrip() {
  const items = [
    {pct:100, label:'지금 만들 수 있어요', sub:'모든 재료가 있어요', color:LC.primary, bg:LC.primaryFixed, dish:'김치볶음밥', emoji:'🍳'},
    {pct:83, label:'조금만 사면 돼요', sub:'2가지만 더 있으면', color:LC.secondary, bg:LC.peach, dish:'토마토 파스타', emoji:'🍝'},
    {pct:47, label:'가까워지는 중', sub:'5가지 더 필요해요', color:'#707A6C', bg:LC.surf3, dish:'비빔국수', emoji:'🍜'},
  ];
  return <section style={{background:LC.surf2,padding:'96px 32px'}}>
    <div style={{maxWidth:1200,margin:'0 auto'}}>
      <div style={{maxWidth:680}}>
        <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.secondary}}>매칭률 = 쇼핑리스트</div>
        <h2 style={{font:'800 46px/52px var(--font-pretendard)',letterSpacing:'-1px',color:LC.text,margin:'12px 0 0',wordBreak:'keep-all'}}>
          숫자 하나로<br/>오늘 저녁이 결정돼요.
        </h2>
        <p style={{font:'500 17px/26px var(--font-pretendard)',color:LC.textVar,margin:'16px 0 0',maxWidth:560,wordBreak:'keep-all'}}>
          레시피마다 냉장고 매칭률을 계산해드려요. 100%는 바로 요리, 80%는 한두 개만 사면 끝.
        </p>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:20,marginTop:48}}>
        {items.map(x => (
          <div key={x.pct} style={{background:LC.surf1,borderRadius:28,padding:32,position:'relative',overflow:'hidden',minHeight:260}}>
            <div style={{position:'absolute',top:-30,right:-20,width:150,height:150,borderRadius:9999,background:x.bg,opacity:.6}}/>
            <div style={{position:'absolute',top:20,right:28,fontSize:60,opacity:.22}}>{x.emoji}</div>
            <div style={{position:'relative'}}>
              <div style={{font:'800 96px/96px var(--font-pretendard)',letterSpacing:'-3px',color:x.color,fontVariantNumeric:'tabular-nums'}}>{x.pct}<span style={{fontSize:48,letterSpacing:'-1px'}}>%</span></div>
              <div style={{font:'700 18px/24px var(--font-pretendard)',color:LC.text,marginTop:24}}>{x.label}</div>
              <div style={{font:'500 14px/20px var(--font-pretendard)',color:LC.textVar,marginTop:4}}>{x.sub} · {x.dish}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Features — 3-up with phone

function Features() {
  return <section id="features" style={{background:LC.bg,padding:'96px 32px'}}>
    <div style={{maxWidth:1200,margin:'0 auto'}}>
      <div style={{maxWidth:680,marginBottom:64}}>
        <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.secondary}}>핵심 기능</div>
        <h2 style={{font:'800 46px/52px var(--font-pretendard)',letterSpacing:'-1px',color:LC.text,margin:'12px 0 0',wordBreak:'keep-all'}}>
          냉장고에서 시작하는<br/>작고 정확한 앱.
        </h2>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:20}}>
        <FeatureCard
          emoji="🧊"
          over="재료 관리"
          title="냉장고에 넣고 빼기"
          body="재료를 카테고리별로 정리하고, 소진 표시와 삭제로 빠르게 관리해요."
          bg={LC.mint}
        />
        <FeatureCard
          emoji="✨"
          over="매칭 추천"
          title="오늘 만들 수 있는 것"
          body="100% 매칭부터 보여줘요. 사야 할 게 하나면 '조금만 사면 돼요'에 뜹니다."
          bg={LC.peach}
        />
        <FeatureCard
          emoji="📖"
          over="나만의 모음"
          title="북마크와 내 레시피"
          body="좋아하는 레시피를 저장하고, 직접 올린 레시피를 공개/비공개로 관리해요."
          bg={LC.honey}
        />
      </div>
    </div>
  </section>;
}

function FeatureCard({emoji, over, title, body, bg}) {
  return <div style={{background:LC.surf1,borderRadius:28,padding:28,minHeight:260,display:'flex',flexDirection:'column'}}>
    <div style={{width:56,height:56,borderRadius:16,background:bg,display:'flex',alignItems:'center',justifyContent:'center',fontSize:28,marginBottom:20}}>{emoji}</div>
    <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.secondary}}>{over}</div>
    <div style={{font:'800 24px/30px var(--font-pretendard)',letterSpacing:'-0.4px',color:LC.text,marginTop:8,wordBreak:'keep-all'}}>{title}</div>
    <div style={{font:'500 15px/22px var(--font-pretendard)',color:LC.textVar,marginTop:10,wordBreak:'keep-all'}}>{body}</div>
  </div>;
}

// ─────────────────────────────────────────────────────────────────────────────
// How it works — 3 steps with phone screens

function HowItWorks() {
  return <section id="how" style={{background:LC.surf2,padding:'96px 32px'}}>
    <div style={{maxWidth:1200,margin:'0 auto'}}>
      <div style={{maxWidth:680,marginBottom:64}}>
        <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.secondary}}>사용법</div>
        <h2 style={{font:'800 46px/52px var(--font-pretendard)',letterSpacing:'-1px',color:LC.text,margin:'12px 0 0',wordBreak:'keep-all'}}>
          3단계면 충분해요.
        </h2>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:32,alignItems:'start'}}>
        <Step n={1} title="냉장고를 채워요" body="마늘, 대파, 계란… 있는 재료를 툭툭 담으면 돼요." phone={<PhoneFridgePreview/>}/>
        <Step n={2} title="매칭 레시피를 봐요" body="지금 바로 만들 수 있는 것부터 순서대로 보여드려요." phone={<PhoneHomePreview/>}/>
        <Step n={3} title="요리하고, 빼요" body="다 쓴 재료는 탭 한 번으로 소진 처리. 다음 매칭에 바로 반영돼요." phone={<PhoneRecipePreview/>}/>
      </div>
    </div>
  </section>;
}

function Step({n, title, body, phone}) {
  return <div>
    <div style={{display:'flex',justifyContent:'center',marginBottom:28}}>
      <div style={{transform:'scale(0.78)',transformOrigin:'top center'}}>
        <PhoneFrame style={{boxShadow:'0 20px 50px rgba(13,78,21,0.14), 0 0 0 1px rgba(0,0,0,0.08)'}}>
          {phone}
        </PhoneFrame>
      </div>
    </div>
    <div style={{display:'flex',alignItems:'baseline',gap:12,marginTop:-80}}>
      <div style={{font:'800 56px/56px var(--font-pretendard)',letterSpacing:'-2px',color:LC.primary,fontVariantNumeric:'tabular-nums'}}>{String(n).padStart(2,'0')}</div>
      <div style={{flex:1}}>
        <div style={{font:'800 22px/28px var(--font-pretendard)',letterSpacing:'-0.3px',color:LC.text,wordBreak:'keep-all'}}>{title}</div>
        <div style={{font:'500 15px/22px var(--font-pretendard)',color:LC.textVar,marginTop:6,wordBreak:'keep-all'}}>{body}</div>
      </div>
    </div>
  </div>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Philosophy band — warm quote

function Philosophy() {
  return <section style={{background:LC.primary,color:'#fff',padding:'96px 32px',position:'relative',overflow:'hidden'}}>
    <div style={{position:'absolute',top:-40,right:-40,width:280,height:280,borderRadius:9999,background:'rgba(163,246,156,0.12)'}}/>
    <div style={{position:'absolute',bottom:-60,left:-30,width:220,height:220,borderRadius:9999,background:'rgba(255,220,198,0.08)'}}/>
    <div style={{maxWidth:920,margin:'0 auto',position:'relative'}}>
      <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.primaryFixed}}>우리의 관점</div>
      <blockquote style={{font:'800 46px/58px var(--font-pretendard)',letterSpacing:'-1px',color:'#fff',margin:'20px 0 0',wordBreak:'keep-all'}}>
        한 끼는 작은 일이에요.<br/>
        <span style={{color:LC.primaryFixed}}>냉장고를 열고, 거기서 시작해요.</span>
      </blockquote>
      <p style={{font:'500 17px/26px var(--font-pretendard)',color:'rgba(255,255,255,0.82)',margin:'28px 0 0',maxWidth:620,wordBreak:'keep-all'}}>
        Recipeat은 자취생과 프리워커, 1인 가구를 위한 앱이에요.
        방 조명의 따뜻한 크림빛과 냉장고의 차가운 녹색 신선함 사이, 딱 그 자리에 있습니다.
      </p>
    </div>
  </section>;
}

// ─────────────────────────────────────────────────────────────────────────────
// FAQ

function FAQ() {
  const items = [
    {q:'무료인가요?', a:'네, 기본 기능은 모두 무료예요. 앱 안에 광고도 없습니다.'},
    {q:'재료를 일일이 입력해야 하나요?', a:'자주 쓰는 재료 세트로 한 번에 채울 수 있어요. 카테고리별로 빠르게 추가하는 UI도 있습니다.'},
    {q:'요리 중에 쓰기 편한가요?', a:'가로 모드 "요리 모드"로 큰 글씨와 단계별 뷰를 제공해요. 기름 묻은 손으로도 읽기 편합니다.'},
  ];
  const [open, setOpen] = useState(0);
  return <section id="faq" style={{background:LC.bg,padding:'96px 32px'}}>
    <div style={{maxWidth:820,margin:'0 auto'}}>
      <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.secondary}}>자주 묻는 질문</div>
      <h2 style={{font:'800 46px/52px var(--font-pretendard)',letterSpacing:'-1px',color:LC.text,margin:'12px 0 48px',wordBreak:'keep-all'}}>
        궁금한 것들.
      </h2>
      <div style={{display:'flex',flexDirection:'column'}}>
        {items.map((x,i) => {
          const isOpen = open===i;
          return <div key={i} style={{borderTop:'1px solid '+LC.divider,padding:'24px 0'}}>
            <button onClick={()=>setOpen(isOpen?-1:i)} style={{width:'100%',background:'transparent',border:0,padding:0,cursor:'pointer',display:'flex',alignItems:'center',justifyContent:'space-between',gap:16,textAlign:'left'}}>
              <span style={{font:'700 20px/28px var(--font-pretendard)',letterSpacing:'-0.3px',color:LC.text}}>{x.q}</span>
              <span style={{width:32,height:32,borderRadius:9999,background:LC.surf3,display:'flex',alignItems:'center',justifyContent:'center',transform:isOpen?'rotate(45deg)':'none',transition:'transform .2s',flexShrink:0}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill={LC.text}><path d="M11 11V5h2v6h6v2h-6v6h-2v-6H5v-2h6z"/></svg>
              </span>
            </button>
            {isOpen && <div style={{font:'500 16px/25px var(--font-pretendard)',color:LC.textVar,marginTop:14,maxWidth:640,wordBreak:'keep-all'}}>{x.a}</div>}
          </div>;
        })}
        <div style={{borderTop:'1px solid '+LC.divider}}/>
      </div>
    </div>
  </section>;
}

// ─────────────────────────────────────────────────────────────────────────────
// Download CTA + Footer

function DownloadCTA() {
  return <section id="download" style={{background:LC.surf2,padding:'96px 32px'}}>
    <div style={{maxWidth:1200,margin:'0 auto',background:LC.primary,borderRadius:40,padding:'72px 56px',position:'relative',overflow:'hidden',display:'grid',gridTemplateColumns:'1.3fr 1fr',gap:48,alignItems:'center'}}>
      <div style={{position:'absolute',top:-60,right:120,width:180,height:180,borderRadius:9999,background:'rgba(163,246,156,0.15)'}}/>
      <div style={{position:'relative'}}>
        <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.primaryFixed}}>지금 시작하기</div>
        <h2 style={{font:'800 52px/58px var(--font-pretendard)',letterSpacing:'-1.2px',color:'#fff',margin:'12px 0 0',wordBreak:'keep-all'}}>
          오늘 저녁은<br/>이걸로 정했어요.
        </h2>
        <p style={{font:'500 17px/26px var(--font-pretendard)',color:'rgba(255,255,255,0.82)',margin:'20px 0 0',maxWidth:440,wordBreak:'keep-all'}}>
          냉장고에 있는 것들로 충분합니다. 지금 다운로드하고, 15분 뒤에 식탁에 앉으세요.
        </p>
        <div style={{display:'flex',gap:12,marginTop:32,flexWrap:'wrap'}}>
          <StoreBadge store="app" variant="light" disabled/>
          <StoreBadge store="play" variant="light"/>
        </div>
      </div>
      <div style={{display:'flex',justifyContent:'center',position:'relative'}}>
        <div style={{transform:'scale(0.82)',transformOrigin:'center'}}>
          <PhoneFrame style={{boxShadow:'0 30px 70px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.14)'}}>
            <PhoneRecipePreview/>
          </PhoneFrame>
        </div>
      </div>
    </div>
  </section>;
}

function Footer() {
  return <footer style={{background:LC.bg,padding:'48px 32px 32px',borderTop:'1px solid '+LC.divider}}>
    <div style={{maxWidth:1200,margin:'0 auto',display:'flex',justifyContent:'space-between',alignItems:'flex-start',gap:40,flexWrap:'wrap'}}>
      <div>
        <div style={{display:'flex',alignItems:'center',gap:10}}>
          <AppMark/>
          <span style={{font:'800 22px/28px var(--font-pretendard)',color:LC.text,letterSpacing:'-0.3px'}}>Recipeat</span>
        </div>
        <p style={{font:'500 14px/22px var(--font-pretendard)',color:LC.textVar,margin:'14px 0 0',maxWidth:320,wordBreak:'keep-all'}}>
          1인 가구를 위한 냉장고 레시피 매칭 앱. 오늘 저녁, 뭐 먹지?
        </p>
      </div>
      <FooterCol h="정책" items={[
        {label:'이용약관', href:'/static/legal/terms-of-service.html'},
        {label:'개인정보처리방침', href:'/static/legal/privacy-policy.html'},
        {label:'계정 삭제 안내', href:'/static/legal/account-deletion.html'},
        {label:'문의', href:'mailto:azqazq195@gmail.com'},
      ]}/>
    </div>
    <div style={{maxWidth:1200,margin:'32px auto 0',paddingTop:24,borderTop:'1px solid '+LC.divider,font:'500 13px/18px var(--font-pretendard)',color:LC.textVar}}>
      © 2026 Recipeat. All rights reserved.
    </div>
  </footer>;
}

function FooterCol({h, items}) {
  return <div>
    <div style={{font:'700 11px/14px var(--font-pretendard)',letterSpacing:'1.2px',textTransform:'uppercase',color:LC.text}}>{h}</div>
    <div style={{display:'flex',flexDirection:'column',gap:10,marginTop:16}}>
      {items.map(item => <a key={item.label} href={item.href} style={{font:'500 14px/20px var(--font-pretendard)',color:LC.textVar,textDecoration:'none'}}>{item.label}</a>)}
    </div>
  </div>;
}

// ─────────────────────────────────────────────────────────────────────────────
// (Editorial variant removed — split variant confirmed)

Object.assign(window, {Hero, MatchStrip, Features, HowItWorks, Philosophy, FAQ, DownloadCTA, Footer});
