/* ===== Panex — Landing ===== */
const { useState, useEffect, useRef } = React;

/* Fires when the referenced element scrolls into view (used to replay phone-card animations) */
function useInView(threshold=0.5){
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(()=>{
    const el = ref.current;
    if(!el) return;
    const obs = new IntersectionObserver(([entry])=>setInView(entry.isIntersecting), { threshold });
    obs.observe(el);
    return ()=>obs.disconnect();
  },[]);
  return [ref, inView];
}

/* Phone bezel wrapper */
function PhoneFrame({ children, scale }){
  return (
    <div className="phone">
      <div className="phone-notch"/>
      <div className="phone-screen">{children}</div>
    </div>
  );
}

/* shared status bar + header for the phone previews */
function LpChrome(){
  return (
    <>
      <div className="lp-status">
        <span>9:41</span>
        <span className="lp-sig"><i/><i/><i/><svg width="16" height="11" viewBox="0 0 16 11"><rect x="1" y="1" width="11" height="9" rx="2" fill="none" stroke="#0E1626" strokeWidth="1.2"/><rect x="2.5" y="2.5" width="8" height="6" rx="1" fill="#0E1626"/><rect x="13" y="3.5" width="1.6" height="4" rx="1" fill="#0E1626"/></svg></span>
      </div>
      <div className="lp-head">
        <Icon name="back" size={20} color="#0E1626"/>
        <span>분석 결과</span>
        <Icon name="share" size={18} color="#0E1626"/>
      </div>
    </>
  );
}

/* Phone preview — top half: scores + temperature graph */
function LandingPreviewTop({ active }){
  const D = window.CR_DATA;
  const cls = (extra="") => `lp-anim ${extra} ${active?"in":""}`;
  return (
    <div className="lp">
      <LpChrome/>
      <div className="lp-body noscroll">
        <div className={cls()} style={{display:"flex",gap:7}}>
          <StatCard icon="star"  color="var(--star)" soft="var(--star-soft)" label="내 대화 점수" value="72" unit="/100"/>
          <StatCard icon="smile" color="var(--good)" soft="var(--good-soft)" label="상대 반응" value="58" unit="/100"/>
        </div>
        <div className={cls("d1")} style={{display:"flex",gap:7,marginTop:7}}>
          <StatCard icon="frown" color="var(--warn)" soft="var(--warn-soft)" label="기회 날린 수" value="3" unit="회"/>
          <StatCard icon="bolt"  color="var(--bad)"  soft="var(--bad-soft)"  label="분위기 깬 발언" value="1" unit="회"/>
        </div>
        <div className={`lp-card ${cls("d2")}`}>
          <div className="lp-card-t"><span>대화 온도 흐름</span><Icon name="info" size={13} color="#B7BACB"/></div>
          <TempGraph key={active} data={D.temperature} w={300} h={130} animate={active}/>
          <div className="lp-xlbl"><span>초반</span><span>후반</span></div>
        </div>
      </div>
    </div>
  );
}

/* Phone preview — bottom half: highlights, verdict, suggestion, pattern check */
function LandingPreviewBottom({ active }){
  const D = window.CR_DATA;
  const cls = (extra="") => `lp-anim ${extra} ${active?"in":""}`;
  return (
    <div className="lp">
      <LpChrome/>
      <div className="lp-body noscroll">
        <div className={`lp-card ${cls()}`}>
          <div className="lp-card-t"><span>주요 순간 하이라이트</span><span className="lp-more">더보기 ›</span></div>
          {D.highlights.map((h,i)=>(
            <div key={i} className="lp-hl">
              <span className={`lp-dot ${h.type}`}>{h.type==="good"?"♥":h.type==="warn"?"!":"✕"}</span>
              <b>{h.label}</b><span className="lp-hl-q">"{h.text}"</span><span className="lp-time">{h.time}</span>
            </div>
          ))}
        </div>
        <div className={`lp-card lp-verdict ${cls("d1")}`}>
          <b>총평</b>
          <p>초반엔 케미 좋았는데, 중반부터 질문이 뚝 끊겼어요.</p>
          <div style={{position:"absolute",right:14,bottom:10}}><Mascot size={46} mood="think"/></div>
        </div>
        <div className={`lp-card lp-sugg ${cls("d2")}`}>
          <b>추천 다음 메시지</b>
          <div className="lp-sugg-box">
            <span>"오늘 하루 어땠어? 나랑 얘기하면서 좀 풀렸으면 😊"</span>
            <Icon name="copy" size={15} color="#9598AD"/>
          </div>
        </div>
      </div>
    </div>
  );
}

/* Hero preview — a crisp result-style summary card (same visual language as
   the result dashboard) so the landing reads as confident/data-driven, not
   a floaty template. Replaces the old lavender radial glow in the hero. */
function HeroPreviewCard(){
  const D = window.CR_DATA;
  return (
    <div className="hero-card">
      <div className="hc-head">
        <span className="hc-grade">나쁘지 않아요</span>
        <span className="hc-tag"><Icon name="sparkle" size={12} color="#6C5DD8"/>복기 완료</span>
      </div>
      <div className="hc-score">
        <div className="hc-num">72<span>점</span></div>
        <p>초반 흐름은 좋았는데,<br/>중반 이후가 아쉬웠어요.</p>
      </div>
      <div className="hc-stats">
        <StatCard icon="smile" color="var(--good)" soft="var(--good-soft)" label="상대 반응" value="58" unit="/100"/>
        <StatCard icon="frown" color="var(--warn)" soft="var(--warn-soft)" label="기회 날린 수" value="3" unit="회"/>
      </div>
      <div className="hc-graph">
        <div className="hc-graph-t"><span>대화 온도 흐름</span><span className="hc-graph-x">초반 → 후반</span></div>
        <TempGraph data={D.temperature} w={300} h={86} animate padded={false}/>
      </div>
    </div>
  );
}

function Landing({ onStart }){
  const D = window.CR_DATA;
  const steps = [
    { ic:"image",   t:"스크린샷 올리기", d:"카톡·인스타 DM·문자, 뭐든 캡처해서 드래그" },
    { ic:"sparkle", t:"AI가 복기", d:"대화 온도·점수·놓친 타이밍을 한 번에 분석" },
    { ic:"check",   t:"다음 메시지", d:"지금 보내기 딱 좋은 한 줄까지 추천받기" },
  ];
  const feats = [
    { ic:"bolt",    t:"놓친 타이밍 콕 짚어드려요", d:"분위기 깬 말과 끊긴 흐름을 자동으로 찾아내요" },
    { ic:"sparkle", t:"한 줄 총평으로 정리", d:"전체 대화 흐름을 짧고 명확한 총평으로 보여드려요" },
    { ic:"copy",    t:"다음 메시지까지 추천", d:"지금 보내기 좋은 답장을 톤별로 바로 제안해드려요" },
  ];
  const [ref1, in1] = useInView();
  const [ref2, in2] = useInView();
  return (
    <div className="landing" style={{animation:"fadeIn .4s"}}>
      {/* NAV */}
      <nav className="nav">
        <div className="nav-inner wrap">
          <div className="row gap10">
            <span className="logo-text" style={{color:"var(--primary)"}}>리뷰썸</span>
          </div>
          <div className="nav-links">
            <a href="#hero">서비스 소개</a><a onClick={onStart} style={{cursor:"pointer"}}>분석 예시</a><a href="#feature-1">이용 방법</a>
          </div>
          <button className="btn btn-ghost btn-sm" onClick={onStart} style={{height:44,padding:"0 20px",fontSize:15}}>복기 시작하기</button>
        </div>
      </nav>

      {/* HERO */}
      <header id="hero" className="hero wrap">
        <div className="hero-left">
          <span className="badge" style={{animation:"fadeUp .5s .05s both",background:"var(--surface)",border:"1px solid var(--line-2)",color:"var(--ink-2)"}}><Icon name="sparkle" size={14} color="#6C5DD8"/>AI 대화 분석</span>
          <h1 className="headline" style={{animation:"fadeUp .5s .1s both"}}>
            내가 놓친 대화의 순간을<br/>AI가 다시 <span style={{color:"var(--primary)"}}>복기</span>해드려요
          </h1>
          <p className="subhead" style={{animation:"fadeUp .5s .16s both"}}>
            카톡, 인스타 DM, 문자 스크린샷을 올리면<br/>AI가 대화의 흐름과 점수, 개선점을 한눈에 분석해드려요.
          </p>
          <div className="hero-cta" style={{animation:"fadeUp .5s .22s both"}}>
            <button className="btn btn-primary btn-lg" onClick={onStart} style={{width:"100%",maxWidth:380}}>
              <Icon name="upload" size={20} color="#fff"/> 내 대화 복기하기
            </button>
            <div className="hero-hint"><Icon name="image" size={14} color="var(--ink-3)"/>스크린샷 한 장이면 충분해요</div>
          </div>
        </div>
        <div className="hero-visual" style={{animation:"fadeUp .6s .28s both"}}>
          <HeroPreviewCard/>
        </div>
        <a href="#feature-1" className="scroll-cue" aria-label="아래로 스크롤">
          <Icon name="chevD" size={22} color="#B7BACB"/>
        </a>
      </header>

      {/* PAGE 2: HOW IT WORKS + PHONE PREVIEW (top half — scores & temperature) */}
      <section id="feature-1" ref={ref1} className="feature wrap">
        <div className="feature-showcase">
          <div className="feature-info">
            <div className="feature-tag">이용 방법</div>
            <h2 className="feature-h">3단계면 끝나요</h2>
            <div className="feature-list">
              {steps.map((s,i)=>(
                <div key={i} className="step-card">
                  <div className="step-no">{i+1}</div>
                  <div className="step-ic"><Icon name={s.ic} size={22} color="#6C5DD8"/></div>
                  <div className="step-text"><h3>{s.t}</h3><p>{s.d}</p></div>
                </div>
              ))}
            </div>
          </div>
          <div className="hero-right">
            <PhoneFrame><LandingPreviewTop active={in1}/></PhoneFrame>
          </div>
        </div>
      </section>

      {/* PAGE 3: WHAT YOU GET + PHONE PREVIEW (bottom half — highlights, verdict, suggestion) */}
      <section id="feature-2" ref={ref2} className="feature wrap">
        <div className="feature-showcase reverse">
          <div className="feature-info">
            <div className="feature-tag">이런 것까지 알려드려요</div>
            <h2 className="feature-h">놓친 순간부터<br/>다음 한마디까지</h2>
            <div className="feat-list">
              {feats.map((s,i)=>(
                <div key={i} className="feat-item">
                  <div className="feat-ic"><Icon name={s.ic} size={20} color="#6C5DD8"/></div>
                  <div className="step-text"><h3>{s.t}</h3><p>{s.d}</p></div>
                </div>
              ))}
            </div>
            <button className="btn btn-primary btn-lg" onClick={onStart} style={{marginTop:24,alignSelf:"stretch",maxWidth:380}}>
              <Icon name="upload" size={20} color="#fff"/> 지금 내 대화 복기하기
            </button>
          </div>
          <div className="hero-right">
            <PhoneFrame><LandingPreviewBottom active={in2}/></PhoneFrame>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Landing, PhoneFrame, HeroPreviewCard });