// 15 · Landing — public web landing page for dail.
// Tall artboard (760 × ~3200). Mirrors splash brand voice: "오늘 거기, 3초만 남겨봐." (박 명시 2026-05-08 5초→3초)
// Sections: nav · hero · 3 feature blocks · how-it-works (3 steps) · groups vs followers (대비) · footer CTA.

const TL = window.DAIL_TOKENS;
const cl = TL.colors, fsl = TL.fontSizes, fwl = TL.fontWeights, rsl = TL.radius;
const baseL = { fontFamily: TL.fonts.primary, lineHeight: 1.45 };

function Wordmark2({ size = 28 }) {
  return (
    <span style={{ ...baseL, fontSize:size, fontWeight:fwl.bold, letterSpacing:'-0.04em', color:cl.textPrimary, lineHeight:1 }}>
      dail<span style={{ color:cl.accent }}>.</span>
    </span>
  );
}

// Mini phone — shrinks the iOS frame to fit landing-page widths.
function MiniPhone({ children, w = 240, h = 520 }) {
  const scale = w / 390;
  return (
    <div style={{ width:w, height:h, position:'relative' }}>
      <div style={{
        position:'absolute', top:0, left:0,
        width:390, height:844,
        transform:`scale(${scale})`, transformOrigin:'top left',
        borderRadius:48, overflow:'hidden', background:'#000',
        boxShadow:'0 30px 60px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.10)',
      }}>
        <div style={{ position:'absolute', top:11, left:'50%', transform:'translateX(-50%)', width:126, height:37, borderRadius:24, background:'#000', zIndex:20 }}/>
        <div style={{ width:'100%', height:'100%', background:cl.bg, overflow:'hidden' }}>
          {children}
        </div>
      </div>
    </div>
  );
}

window.DAIL_LandingPage = function LandingPage() {
  // Inject sub-screens for phone mockups. Use existing screens.
  const MapScreen     = window.DAIL_MapScreen;
  const PreviewScreen = window.DAIL_PreviewScreen;
  const ChatRoom      = window.DAIL_ChatRoomScreen;

  return (
    <div style={{ width:'100%', minHeight:'100%', background:cl.bg, ...baseL, color:cl.textPrimary }}>
      {/* ───── NAV ───── */}
      <nav style={{
        height:64, padding:'0 32px', display:'flex', alignItems:'center', justifyContent:'space-between',
        borderBottom:`1px solid ${cl.divider}`, position:'sticky', top:0, background:'rgba(250,250,250,0.85)',
        backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)', zIndex:10,
      }}>
        <Wordmark2 size={24}/>
        <div style={{ display:'flex', alignItems:'center', gap:24 }}>
          {['소개','어떻게 써요','자주 묻는 질문'].map(t => (
            <span key={t} style={{ fontSize:13, color:cl.textSecondary, fontWeight:fwl.medium, cursor:'pointer' }}>{t}</span>
          ))}
          <button style={{
            height:34, padding:'0 14px', borderRadius:rsl.md, border:'none',
            background:cl.textPrimary, color:'#FFFFFF',
            fontSize:13, fontWeight:fwl.semibold, fontFamily:TL.fonts.primary, cursor:'pointer',
          }}>앱 받기</button>
        </div>
      </nav>

      {/* ───── HERO ───── */}
      <section style={{ padding:'72px 32px 56px', display:'grid', gridTemplateColumns:'1fr 280px', gap:32, alignItems:'center' }}>
        <div>
          <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.18em', marginBottom:16 }}>DAIL · 베타</div>
          <h1 style={{ fontSize:54, fontWeight:fwl.bold, letterSpacing:'-0.03em', lineHeight:1.05, margin:0 }}>
            오늘 거기,<br/>
            <span style={{ color:cl.accent }}>3초</span>만 남겨봐.
          </h1>
          <p style={{ fontSize:17, color:cl.textSecondary, lineHeight:1.55, margin:'22px 0 0', maxWidth:420 }}>
            친한 1–5명에게만 보이는 작은 영상 지도.<br/>
            좋아요도, 팔로워도, 알고리즘도 없이 <strong style={{ color:cl.textPrimary, fontWeight:fwl.semibold }}>거기 있었던 3초</strong>만.
          </p>
          <div style={{ display:'flex', gap:10, marginTop:28, flexWrap:'wrap' }}>
            <a href="mailto:hodupgm@gmail.com?subject=dail%20%EB%B2%A0%ED%83%80%20%EC%B4%88%EB%8C%80%20%EC%8B%A0%EC%B2%AD" style={{
              height:48, padding:'0 22px', borderRadius:rsl.md, border:'none',
              background:cl.textPrimary, color:'#FFFFFF',
              fontSize:14, fontWeight:fwl.bold, fontFamily:TL.fonts.primary, cursor:'pointer',
              display:'inline-flex', alignItems:'center', gap:8, textDecoration:'none',
            }}>
              베타 초대 신청
              <span style={{ fontSize:14, opacity:0.6 }}>→</span>
            </a>
            <button style={{
              height:48, padding:'0 22px', borderRadius:rsl.md, border:`1px solid ${cl.border}`,
              background:cl.card, color:cl.textPrimary,
              fontSize:14, fontWeight:fwl.bold, fontFamily:TL.fonts.primary, cursor:'pointer',
            }}>출시 알림 받기</button>
          </div>

          <div style={{ marginTop:36, display:'flex', alignItems:'center', gap:14 }}>
            <div style={{
              width:32, height:32, borderRadius:16,
              background:cl.bg, border:`1px solid ${cl.border}`,
              display:'flex', alignItems:'center', justifyContent:'center',
              flexShrink:0,
            }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M3 7v6a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V7" stroke={cl.textSecondary} strokeWidth="1.4" fill="none"/>
                <path d="M5 7V5a3 3 0 0 1 6 0v2" stroke={cl.textSecondary} strokeWidth="1.4" fill="none"/>
              </svg>
            </div>
            <div style={{ fontSize:13, color:cl.textSecondary, lineHeight:1.55 }}>
              <strong style={{ color:cl.textPrimary, fontWeight:fwl.semibold }}>초대 받은 분만</strong> 사용할 수 있어요. 비공개 베타.
            </div>
          </div>
        </div>

        <div style={{ display:'flex', justifyContent:'flex-end' }}>
          <MiniPhone w={240} h={520}>
            {MapScreen ? <MapScreen initialStyle="apple"/> : null}
          </MiniPhone>
        </div>
      </section>

      {/* ───── 3 SMALL VALUE PROPS ───── */}
      <section style={{ padding:'24px 32px 56px', display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:18, borderTop:`1px solid ${cl.divider}` }}>
        {[
          { tag:'01', title:'3초',      sub:'길게 찍을 필요 없어요. 거기 있었다는 신호 한 컷.' },
          { tag:'02', title:'1–5명',    sub:'그룹 단위로만 보여요. 인스타처럼 넓게 안 퍼져요.' },
          { tag:'03', title:'지도 핀',  sub:'시간 순 피드 대신 진짜 위치. 다음에 갈 데 보여요.' },
        ].map(b => (
          <div key={b.tag} style={{ background:cl.card, border:`1px solid ${cl.divider}`, borderRadius:rsl.lg, padding:'22px 22px 24px' }}>
            <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.08em' }}>{b.tag}</div>
            <div style={{ fontSize:32, fontWeight:fwl.bold, letterSpacing:'-0.02em', marginTop:8, color:cl.textPrimary }}>{b.title}</div>
            <div style={{ fontSize:13, color:cl.textSecondary, marginTop:10, lineHeight:1.55 }}>{b.sub}</div>
          </div>
        ))}
      </section>

      {/* ───── HOW IT WORKS ───── */}
      <section style={{ padding:'72px 32px 56px', borderTop:`1px solid ${cl.divider}` }}>
        <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.18em', marginBottom:14 }}>어떻게 써요</div>
        <h2 style={{ fontSize:36, fontWeight:fwl.bold, letterSpacing:'-0.02em', margin:0, lineHeight:1.15 }}>
          가서, 찍고, 그룹에 흘리고.<br/>
          <span style={{ color:cl.textTertiary }}>끝.</span>
        </h2>

        <div style={{ marginTop:48, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:24 }}>
          {[
            { n:1, t:'그 자리에서 3초',   d:'카메라를 열면 지금 있는 위치가 핀으로 잡혀요. 가로 영상 3초, 자동 컷.', frame: PreviewScreen ? <PreviewScreen/> : null },
            { n:2, t:'그룹에만 흘리기',   d:'영상마다 어떤 그룹에 보일지 골라요. 가족, 베프, 회사 — 서로 안 섞여요.', frame: ChatRoom ? <ChatRoom groupKey="seongsu"/> : null },
            { n:3, t:'지도 위에 쌓여요', d:'친구들이 흘린 영상이 실제 위치에 모여요. 다음 약속 정할 때 그 지도에서 골라요.', frame: MapScreen ? <MapScreen initialStyle="apple"/> : null },
          ].map(s => (
            <div key={s.n} style={{ display:'flex', flexDirection:'column', gap:18 }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'center' }}>
                <MiniPhone w={200} h={433}>{s.frame}</MiniPhone>
              </div>
              <div>
                <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
                  <span style={{ fontSize:14, fontWeight:fwl.bold, color:cl.accent, fontVariantNumeric:'tabular-nums' }}>0{s.n}</span>
                  <h3 style={{ fontSize:18, fontWeight:fwl.semibold, letterSpacing:'-0.01em', margin:0, color:cl.textPrimary }}>{s.t}</h3>
                </div>
                <p style={{ fontSize:13, color:cl.textSecondary, lineHeight:1.55, margin:'8px 0 0' }}>{s.d}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ───── 대비 — 인스타가 아닌 이유 ───── */}
      <section style={{ padding:'72px 32px 56px', borderTop:`1px solid ${cl.divider}`, background:cl.card }}>
        <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.18em', marginBottom:14 }}>왜 또 다른 SNS가 아니라구요?</div>
        <h2 style={{ fontSize:36, fontWeight:fwl.bold, letterSpacing:'-0.02em', margin:0, maxWidth:560, lineHeight:1.2 }}>
          dail은 <span style={{ color:cl.error }}>SNS 아님</span>. <br/>그냥 친구들 지도예요.
        </h2>

        <div style={{ marginTop:32, display:'grid', gridTemplateColumns:'1fr 1fr', gap:18, maxWidth:760 }}>
          {[
            { ban:'좋아요 · 팔로워 수',     why:'리액션 3가지만. 숫자 경쟁 없음.' },
            { ban:'추천 알고리즘 피드',     why:'시간순도, 알고리즘도 X. 지도 핀이 곧 피드.' },
            { ban:'세로 9:16 영상',         why:'가로 3초만. 유튜브쇼츠 톤 회피.' },
            { ban:'공개 / 팔로우 모델',     why:'그룹 단위 사적 공유. 모르는 사람한텐 안 보여요.' },
          ].map((it, i) => (
            <div key={i} style={{ display:'flex', alignItems:'flex-start', gap:14, padding:'16px 18px', background:cl.bg, border:`1px solid ${cl.divider}`, borderRadius:rsl.md }}>
              <span style={{ fontSize:15, fontWeight:fwl.bold, color:cl.error, lineHeight:1.4, marginTop:1 }}>✕</span>
              <div>
                <div style={{ fontSize:14, fontWeight:fwl.semibold, color:cl.textPrimary }}>{it.ban}</div>
                <div style={{ fontSize:12, color:cl.textSecondary, marginTop:4 }}>{it.why}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ───── PRIVACY NOTE ───── */}
      <section style={{ padding:'72px 32px 56px', borderTop:`1px solid ${cl.divider}` }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48, alignItems:'center' }}>
          <div>
            <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.18em', marginBottom:14 }}>프라이버시</div>
            <h2 style={{ fontSize:32, fontWeight:fwl.bold, letterSpacing:'-0.02em', margin:0, lineHeight:1.2 }}>
              연락처는 매칭에만. <br/>위치는 영상 찍는 그 순간만.
            </h2>
            <ul style={{ marginTop:22, padding:0, listStyle:'none', display:'flex', flexDirection:'column', gap:10 }}>
              {[
                '연락처 번호는 해시해서 매칭 후 폐기',
                '백그라운드 위치 추적 없음',
                '영상은 그룹 멤버에게만 전송 (공개 URL X)',
                '계정 삭제 시 모든 영상 즉시 폭파',
              ].map(t => (
                <li key={t} style={{ display:'flex', alignItems:'flex-start', gap:10 }}>
                  <svg width="14" height="14" viewBox="0 0 14 14" style={{ marginTop:4, flexShrink:0 }}>
                    <circle cx="7" cy="7" r="6" stroke={cl.success} strokeWidth="1.4" fill="none"/>
                    <path d="M4 7l2 2 4-4" stroke={cl.success} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span style={{ fontSize:14, color:cl.textPrimary, lineHeight:1.5 }}>{t}</span>
                </li>
              ))}
            </ul>
          </div>
          <div style={{
            background:cl.card, border:`1px solid ${cl.divider}`, borderRadius:rsl.lg,
            padding:'28px 28px',
          }}>
            <div style={{ fontSize:11, fontWeight:fwl.medium, color:cl.textTertiary, letterSpacing:'0.08em', marginBottom:10 }}>FAQ</div>
            {[
              { q:'영상 길이는 정말 3초만 되나요?',       a:'네. 늘릴 계획 없어요. 길어지면 결국 다른 영상 앱이랑 똑같아져요.' },
              { q:'그룹에 한 명만 있어도 쓸 수 있어요?', a:'됩니다. 둘이서 쓰는 그룹, 혼자만 보는 기록용 그룹도 만들 수 있어요.' },
              { q:'위치는 항상 추적되나요?',             a:'아니요. 영상을 찍는 순간에만 좌표를 한 번 받고, 백그라운드에선 위치를 읽지 않아요.' },
              { q:'안드로이드는 언제 나와요?',           a:'iOS부터 비공개 베타로 진행 중이고, 안드로이드는 그 다음입니다. 정확한 일정은 아직이에요.' },
              { q:'초대는 어떻게 받나요?',               a:'지금은 베타 테스터를 통해서만 초대장이 돌아요. 대기 신청은 hodupgm@gmail.com으로 메일 주세요.' },
            ].map((f, i, arr) => (
              <div key={i} style={{
                padding:'14px 0',
                borderBottom: i === arr.length-1 ? 'none' : `1px solid ${cl.divider}`,
              }}>
                <div style={{ fontSize:14, fontWeight:fwl.semibold, color:cl.textPrimary, letterSpacing:'-0.005em' }}>{f.q}</div>
                <div style={{ fontSize:13, color:cl.textSecondary, marginTop:5, lineHeight:1.55 }}>{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ───── FOOTER CTA ───── */}
      <section style={{ padding:'80px 32px 64px', borderTop:`1px solid ${cl.divider}`, background:cl.textPrimary, color:'#FFFFFF' }}>
        <div style={{ maxWidth:560 }}>
          <h2 style={{ fontSize:42, fontWeight:fwl.bold, letterSpacing:'-0.03em', margin:0, lineHeight:1.1 }}>
            오늘 어디 갔어요? <br/>거기, 3초 남기면 돼요.
          </h2>
          <p style={{ fontSize:14, color:'rgba(255,255,255,0.6)', margin:'18px 0 0', lineHeight:1.6, maxWidth:440 }}>
            지금은 비공개 베타 기간이에요. 초대 메일은 <span style={{ color:'#FFFFFF' }}>hodupgm@gmail.com</span>으로 받고 있어요.
          </p>
          <div style={{ display:'flex', gap:10, marginTop:24, flexWrap:'wrap' }}>
            <a href="mailto:hodupgm@gmail.com?subject=dail%20%EB%B2%A0%ED%83%80%20%EC%B4%88%EB%8C%80%20%EC%8B%A0%EC%B2%AD" style={{
              height:48, padding:'0 22px', borderRadius:rsl.md, border:'none',
              background:'#FFFFFF', color:cl.textPrimary,
              fontSize:14, fontWeight:fwl.bold, fontFamily:TL.fonts.primary, cursor:'pointer',
              display:'inline-flex', alignItems:'center', textDecoration:'none',
            }}>베타 초대 신청</a>
            <button style={{
              height:48, padding:'0 22px', borderRadius:rsl.md, border:`1px solid rgba(255,255,255,0.3)`,
              background:'transparent', color:'#FFFFFF',
              fontSize:14, fontWeight:fwl.bold, fontFamily:TL.fonts.primary, cursor:'pointer',
            }}>출시 알림 받기</button>
          </div>
        </div>
      </section>

      {/* ───── FOOTER · 사업자 정보 ───── */}
      <footer style={{ padding:'40px 32px 48px', background:cl.textPrimary, color:'rgba(255,255,255,0.6)', borderTop:`1px solid rgba(255,255,255,0.08)` }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start', gap:32, flexWrap:'wrap' }}>
          <div style={{ minWidth:240 }}>
            <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
              <span style={{ fontSize:20, fontWeight:fwl.bold, color:'#FFFFFF', letterSpacing:'-0.04em' }}>dail<span style={{ color:cl.accent }}>.</span></span>
            </div>
            <div style={{ fontSize:11, lineHeight:1.7 }}>
              친한 사람들끼리 보는<br/>
              짧은 영상 지도.
            </div>
          </div>

          {/* 사업자 정보 */}
          <div style={{ flex:1, minWidth:360, maxWidth:560 }}>
            <div style={{ fontSize:10, fontWeight:fwl.semibold, color:'rgba(255,255,255,0.45)', letterSpacing:'0.12em', marginBottom:12 }}>사업자 정보</div>
            <div style={{
              display:'grid',
              gridTemplateColumns:'auto 1fr',
              columnGap:18, rowGap:6,
              fontSize:11, lineHeight:1.6,
            }}>
              {[
                ['상호',         '호두'],
                ['대표자',       '박규웅'],
                ['사업자등록번호', '147-46-01155'],
                ['업종',         '소프트웨어 개발 및 공급업 / 통신판매'],
                ['주소',         '경상북도 경산시 진량읍 봉황길 31, 103동 406호'],
                ['이메일',       'hodupgm@gmail.com'],
                ['고객센터',     '010-6464-6059'],
                ['개인정보책임자', '박규웅 (hodupgm@gmail.com)'],
              ].map(([k, v]) => (
                <React.Fragment key={k}>
                  <div style={{ color:'rgba(255,255,255,0.45)', fontWeight:fwl.medium, whiteSpace:'nowrap' }}>{k}</div>
                  <div style={{ color:'rgba(255,255,255,0.85)', fontVariantNumeric:'tabular-nums' }}>{v}</div>
                </React.Fragment>
              ))}
            </div>
          </div>

          <div style={{ minWidth:140 }}>
            <div style={{ fontSize:10, fontWeight:fwl.semibold, color:'rgba(255,255,255,0.45)', letterSpacing:'0.12em', marginBottom:12 }}>약관 · 정책</div>
            <div style={{ display:'flex', flexDirection:'column', gap:8, fontSize:12 }}>
              {['이용약관','개인정보 처리방침','위치기반서비스 이용약관','청소년 보호정책','문의하기'].map(t => (
                <span key={t} style={{ color:'rgba(255,255,255,0.85)', cursor:'pointer' }}>{t}</span>
              ))}
            </div>
          </div>
        </div>

        <div style={{
          marginTop:32, paddingTop:20, borderTop:`1px solid rgba(255,255,255,0.08)`,
          display:'flex', justifyContent:'space-between', alignItems:'center', gap:18, flexWrap:'wrap',
          fontSize:10.5, color:'rgba(255,255,255,0.4)',
        }}>
          <span>© 2026 dail Inc. All rights reserved.</span>
          <span>v0.9.0 · 비공개 베타</span>
        </div>
      </footer>
    </div>
  );
};