/* SeoulCart mobile landing — content lives inside the IOSDevice frame */
const { useState, useEffect, useRef } = React;

function useInView(threshold = 0.25) {
  const ref = useRef(null);
  const [seen, setSeen] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setSeen(true); obs.disconnect(); }
    }, { threshold });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return [ref, seen];
}

function useCountdown(targetHour = 22) {
  const [t, setT] = useState(() => compute());
  function compute() {
    const now = new Date();
    const target = new Date(now);
    target.setHours(targetHour, 0, 0, 0);
    if (target <= now) target.setDate(target.getDate() + 1);
    const diff = Math.max(0, target - now);
    return { h: Math.floor(diff/3600000), m: Math.floor(diff%3600000/60000), s: Math.floor(diff%60000/1000) };
  }
  useEffect(() => { const id = setInterval(() => setT(compute()), 1000); return () => clearInterval(id); }, []);
  const p = n => String(n).padStart(2,'0');
  return `${p(t.h)}:${p(t.m)}:${p(t.s)}`;
}

/* hand-drawn circle accent */
function HandCircle() {
  return (
    <svg className="sc-hand-circle" viewBox="0 0 100 60" aria-hidden="true">
      <path d="M52,4 C70,3 92,12 95,28 C97,46 78,56 50,57 C20,58 4,46 5,29 C6,15 24,5 50,4" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" />
    </svg>
  );
}

/* ──────── Header ──────── */
function SCHeader() {
  return (
    <div className="sc-header">
      <div className="sc-logo">
        <img
          src="/logos/brand/trimmed/seoulcart-combined-light-transparent.png"
          alt="SEOULCART"
          className="sc-logo-img"
        />
      </div>
    </div>
  );
}

/* ──────── Hero ──────── */
function SCHero() {
  return (
    <section className="sc-hero">
      <div className="sc-hero-grid"/>
      <div className="sc-hero-glow"/>
      <div className="sc-hero-content">
        <h1 className="sc-h1">
          산지의 오늘,<br/>
          내 가게의<br/>
          <span className="sc-h1-hl">
            내일 아침.
          </span>
        </h1>
        <div className="sc-tag-pills">
          <span className="sc-tag"><b>당일</b>최적가</span>
          <span className="sc-tag"><b>실시간</b>시세 반영</span>
          <span className="sc-tag"><b>수도권</b>익일 배송</span>
        </div>
        <div className="sc-cta-stack">
          <button className="sc-btn sc-btn-primary" onClick={() => { window.location.href = '/signup'; }}>
            지금 주문하기 <span className="sc-arrow">→</span>
          </button>
          <button className="sc-btn sc-btn-secondary" onClick={() => { window.location.href = '/chat'; }}>
            <div className="sc-btn-text">
              <span>카토 AI로 자동견적 받기</span>
              <span className="sc-btn-sub">Powered by Kato</span>
            </div>
            <span className="sc-arrow">→</span>
          </button>
        </div>
        <div className="sc-kato-intro">
          <span className="sc-kato-eyebrow">KATO · 신선발주 AI</span>
          <h3 className="sc-kato-title">
            <span className="sc-kato-quote">"방토 2박스"</span> 한 마디로<br/>
            발주 끝.
          </h3>
          <p className="sc-kato-desc">
            카토가 발주 패턴을 기억하고, 시세 변동·대체 상품 추천까지 — 24시간 발주를 도와줍니다.
          </p>
        </div>
      </div>
      <ChatDemo/>
    </section>
  );
}

/* ──────── AI Chat Demo ──────── */
const chatScenarios = [
  {
    label: '자연어 주문',
    script: [
      { from: 'user', text: '딸기 2박스, 바나나 1박스' },
      { from: 'bot',  text: '네 사장님, 확인해드릴게요 🍓', delay: 1000 },
      { from: 'bot',  delay: 1100, quote: {
        title: '📋 견적서',
        rows: [
          { name: '설향 딸기', meta: '(500g×8팩) · 2박스', amt: '44,000' },
          { name: '바나나',    meta: '(13kg) · 1박스',    amt: '18,000' },
        ],
        total: '62,000', totalLabel: '합계 (부가세 면세)',
      }},
      { from: 'bot',  text: '장바구니에 담을까요?', delay: 700 },
    ],
  },
  {
    label: '정기 발주',
    script: [
      { from: 'user', text: '저번주랑 똑같이 보내줘' },
      { from: 'bot',  text: '지난주 주문 그대로 준비할게요 🥬', delay: 1000 },
      { from: 'bot',  delay: 1100, quote: {
        title: '🔁 정기 발주',
        rows: [
          { name: '양상추 (상)',   meta: '5kg',  amt: '32,500' },
          { name: '완숙 토마토',   meta: '8kg',  amt: '43,200' },
          { name: '양파',         meta: '10kg', amt: '19,000' },
        ],
        total: '94,700', totalLabel: '지난주와 동일',
      }},
      { from: 'bot',  text: '바뀐 거 있으면 알려주세요!', delay: 700 },
    ],
  },
  {
    label: '시세 알림 · 대체 추천',
    script: [
      { from: 'bot',  alert: '🔔 청상추 시세가 오늘 +18% 올랐어요.', delay: 1200 },
      { from: 'bot',  text: '같은 등급 적상추는 동일 시세입니다. 대체할까요?', delay: 1100 },
      { from: 'user', text: '응 적상추 3kg' },
      { from: 'bot',  text: '바로 잡아드릴게요 ✓', delay: 900 },
      { from: 'bot',  delay: 1000, quote: {
        title: '✓ 변경된 견적',
        rows: [
          { name: '적상추 (상)', meta: '3kg', amt: '18,900' },
        ],
        total: '18,900', totalLabel: '오늘 시세 적용',
      }},
    ],
  },
];

function ChatDemo() {
  const [scenIdx, setScenIdx] = useState(0);
  const [step, setStep] = useState(0);
  const [typing, setTyping] = useState(false);
  const bodyRef = useRef(null);

  const script = chatScenarios[scenIdx].script;

  useEffect(() => {
    if (step >= script.length) {
      const reset = setTimeout(() => {
        setScenIdx(s => (s + 1) % chatScenarios.length);
        setStep(0);
      }, 3500);
      return () => clearTimeout(reset);
    }
    const next = script[step];
    const delay = next.delay || 600;
    if (next.from === 'bot' || next.alert || next.quote) {
      setTyping(true);
      const t1 = setTimeout(() => {
        setTyping(false);
        setStep(s => s + 1);
      }, delay);
      return () => clearTimeout(t1);
    } else {
      const t = setTimeout(() => setStep(s => s + 1), delay);
      return () => clearTimeout(t);
    }
  }, [step, scenIdx]);

  useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; });

  const visible = script.slice(0, step);

  return (
    <div className="sc-chat">
      <div className="sc-chat-head">
        <div className="sc-chat-av">K</div>
        <div>
          <div className="sc-chat-name">카토 · Kato</div>
          <div className="sc-chat-status"><span className="sc-online-dot"/>온라인</div>
        </div>
        <div className="sc-chat-engine">{chatScenarios[scenIdx].label}</div>
      </div>
      <div className="sc-scen-dots">
        {chatScenarios.map((_, i) => (
          <span key={i} className={`sc-scen-dot ${i===scenIdx?'on':''}`}/>
        ))}
      </div>
      <div className="sc-chat-body" ref={bodyRef}>
        {visible.map((m, i) => {
          if (m.quote) return (
            <div className="sc-bubble sc-bubble-bot sc-quote" key={i}>
              <div className="sc-quote-head">{m.quote.title}</div>
              {m.quote.rows.map((r, j) => (
                <div className="sc-quote-row" key={j}><span>{r.name} <em>{r.meta}</em></span><span>{r.amt}</span></div>
              ))}
              <div className="sc-quote-tot"><span>{m.quote.totalLabel}</span><span className="sc-quote-big">{m.quote.total}<small>원</small></span></div>
            </div>
          );
          if (m.alert) return (
            <div className="sc-bubble sc-bubble-bot sc-alert" key={i}>{m.alert}</div>
          );
          return <div key={i} className={`sc-bubble ${m.from === 'user' ? 'sc-bubble-user' : 'sc-bubble-bot'}`}>{m.text}</div>;
        })}
        {typing && (
          <div className="sc-bubble sc-bubble-bot sc-typing-bubble">
            <span className="sc-dot"/><span className="sc-dot"/><span className="sc-dot"/>
          </div>
        )}
      </div>
    </div>
  );
}

/* ──────── Sourcing Network: TRIBUTARY DIAGRAM ──────── */
/* 6 streams that converge into one hub, then one clean output line.
   Hand-tuned positions, flowing dashed paths animate continuously. */

const sources = [
  { name: '품목별 유통업체',   tag: 'CAT',  color: '#E07A5F', x: 76,  y: 60 },
  { name: '신선 식자재 업체', tag: 'FRSH', color: '#5BAA75', x: 180, y: 36 },
  { name: '공판장',      tag: 'AUC',  color: '#5481C7', x: 286, y: 60 },
  { name: '산지 농민',   tag: 'FARM', color: '#F5A623', x: 80,  y: 178 },
  { name: '지역 농협',   tag: 'COOP', color: '#8E6BD0', x: 196, y: 162 },
  { name: '수입업체',    tag: 'IMP',  color: '#2DA4A8', x: 290, y: 178 },
];
const HUB = { x: 180, y: 320 };

function SCSourcing() {
  const [ref, seen] = useInView(0.2);
  return (
    <section className="sc-section sc-light" ref={ref}>
      <SectionMarker n="02" total="08"/>
      <span className="sc-eyebrow">OUR SOURCING NETWORK</span>
      <h2 className="sc-h2">
        다양한 공급 네트워크,<br/>
        <span className="sc-hl-pill"><span>최적의 가격으로</span></span>.
      </h2>
      <p className="sc-body">
        서울카트는 신선식품 전문 유통업체와 산지 네트워크를 통해 매일 최적의 상품과 가격으로 소싱합니다.
      </p>

      <div className={`sc-trib ${seen ? 'in' : ''}`}>
        <svg className="sc-trib-svg" viewBox="0 0 360 460">
          {/* subtle backdrop grid */}
          <defs>
            <pattern id="trib-dots" width="14" height="14" patternUnits="userSpaceOnUse">
              <circle cx="1" cy="1" r="1" fill="#e6e8f0"/>
            </pattern>
          </defs>
          <rect width="360" height="460" fill="url(#trib-dots)" opacity="0.6"/>

          {/* tributary paths from each source to hub */}
          {sources.map((s, i) => {
            const mx = (s.x + HUB.x) / 2;
            const my = s.y + (HUB.y - s.y) * 0.65;
            const d = `M ${s.x} ${s.y} C ${s.x} ${my}, ${mx} ${my}, ${HUB.x} ${HUB.y - 20}`;
            return (
              <g key={i}>
                <path d={d} fill="none" stroke={s.color} strokeOpacity="0.18" strokeWidth="3" strokeLinecap="round"/>
                <path className="sc-trib-flow" d={d} fill="none" stroke={s.color} strokeWidth="2" strokeLinecap="round" strokeDasharray="2 8" style={{ animationDelay: `${i * 0.18}s` }}/>
              </g>
            );
          })}

          {/* output line from hub down to store */}
          <path d={`M ${HUB.x} ${HUB.y + 24} L ${HUB.x} 420`} stroke="#131936" strokeWidth="2.5" strokeDasharray="0"/>
          <path className="sc-trib-flow sc-trib-flow-out" d={`M ${HUB.x} ${HUB.y + 24} L ${HUB.x} 420`} stroke="#FFB547" strokeWidth="3" strokeLinecap="round" strokeDasharray="3 9"/>
          <polygon points={`${HUB.x},430 ${HUB.x - 7},418 ${HUB.x + 7},418`} fill="#131936"/>

          {/* HUB box drawn in SVG */}
          <g>
            <rect x={HUB.x - 70} y={HUB.y - 20} width="140" height="40" rx="20" fill="#131936"/>
            <rect x={HUB.x - 70} y={HUB.y - 20} width="140" height="40" rx="20" fill="none" stroke="#2E5BA8" strokeDasharray="3 4" strokeWidth="1.5" className="sc-trib-hub-ring"/>
            <text x={HUB.x} y={HUB.y - 2} textAnchor="middle" fill="#fff" fontFamily="'Bebas Neue', sans-serif" fontSize="14" letterSpacing="0.1em">SEOULCART</text>
            <text x={HUB.x} y={HUB.y + 12} textAnchor="middle" fill="#FFB547" fontFamily="'JetBrains Mono', monospace" fontSize="9" letterSpacing="0.12em">GARAK · MFC</text>
          </g>
        </svg>

        {/* source chips positioned absolutely on top of SVG */}
        {sources.map((s, i) => (
          <div className="sc-trib-chip" key={i} style={{
            left: `${(s.x / 360) * 100}%`,
            top:  `${(s.y / 460) * 100}%`,
            transform: 'translate(-50%, -50%)',
            borderColor: s.color,
            animationDelay: `${i * 0.08}s`,
          }}>
            <span className="sc-trib-tag" style={{ background: s.color }}>{s.tag}</span>
            <span className="sc-trib-name">{s.name}</span>
          </div>
        ))}

        {/* output chip */}
        <div className="sc-trib-out" style={{ left: '50%', top: `${(434 / 460) * 100}%` }}>
          내 가게
        </div>
      </div>

      <div className="sc-callout">
        <em className="sc-callout-em">사장님은 한 곳에서 주문,</em><br/>
        <b>서울카트는 전국에서 소싱.</b>
      </div>
    </section>
  );
}

function SectionMarker() {
  // 섹션 번호 마커 (02 / 08 같은 거) 비활성화 — 카피만 보여주기
  return null;
}

/* ──────── Why SeoulCart: MARGIN STACK BARS ──────── */
const OLD_STACK = [
  { stage: '산지가',    amt: 4500, color: '#5b6a93' },
  { stage: '+ 경매',    amt: 800,  color: '#7e6d9e' },
  { stage: '+ 중도매',  amt: 1100, color: '#a06f96' },
  { stage: '+ 도매',    amt: 700,  color: '#c46d8a' },
];
const NEW_STACK = [
  { stage: '산지가',     amt: 4500, color: '#5481C7' },
  { stage: '+ 서울카트',  amt: 500,  color: '#2E5BA8' },
];

function SCWhy() {
  const [ref, seen] = useInView(0.25);
  const oldTotal = OLD_STACK.reduce((s, x) => s + x.amt, 0);
  const newTotal = NEW_STACK.reduce((s, x) => s + x.amt, 0);
  // 320px chart height baseline; segment height = (amt / oldTotal) * 320
  const BAR_H = 320;
  const scale = (amt) => (amt / oldTotal) * BAR_H;

  return (
    <section className="sc-section sc-dark" ref={ref}>
      <SectionMarker n="03" total="08"/>
      <span className="sc-eyebrow sc-eyebrow-light">WHY SEOULCART</span>
      <h2 className="sc-h2 sc-h2-light">
        유통 단계가 쌓이면<br/>
        <span className="sc-strike-wrap">가격도 쌓입니다<span className="sc-strike"/></span>.
      </h2>
      <p className="sc-body sc-body-light">청상추 1kg, 가락시장 평균가를 단계별로 분해해 봤습니다.</p>

      <div className={`sc-stack ${seen ? 'in' : ''}`}>
        {/* OLD column */}
        <div className="sc-stack-col">
          <div className="sc-stack-cap sc-stack-cap-bad">기존 식자재 유통</div>
          <div className="sc-stack-bar" style={{ height: BAR_H }}>
            {OLD_STACK.slice().reverse().map((s, i) => {
              const realI = OLD_STACK.length - 1 - i;
              return (
                <div className="sc-stack-seg" key={i} style={{
                  '--h': `${Math.max(34, scale(s.amt))}px`,
                  background: s.color,
                  transitionDelay: `${realI * 0.18}s`,
                }}>
                  <span className="sc-seg-stage">{s.stage}</span>
                  <span className="sc-seg-amt">₩{s.amt.toLocaleString()}</span>
                </div>
              );
            })}
          </div>
          <div className="sc-stack-foot">
            <span className="sc-foot-k">최종 단가</span>
            <span className="sc-foot-v sc-foot-bad">₩{oldTotal.toLocaleString()}</span>
          </div>
        </div>

        {/* NEW column */}
        <div className="sc-stack-col">
          <div className="sc-stack-cap sc-stack-cap-good">서울카트</div>
          <div className="sc-stack-bar" style={{ height: BAR_H }}>
            <div className="sc-empty-air">
              <span>제거된<br/>유통 마진</span>
            </div>
            {NEW_STACK.slice().reverse().map((s, i) => {
              const realI = NEW_STACK.length - 1 - i;
              return (
                <div className="sc-stack-seg sc-stack-seg-new" key={i} style={{
                  '--h': `${Math.max(36, scale(s.amt))}px`,
                  background: s.color,
                  transitionDelay: `${realI * 0.18 + 0.6}s`,
                }}>
                  <span className="sc-seg-stage">{s.stage}</span>
                  <span className="sc-seg-amt">₩{s.amt.toLocaleString()}</span>
                </div>
              );
            })}
          </div>
          <div className="sc-stack-foot">
            <span className="sc-foot-k">최종 단가</span>
            <span className="sc-foot-v sc-foot-good">₩{newTotal.toLocaleString()}</span>
          </div>
        </div>
      </div>

      <div className={`sc-savings ${seen ? 'in' : ''}`}>
        <HandCircle/>
        <div className="sc-savings-inner">
          <div className="sc-savings-amt">−₩{(oldTotal - newTotal).toLocaleString()}</div>
          <div className="sc-savings-pct">{Math.round((1 - newTotal/oldTotal)*100)}% 절감</div>
          <div className="sc-savings-sub">청상추 1kg 기준 · 매일 갱신</div>
        </div>
      </div>
    </section>
  );
}

/* ──────── Features ──────── */
function SCFeatures() {
  const feats = [
    { ico:'price', t:'당일 최적가',     d:'5개+ 공급 채널과 가락시장 도매 시세를 비교해서 가격을 산출합니다.', k:'11.3', u:'% 절감' },
    { ico:'truck', t:'최단거리 배송',   d:'가락MFC에서 바로 내 가게로.',                                k:'익일', u:'도착 보장' },
    { ico:'bot',   t:'카토 AI 발주',     d:'한 마디면 카토가 견적부터 발주까지 자동으로.',                k:'24/7', u:'AI 자동 발주' },
    { ico:'shield',t:'품질 보증',       d:'불량품 100% 환불 보장.',                                        k:'100',  u:'% 환불' },
  ];
  return (
    <section className="sc-section sc-light">
      <SectionMarker n="04" total="08"/>
      <span className="sc-eyebrow">FEATURES</span>
      <h2 className="sc-h2">
        서울카트만의<br/>
        <span className="sc-hl-pill"><span>차이</span></span>.
      </h2>
      <div className="sc-feat-grid">
        {feats.map(f => (
          <div className="sc-feat" key={f.t}>
            <div className="sc-feat-ico"><FeatIcon name={f.ico}/></div>
            <div className="sc-feat-t">{f.t}</div>
            <div className="sc-feat-d">{f.d}</div>
            <div className="sc-feat-metric"><span className="sc-feat-k">{f.k}</span><span className="sc-feat-u">{f.u}</span></div>
          </div>
        ))}
      </div>
    </section>
  );
}
function FeatIcon({ name }) {
  const s = { width:22, height:22, fill:'none', stroke:'#fff', strokeWidth:1.8, strokeLinecap:'round', strokeLinejoin:'round' };
  if (name==='price')  return <svg {...s}><rect x="3" y="6" width="18" height="12" rx="2"/><circle cx="12" cy="12" r="3"/></svg>;
  if (name==='truck')  return <svg {...s}><path d="M1 16V6h13v10M14 10h4l3 3v3h-7"/><circle cx="6" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>;
  if (name==='bot')    return <svg {...s}><rect x="4" y="7" width="16" height="12" rx="3"/><circle cx="9.5" cy="13" r="1.1" fill="#fff" stroke="none"/><circle cx="14.5" cy="13" r="1.1" fill="#fff" stroke="none"/><path d="M12 4v3M9 19v2M15 19v2"/></svg>;
  if (name==='shield') return <svg {...s}><path d="M12 3l8 3v6c0 5-3 8-8 9-5-1-8-4-8-9V6z"/><path d="M9 12l2 2 4-4"/></svg>;
}

/* ──────── Supply Partners ──────── */
function SCPartners() {
  const partners = ['삼성웰스토리','현대그린푸드','아워홈','스타벅스 코리아','SPC'];
  return (
    <section className="sc-section sc-paper">
      <SectionMarker n="05" total="08"/>
      <span className="sc-eyebrow">SUPPLY PARTNERS</span>
      <h2 className="sc-h2">
        검증된 상품을,<br/>
        <span className="sc-hl-pill"><span>가게 앞까지 그대로</span></span>.
      </h2>
      <p className="sc-body sc-partners-note">
        대형 급식·유통사와 <b>같은 산지·유통업체</b>. 중간 유통 없이 합리적인 가격으로.
      </p>
      <div className="sc-partners-list">
        {partners.map((p, i) => (
          <div className="sc-partner-row" key={p}>
            <span className="sc-partner-i">0{i+1}</span>
            <span className="sc-partner-n">{p}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ──────── Day Before/After ──────── */
function SCDay() {
  const before = [
    { e:'😫', text:'업체별 전화/카톡으로 발주' },
    { e:'😰', text:'배송 확인, 누락 체크' },
    { e:'😤', text:'가격 비교하느라 시간 낭비' },
    { e:'💸', text:'최소 발주 금액 맞추기' },
  ];
  const after = [
    { e:'😌', text:'"평소대로 보내줘" 한마디' },
    { e:'😴', text:'20년+ 신선식품 전문가 자동 소싱' },
    { e:'☕', text:'다양한 신선 채소 · 과일을 한번에' },
    { e:'🤖', text:'24시간 신선발주 도우미 KATO' },
    { e:'✅', text:'최소 주문 없이, 도매시장가로' },
  ];
  return (
    <section className="sc-section sc-light">
      <SectionMarker n="06" total="08"/>
      <span className="sc-eyebrow">A DAY IN YOUR LIFE</span>
      <h2 className="sc-h2">
        사장님의 하루가<br/>
        <span className="sc-hl-pill"><span>바뀝니다</span></span>.
      </h2>

      <div className="sc-day-block sc-day-before">
        <div className="sc-day-tag sc-day-tag-bad">BEFORE · 기존 발주</div>
        {before.map((b,i)=>(
          <div className="sc-day-row" key={i}>
            <span className="sc-day-e">{b.e}</span>
            <div className="sc-day-text">{b.text}</div>
          </div>
        ))}
      </div>

      <div className="sc-day-block sc-day-after">
        <div className="sc-day-tag sc-day-tag-good">AFTER · 서울카트</div>
        {after.map((b,i)=>(
          <div className="sc-day-row" key={i}>
            <span className="sc-day-e">{b.e}</span>
            <div className="sc-day-text">{b.text}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ──────── Target Customers ──────── */
function SCCustomers() {
  const cs = [
    { e:'☕', t:'카페/베이커리', sub:'스페셜티·디저트·브런치' },
    { e:'🍳', t:'레스토랑·식당', sub:'한식당·이탈리안·정식집' },
    { e:'🍱', t:'도시락·급식',   sub:'도시락업체·구내식당·케이터링' },
    { e:'🥗', t:'샐러드·건강식', sub:'샐러드바·주스바·비건카페' },
  ];
  return (
    <section className="sc-section sc-light">
      <SectionMarker n="07" total="08"/>
      <span className="sc-eyebrow">OUR CUSTOMERS</span>
      <h2 className="sc-h2">
        이런 가게에서<br/>
        쓰고 있어요.
      </h2>
      <p className="sc-body">수도권에서 매일 신선 식자재가 필요한 모든 F&B.</p>
      <div className="sc-cust-grid">
        {cs.map(c => (
          <div className="sc-cust" key={c.t}>
            <span className="sc-cust-e">{c.e}</span>
            <div className="sc-cust-t">{c.t}</div>
            <div className="sc-cust-sub">{c.sub}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ──────── Final CTA ──────── */
function SCFinalCTA() {
  return (
    <section className="sc-section sc-final">
      <div className="sc-final-grid"/>
      <div className="sc-final-glow"/>
      <SectionMarker n="08" total="08" light/>
      <h2 className="sc-h2 sc-final-h">
        가장 똑똑하게<br/>
        <span className="sc-h1-hl">신선한 식자재</span>.
      </h2>
      <p className="sc-final-sub">가입 후 첫 주문까지 5분이면 충분합니다.</p>
      <button className="sc-btn sc-btn-primary sc-btn-final" onClick={() => { window.location.href = '/signup'; }}>무료로 시작하기 <span className="sc-arrow">→</span></button>
    </section>
  );
}

/* ──────── Footer ──────── */
function SCFooter() {
  return (
    <footer className="sc-footer">
      <img
        src="/logos/brand/trimmed/seoulcart-wordmark-light-transparent.png"
        alt="SEOULCART"
        className="sc-foot-logo-img"
      />
      <div className="sc-foot-links">
        <a href="/terms/guide">이용안내</a><span>·</span>
        <a href="/terms/terms">이용약관</a><span>·</span>
        <a href="/terms/privacy">개인정보처리방침</a><span>·</span>
        <a href="/terms/marketing">마케팅 수신 동의</a>
      </div>
      <div className="sc-foot-engine">Powered by <b>Kato</b> — AI Commerce Engine</div>
      <div className="sc-foot-copy">© 2026 주식회사 아르카코리아</div>
    </footer>
  );
}

/* ──────── Top-level page ──────── */
function SCMobileLanding() {
  return (
    <div className="sc-app">
      <SCHeader/>
      <SCHero/>
      <SCSourcing/>
      <SCWhy/>
      <SCFeatures/>
      <SCPartners/>
      <SCDay/>
      <SCCustomers/>
      <SCFinalCTA/>
      <SCFooter/>
    </div>
  );
}

Object.assign(window, { SCMobileLanding });