// 이로담 세무회계 — refined components
const { useState, useEffect, useMemo } = React;

const EXTERNAL = { target: "_blank", rel: "noopener noreferrer" };

// Header
function Header({ onOpenMobile, mobileOpen }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"site-header" + (scrolled ? " scrolled" : "")}>
      <div className="container header-inner">
        <a href="#top" className="brand" aria-label="이로담 세무회계 홈">
          <img className="brand-logo" src="assets/irodam-logo-horizontal-color.png" alt="이로담 세무회계 로고" />
        </a>
        <nav className="nav-desktop" aria-label="주요 메뉴">
          {NAV.map(n => <a key={n.id} href={`#${n.id}`}>{n.label}</a>)}
        </nav>
        <div className="header-cta">
          <a href={`tel:${SITE.tel}`} className="header-tel" aria-label={`전화 ${SITE.tel}`}>
            <Icon name="phone" size={14}/>{SITE.tel}
          </a>
          <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-primary" aria-label="카카오톡으로 5분 체크 요청하기">5분 체크 시작</a>
          <button className={"menu-toggle" + (mobileOpen ? " open" : "")} onClick={onOpenMobile} aria-label="메뉴" aria-expanded={mobileOpen}>
            <span/>
          </button>
        </div>
      </div>
    </header>
  );
}

function MobileNav({ open, onClose }) {
  return (
    <div className={"mobile-nav" + (open ? " open" : "")}>
      {NAV.map(n => (
        <a key={n.id} href={`#${n.id}`} onClick={onClose}>
          {n.label}<Icon name="arrow-right" size={16}/>
        </a>
      ))}
      <div className="mobile-cta">
        <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-primary" aria-label="카카오톡으로 5분 체크 요청하기"><Icon name="kakao" size={14}/>카카오톡으로 5분 체크 요청하기</a>
        <a href={`tel:${SITE.tel}`} className="btn btn-outline" aria-label={`전화 ${SITE.tel}`}><Icon name="phone" size={15}/>전화 {SITE.tel}</a>
      </div>
    </div>
  );
}

// Hero
function Hero() {
  return (
    <section id="top" className="hero">
      <div className="container hero-grid">
        <div>
          <span className="hero-eyebrow fade-up pre-anim in"><span className="dot"/>성동구 왕십리 · 세무 리스크 체크</span>
          <h1 className="fade-up pre-anim d1 in">
            놓친 자료 하나가<br/>
            <span className="em">예상보다 큰 세금 차이</span>를<br/>
            만들 수 있습니다.
          </h1>
          <p className="hero-emph fade-up pre-anim d2 in">
            5분 체크로 먼저 확인하세요.
          </p>
          <p className="hero-sub fade-up pre-anim d2 in">
            기장, 신고대리, 양도세, 증여세, 상속세, 경정청구까지<br/>
            현재 상황을 간단히 확인하고 필요한 자료와 다음 절차를 안내드립니다.
          </p>
          <p className="hero-note fade-up pre-anim d3 in">
            자료가 완벽하지 않아도 괜찮습니다.<br/>
            지금 상황을 먼저 확인하는 것만으로도 다음 선택이 쉬워집니다.
          </p>
          <div className="hero-cta fade-up pre-anim d3 in">
            <a href={FIVE_MIN_URL} {...EXTERNAL} className="btn btn-primary btn-lg" aria-label="카카오톡으로 5분 체크 요청하기"><Icon name="kakao" size={14}/>카카오톡으로 5분 체크 요청하기 <Icon name="arrow-right" size={14}/></a>
            <a href={`tel:${SITE.tel}`} className="btn btn-outline btn-lg" aria-label={`바로 전화 문의 ${SITE.tel}`}><Icon name="phone" size={14}/>바로 전화 문의</a>
          </div>
          <div className="hero-meta fade-up pre-anim d3 in">
            <span className="hero-meta-item">{SITE.representativeTitle} · {SITE.representative}</span>
            <span className="hero-meta-divider"/>
            <span className="hero-meta-item">{SITE.hours}</span>
          </div>
        </div>
        <div className="hero-photo-card fade-up pre-anim d2 in">
          <div className="hero-photo-frame">
            <img src="assets/profile_photo-web.jpg" alt="이로담 세무회계 임선아 대표 세무사"/>
          </div>
          <div className="meta">
            <div>
              <div className="name">{SITE.representative}</div>
              <div className="role">{SITE.representativeTitle}</div>
            </div>
            <div className="seal">— 이롭게, 진심을 담아.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  return (
    <section id="problem" className="section section-tight bg-paper">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow center">WHY EARLY CHECK</span>
          <h2 className="section-title">세금 문제는 늦게 발견할수록<br/><em>선택지가 줄어듭니다.</em></h2>
          <p className="section-sub" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
            많은 세무 이슈는 신고 직전, 세무서 안내문을 받은 후, 부동산 거래가 끝난 후에야 드러납니다.
            그때는 자료를 다시 모으거나, 이미 지나간 의사결정을 되돌리기 어려울 수 있습니다.
          </p>
        </div>
        <div className="problem-grid">
          {PROBLEMS.map(p => (
            <div key={p.num} className="problem-card">
              <span className="num">— {p.num}</span>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Services() {
  return (
    <section id="services" className="section bg-white">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">OUR SERVICES</span>
          <h2 className="section-title">상황에 맞춘<br/><em>세무 파트너십.</em></h2>
          <p className="section-sub">기장·신고대리부터 양도·증여·상속·경정청구까지, 자료 검토와 상담을 통해 필요한 세무 절차를 안내합니다.</p>
        </div>
        <div className="services-grid services-grid-6">
          {SERVICES.map(s => (
            <a key={s.id} id={s.id} href="#contact" className="service-card">
              <span className="num">— {s.num}</span>
              <h3>{s.title}</h3>
              <p className="desc">{s.desc}</p>
              <ul className="items">
                {s.items.map(it => <li key={it}>{it}</li>)}
              </ul>
              <span className="more">{s.cta} <Icon name="arrow-right" size={13}/></span>
            </a>
          ))}
        </div>
        <p className="service-disclaimer">{SERVICE_DISCLAIMER}</p>
      </div>
    </section>
  );
}

function About() {
  return (
    <section id="about" className="section bg-paper">
      <div className="container">
        <div className="about-grid">
          <div className="about-photo-wrap">
            <div className="about-photo">
              <img src="assets/lim-seonah-studio-beige-fullbody-web.jpg" alt="임선아 대표 세무사 프로필 사진"/>
            </div>
            <div className="about-photo-badge">
              <div>
                <div className="name">{SITE.representative}</div>
                <div className="role">{SITE.representativeTitle}</div>
              </div>
              <div className="stamp">이로담<br/>세무회계</div>
            </div>
          </div>
          <div className="about-body">
            <span className="eyebrow">ABOUT IRODAM</span>
            <h2 className="section-title" style={{ marginTop: 16, marginBottom: 28 }}>
              이롭게, <em>진심을 담아.</em>
            </h2>
            <p>
              임선아 대표 세무사는 병의원 세무와 재산세 분야에서 쌓은 실무 경험을 바탕으로,
              개인·법인 사업자와 부동산 관련 세무 이슈를 정확하고 이해하기 쉽게 안내합니다.
            </p>
            <p>
              이로담 세무회계는 성동구 왕십리에 위치한 세무회계 사무소로,
              단순한 신고 대행을 넘어 고객의 상황을 먼저 이해하고
              필요한 절차와 세무 리스크를 체계적으로 정리하는 세무 파트너를 지향합니다.
            </p>
            <div className="career-block">
              <h4 className="career-title">대표 약력</h4>
              <ul className="career-list">
                {CAREER.map((c, i) => (
                  <li key={i}>
                    <span className="period">{c.period})</span>
                    <span className="title">
                      {c.title}
                      {c.note && <span className="note"> — {c.note}</span>}
                    </span>
                  </li>
                ))}
              </ul>
            </div>
            <div className="about-quote">
              세무는 결국 고객의 일상과 사업을 지키는 일이라고 생각합니다.
            </div>
            <div className="values-grid">
              {VALUES.map(v => (
                <div key={v.num} className="value-item">
                  <span className="num">— {v.num}</span>
                  <h4>{v.title}</h4>
                  <p>{v.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Snapshot() {
  return (
    <section id="snapshot" className="section section-tight bg-white">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow center">AT A GLANCE</span>
          <h2 className="section-title">이로담 세무회계<br/><em>한눈에 보기.</em></h2>
          <p className="section-sub" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
            성동구 왕십리에 위치한 세무회계 사무소의 핵심 정보를 정리했습니다.
          </p>
        </div>
        <div className="snapshot-grid">
          {SNAPSHOT.map(s => (
            <div key={s.num} className="snapshot-card">
              <span className="num">— {s.num}</span>
              <h4>{s.label}</h4>
              <p>{s.value}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const [openIdx, setOpenIdx] = useState(0);
  return (
    <section id="faq" className="section bg-paper">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow center">FAQ</span>
          <h2 className="section-title">세무 상담 전<br/><em>빠른 답변.</em></h2>
          <p className="section-sub" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
            자주 묻는 질문을 간단히 정리했습니다. 정확한 세무 판단은 자료와 사실관계 확인 후 가능합니다.
          </p>
        </div>
        <div className="faq-list">
          {FAQ.map((f, i) => {
            const open = openIdx === i;
            return (
              <div key={i} className={"faq-item" + (open ? " open" : "")}>
                <button
                  type="button"
                  className="faq-q"
                  aria-expanded={open}
                  onClick={() => setOpenIdx(open ? -1 : i)}
                >
                  <span className="faq-q-num">Q{i + 1}</span>
                  <span className="faq-q-text">{f.q}</span>
                  <span className="faq-q-icon" aria-hidden="true">{open ? "−" : "+"}</span>
                </button>
                {open && (
                  <div className="faq-a">
                    <span className="faq-a-num">A{i + 1}</span>
                    <p>{f.a}</p>
                  </div>
                )}
              </div>
            );
          })}
        </div>
        <div className="faq-foot">
          <p>더 자세한 내용은 카카오톡 상담으로 확인해 주세요.</p>
          <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-primary" aria-label="카카오톡 상담 새 창 열기">
            <Icon name="kakao" size={14}/>카카오톡으로 상담 요청하기 <Icon name="arrow-right" size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
}

function FiveMinProcess() {
  return (
    <section id="process" className="section bg-white">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow center">PROCESS</span>
          <h2 className="section-title">상담 <em>프로세스.</em></h2>
          <p className="section-sub" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
            카카오톡 문의부터 정식 상담까지, 어떤 순서로 진행되는지 안내드립니다.
          </p>
        </div>
        <div className="process-list">
          {FIVE_MIN_PROCESS.map(p => (
            <div key={p.num} className="process-step">
              <span className="num">{p.num}</span>
              <h4>{p.title}</h4>
              <p>{p.desc}</p>
            </div>
          ))}
        </div>
        <div className="five-min-foot">
          <p className="five-min-note">
            5분 체크는 방향을 확인하는 단계입니다.<br/>
            정확한 세무 판단과 신고 진행은 자료 검토 후 가능합니다.
          </p>
          <a href={FIVE_MIN_URL} {...EXTERNAL} className="btn btn-primary btn-lg" aria-label="카카오톡으로 5분 체크 요청하기">
            <Icon name="kakao" size={14}/>카카오톡으로 5분 체크 요청하기 <Icon name="arrow-right" size={14}/>
          </a>
        </div>
      </div>
    </section>
  );
}

function Notices() {
  const [tag, setTag] = useState("전체");
  const filtered = tag === "전체" ? NOTICES : NOTICES.filter(n => n.tag === tag);
  return (
    <section id="notices" className="section bg-white">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">NOTICES</span>
          <h2 className="section-title">공지사항과 <em>세무정보.</em></h2>
          <p className="section-sub">상담 전 알아두면 좋은 안내와 사무소 소식을 정리했습니다.</p>
        </div>
        <div className="notice-tabs">
          {NOTICE_TAGS.map(t => (
            <button key={t} className={"notice-tab" + (tag === t ? " active" : "")} onClick={() => setTag(t)}>{t}</button>
          ))}
        </div>
        {filtered.length > 0 ? (
          <div className="notices-grid">
            {filtered.map((n, i) => (
              <article key={i} className="notice-row">
                <div className="date">{n.date}</div>
                <div className="body">
                  <span className="tag">{n.tag}</span>
                  <h4>{n.title}</h4>
                </div>
                <Icon name="arrow-right" size={16} className="arrow"/>
              </article>
            ))}
          </div>
        ) : (
          <div className="notices-empty">
            <h4>해당 카테고리에 등록된 글이 없습니다.</h4>
            <p>다른 카테고리를 확인해 주세요.</p>
          </div>
        )}
        <p style={{ marginTop: 32, fontSize: 12.5, color: "var(--c-text-3)", textAlign: "center", letterSpacing: "-0.005em" }}>
          본 페이지의 세무 정보는 일반 안내이며, 세부 내용은 상담을 통해 확인해 주세요.
        </p>
      </div>
    </section>
  );
}

// 5분 세무 리스크 체크 — Contact 메인 위젯
function RiskCheck() {
  const [step, setStep] = useState(1); // 1: 분야 선택, 2: 체크리스트, 3: 결과 + 선택 입력
  const [categoryId, setCategoryId] = useState(null);
  const [checked, setChecked] = useState({}); // { idx: true }
  const [callTime, setCallTime] = useState("");
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [memo, setMemo] = useState("");
  const [agree, setAgree] = useState(false);
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);

  const category = useMemo(() => RISK_CHECK.find(r => r.id === categoryId), [categoryId]);
  const checkedCount = useMemo(() => Object.values(checked).filter(Boolean).length, [checked]);

  const pickCategory = (id) => {
    setCategoryId(id);
    setChecked({});
    setStep(2);
  };
  const goResult = () => setStep(3);
  const goBackToList = () => setStep(2);
  const restart = () => {
    setStep(1); setCategoryId(null); setChecked({});
    setCallTime(""); setName(""); setPhone(""); setMemo(""); setAgree(false);
    setErrors({}); setSubmitted(false);
  };

  const toggle = (i) => setChecked(c => ({ ...c, [i]: !c[i] }));

  const resultTitle = () => {
    if (checkedCount === 0) return "현재 체크된 항목은 없습니다.";
    if (checkedCount <= 2) return "확인이 필요한 항목이 있습니다.";
    return "여러 항목에서 확인이 필요합니다.";
  };
  const resultBody = () => {
    if (checkedCount === 0) return "다만 정확한 세무 판단은 자료와 사실관계에 따라 달라질 수 있습니다.";
    if (checkedCount <= 2) return "5분 체크로 현재 상황과 필요한 자료를 먼저 정리해보세요.";
    return "신고 전 또는 거래 전 자료를 먼저 점검하는 것이 좋습니다.";
  };

  const submitOptional = (e) => {
    e.preventDefault();
    const errs = {};
    if (!name.trim()) errs.name = "이름을 입력해 주세요.";
    if (!phone.trim()) errs.phone = "연락처를 입력해 주세요.";
    else if (!/^[\d\s\-+()]{8,}$/.test(phone)) errs.phone = "올바른 연락처 형식을 입력해 주세요.";
    if (!agree) errs.agree = "개인정보 수집 및 이용에 동의해 주세요.";
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSubmitted(true);
  };

  if (submitted) {
    return (
      <div className="form-success">
        <div className="ok-mark"><Icon name="check" size={28}/></div>
        <h3>연락처를 남겨주셨습니다.</h3>
        <p>영업시간 내 순차적으로 확인 후 연락드리겠습니다.<br/>실제 통화 시간은 상황에 따라 조율될 수 있습니다.</p>
        <div className="form-success-prep">
          <h4>통화 전 준비하면 좋은 자료</h4>
          <ul>
            <li>상담 분야와 현재 상황</li>
            <li>세무서 안내문 또는 신고 관련 자료</li>
            <li>기장 상담의 경우 최근 매출·매입 자료</li>
            <li>양도세·증여세·상속세 상담의 경우 취득일, 거래금액, 계약서 등 기본 자료</li>
            <li>경정청구 상담의 경우 기존 신고자료</li>
          </ul>
        </div>
        <div className="form-success-actions">
          <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-kakao"><Icon name="kakao" size={13}/>카카오톡 상담 바로가기</a>
          <a href={`tel:${SITE.tel}`} className="btn btn-outline"><Icon name="phone" size={13}/>전화 {SITE.tel}</a>
        </div>
        <button type="button" className="form-back" style={{ marginTop: 18 }} onClick={restart}>← 다시 체크하기</button>
      </div>
    );
  }

  return (
    <>
      {/* Stepper */}
      <div className="contact-stepper">
        <span className={"stepper-dot " + (step === 1 ? "active" : "done")}>1</span>
        <span className={"stepper-label " + (step === 1 ? "active" : (step > 1 ? "done" : ""))}>분야 선택</span>
        <span className="stepper-line"/>
        <span className={"stepper-dot " + (step === 2 ? "active" : (step > 2 ? "done" : ""))}>2</span>
        <span className={"stepper-label " + (step === 2 ? "active" : (step > 2 ? "done" : ""))}>체크리스트</span>
        <span className="stepper-line"/>
        <span className={"stepper-dot " + (step === 3 ? "active" : "")}>3</span>
        <span className={"stepper-label " + (step === 3 ? "active" : "")}>결과 · 요청</span>
      </div>

      {/* Step 1: 분야 선택 */}
      {step === 1 && (
        <div className="risk-step">
          <div className="risk-step-head">
            <h3 className="risk-step-title">어떤 분야가 가장 가까운가요?</h3>
            <p className="risk-step-desc">하나를 선택하면 분야별 체크리스트가 표시됩니다.</p>
          </div>
          <div className="risk-cat-grid">
            {RISK_CHECK.map(c => (
              <button key={c.id} type="button" className="risk-cat-btn" onClick={() => pickCategory(c.id)}>
                <span className="risk-cat-label">{c.label}</span>
                <Icon name="arrow-right" size={14}/>
              </button>
            ))}
          </div>
          <p className="risk-hint">
            정확한 세무 판단은 관련 자료와 사실관계 확인 후 가능합니다. 체크 결과는 상담 전 기초 확인용입니다.
          </p>
        </div>
      )}

      {/* Step 2: 체크리스트 */}
      {step === 2 && category && (
        <div className="risk-step">
          <div className="risk-step-head">
            <span className="risk-cat-tag">{category.label}</span>
            <h3 className="risk-step-title">해당되는 항목을 모두 선택해 주세요.</h3>
            <p className="risk-step-desc">체크하지 않아도 다음 단계로 넘어갈 수 있습니다.</p>
          </div>
          <ul className="risk-list">
            {category.items.map((q, i) => {
              const isOn = !!checked[i];
              return (
                <li key={i}>
                  <label className={"risk-item" + (isOn ? " on" : "")}>
                    <input type="checkbox" checked={isOn} onChange={() => toggle(i)} />
                    <span className="risk-checkbox" aria-hidden="true">{isOn && <Icon name="check" size={14}/>}</span>
                    <span className="risk-q">{q}</span>
                  </label>
                </li>
              );
            })}
          </ul>
          <div className="risk-step-foot">
            <span className="risk-step-count">체크된 항목: <strong>{checkedCount}개</strong></span>
            <div className="risk-step-actions">
              <button type="button" className="form-back" onClick={() => { setStep(1); setCategoryId(null); }}>← 분야 다시 선택</button>
              <button type="button" className="btn btn-primary" onClick={goResult}>결과 보기 <Icon name="arrow-right" size={14}/></button>
            </div>
          </div>
        </div>
      )}

      {/* Step 3: 결과 + 옵션 입력 */}
      {step === 3 && category && (
        <div className="risk-step">
          <div className="risk-result-card">
            <span className="risk-cat-tag light">{category.label}</span>
            <p className="risk-result-count">체크된 항목 <strong>{checkedCount}개</strong></p>
            <h3 className="risk-result-title">{resultTitle()}</h3>
            <p className="risk-result-body">{resultBody()}</p>
            <p className="risk-result-disclaimer">
              체크 결과는 상담 전 기초 확인용입니다.<br/>
              정확한 세무 판단은 관련 자료와 사실관계 확인 후 가능합니다.
            </p>
            <div className="risk-result-cta">
              <a href={FIVE_MIN_URL} {...EXTERNAL} className="btn btn-primary-light btn-lg" aria-label="카카오톡으로 5분 체크 요청하기">
                <Icon name="kakao" size={14}/>카카오톡으로 5분 체크 요청하기 <Icon name="arrow-right" size={14}/>
              </a>
              <a href={`tel:${SITE.tel}`} className="btn btn-outline-light btn-lg">
                <Icon name="phone" size={14}/>바로 전화 문의
              </a>
            </div>
            <div className="risk-result-examples">
              <span className="risk-examples-label">카카오톡 문의 예시</span>
              <p>“{category.label} 상담 희망 / 개인사업자 / 오늘 오후 통화 가능”</p>
              <p>“양도세 상담 희망 / 부동산 양도 예정 / 이번 주 중 통화 가능”</p>
            </div>
            <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="risk-result-kakao">
              <Icon name="kakao" size={13}/>카카오톡으로 문의하기
            </a>
          </div>

          {/* 옵션 — 연락처 남기기 */}
          <details className="risk-leave-form">
            <summary>
              <span>전화로 연락받고 싶다면 — 이름·연락처 남기기 (선택)</span>
              <span className="risk-leave-hint">카카오톡이 어려우신 분만 작성하세요.</span>
            </summary>
            <form className="form" onSubmit={submitOptional} noValidate>
              <div className="form-row">
                <div className="form-field">
                  <label htmlFor="rc-name">이름<span className="req">*</span></label>
                  <input id="rc-name" value={name} onChange={e => setName(e.target.value)} placeholder="홍길동" aria-invalid={!!errors.name}/>
                  {errors.name && <span className="err">{errors.name}</span>}
                </div>
                <div className="form-field">
                  <label htmlFor="rc-phone">연락처<span className="req">*</span></label>
                  <input id="rc-phone" type="tel" value={phone} onChange={e => setPhone(e.target.value)} placeholder="010-0000-0000" aria-invalid={!!errors.phone}/>
                  {errors.phone && <span className="err">{errors.phone}</span>}
                </div>
              </div>
              <div className="form-field">
                <label htmlFor="rc-time">희망 통화 시간대 (선택)</label>
                <div className="chip-group">
                  {["오늘 중 가능","내일 오전","내일 오후","이번 주 중 편한 시간"].map(c => (
                    <span key={c} className="chip">
                      <input type="radio" id={`rc-time-${c}`} name="callTime" checked={callTime === c} onChange={() => setCallTime(c)}/>
                      <label htmlFor={`rc-time-${c}`}>{c}</label>
                    </span>
                  ))}
                </div>
                <p className="form-hint" style={{ marginTop: 8 }}>실제 통화 시간은 확인 후 조율됩니다.</p>
              </div>
              <div className="form-field">
                <label htmlFor="rc-memo">추가 메모 (선택)</label>
                <textarea id="rc-memo" value={memo} onChange={e => setMemo(e.target.value)} placeholder="간단히 상황을 적어주셔도 됩니다." />
                <span className="form-hint">주민등록번호, 계좌번호, 건강정보 등 민감하거나 불필요한 개인정보를 입력하지 말아주세요.</span>
              </div>
              <label className="checkbox">
                <input type="checkbox" checked={agree} onChange={e => setAgree(e.target.checked)} aria-invalid={!!errors.agree}/>
                <span>
                  <strong style={{ color: "var(--c-charcoal)", fontWeight: 600 }}>개인정보 수집 및 이용에 동의합니다.</strong> (필수)<br/>
                  수집된 정보는 5분 세무 리스크 체크 요청 접수 및 상담 응대를 위해 사용되며, 자세한 내용은 <a href={SITE.privacyUrl} {...EXTERNAL} className="inline-link">개인정보처리방침</a>에서 확인할 수 있습니다.
                  {errors.agree && <span className="err" style={{ display: "block", marginTop: 6 }}>{errors.agree}</span>}
                </span>
              </label>
              <div className="form-actions">
                <button type="button" className="form-back" onClick={goBackToList}>← 체크리스트 다시 보기</button>
                <button type="submit" className="btn btn-primary">연락처 남기기 <Icon name="arrow-right" size={14}/></button>
              </div>
            </form>
          </details>
        </div>
      )}
    </>
  );
}

function Contact() {
  return (
    <section id="contact" className="section bg-white">
      <div className="container">
        <div className="section-head center">
          <span className="eyebrow center">CONTACT</span>
          <h2 className="section-title">5분 세무 <em>리스크 체크.</em></h2>
          <p className="section-sub" style={{ textAlign: "center", marginLeft: "auto", marginRight: "auto" }}>
            몇 가지 항목만 선택하면 현재 상황에서 확인이 필요한 세무 포인트를 정리할 수 있습니다.
            체크 후 카카오톡으로 5분 체크를 요청해보세요.
          </p>
        </div>

        <div className="contact-info" style={{ marginTop: 56 }}>
          <div className="contact-info-item">
            <span className="label">Tel</span>
            <a className="val" href={`tel:${SITE.tel}`}>{SITE.tel}</a>
          </div>
          <div className="contact-info-item">
            <span className="label">Mobile</span>
            <a className="val" href={`tel:${SITE.mobile}`}>{SITE.mobile}</a>
          </div>
          <div className="contact-info-item">
            <span className="label">E-mail</span>
            <a className="val" href={`mailto:${SITE.email}`} style={{ fontSize: 14 }}>{SITE.email}</a>
          </div>
          <div className="contact-info-item">
            <span className="label">Hours</span>
            <span className="val" style={{ fontSize: 14, lineHeight: 1.55 }}>{SITE.hours}<br/>{SITE.closedDays}</span>
          </div>
        </div>

        <div className="contact-card">
          <RiskCheck />
          <div className="quick-contact">
            <span className="label">또는 바로 문의</span>
            <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-kakao" aria-label="카카오톡 상담 새 창 열기"><Icon name="kakao" size={13}/>카카오톡 상담</a>
            <a href={`tel:${SITE.tel}`} className="btn btn-outline" aria-label={`전화 ${SITE.tel}`}><Icon name="phone" size={13}/>전화 {SITE.tel}</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// 후반부 짧은 리마인드 — 풀 체크리스트 아닌 CTA 섹션
function FinalCTA() {
  return (
    <section className="final-cta">
      <div className="container">
        <div className="final-cta-inner">
          <h2 className="final-cta-title">
            세금 문제는 터진 뒤보다,<br/>
            <em>터지기 전에 확인하는 편</em>이 낫습니다.
          </h2>
          <p className="final-cta-body">
            지금 5분만 현재 상황을 남겨주세요.<br/>
            이로담 세무회계가 필요한 자료와 다음 절차를 안내드립니다.
          </p>
          <div className="final-cta-buttons">
            <a href={SITE.kakaoConsultUrl} {...EXTERNAL} className="btn btn-primary-light btn-lg" aria-label="카카오톡으로 5분 체크 요청하기">
              <Icon name="kakao" size={14}/>카카오톡으로 5분 체크 요청하기 <Icon name="arrow-right" size={14}/>
            </a>
            <a href={`tel:${SITE.tel}`} className="btn btn-outline-light btn-lg">
              <Icon name="phone" size={14}/>바로 전화 문의
            </a>
          </div>
          <p className="final-cta-disclaimer">
            정확한 세무 판단은 개별 사실관계와 자료 확인 후 가능합니다.
          </p>
        </div>
      </div>
    </section>
  );
}

function Location() {
  return (
    <section id="location" className="section bg-paper section-tight">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">LOCATION</span>
          <h2 className="section-title">오시는 길</h2>
        </div>
        <div className="map-block">
          <a
            href={SITE.naverMapUrl}
            {...EXTERNAL}
            className="map-image-wrap"
            aria-label="네이버 지도에서 이로담 세무회계 위치 보기"
          >
            <img
              className="map-image"
              src="assets/irodam-map-naver-screenshot-web.jpg"
              alt="이로담 세무회계 위치 지도"
              loading="lazy"
            />
            <span className="map-image-overlay">
              <Icon name="naver" size={13}/>네이버 지도에서 보기
            </span>
          </a>
          <div className="map-info">
            <h4>이로담 세무회계</h4>
            <p className="addr">{SITE.address}</p>
            <div className="transit-block">
              <div className="transit-row"><span className="key">영업시간</span><span className="val">{SITE.hours}<br/>{SITE.closedDays}</span></div>
              <div className="transit-row"><span className="key">교통</span><span className="val">지하철 2호선 한양대역 / 5호선 왕십리역 인근</span></div>
              <div className="transit-row"><span className="key">전화</span><span className="val"><a href={`tel:${SITE.tel}`}>{SITE.tel}</a></span></div>
            </div>
            <div className="map-buttons">
              <a href={SITE.naverMapUrl} {...EXTERNAL} className="btn btn-ghost" aria-label="네이버 지도에서 보기 새 창 열기"><Icon name="naver" size={13}/>네이버 지도에서 보기</a>
              <a href={SITE.kakaoMapUrl} {...EXTERNAL} className="btn btn-ghost" aria-label="카카오맵에서 보기 새 창 열기"><Icon name="kakao" size={13}/>카카오맵에서 보기</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <a href="#top" className="brand" aria-label="이로담 세무회계 홈">
              <img className="brand-logo brand-logo-footer" src="assets/irodam-logo-horizontal-white.png" alt="이로담 세무회계" />
            </a>
            <p className="footer-tag">— 이롭게, 진심을 담아.</p>
            <div className="footer-info">
              <div className="footer-info-row"><span className="key">대표</span><span className="val">{SITE.representativeTitle} {SITE.representative}</span></div>
              <div className="footer-info-row"><span className="key">사업자등록번호</span><span className="val">{SITE.bizNumber}</span></div>
              <div className="footer-info-row"><span className="key">주소</span><span className="val">{SITE.address}</span></div>
              <div className="footer-info-row"><span className="key">Tel</span><span className="val"><a href={`tel:${SITE.tel}`}>{SITE.tel}</a></span></div>
              <div className="footer-info-row"><span className="key">Mobile</span><span className="val"><a href={`tel:${SITE.mobile}`}>{SITE.mobile}</a></span></div>
              <div className="footer-info-row"><span className="key">E-mail</span><span className="val"><a href={`mailto:${SITE.email}`}>{SITE.email}</a></span></div>
              <div className="footer-info-row"><span className="key">Fax</span><span className="val">{SITE.fax}</span></div>
              <div className="footer-info-row"><span className="key">영업시간</span><span className="val">{SITE.hours}<br/>{SITE.closedDays}</span></div>
            </div>
          </div>
          <div className="footer-col">
            <h5>SITE MENU</h5>
            <a href="#about">사무소 소개</a>
            <a href="#services">서비스 안내</a>
            <a href="#process">상담 프로세스</a>
            <a href="#faq">세무 상담 전 빠른 답변</a>
            <a href="#contact">5분 세무 리스크 체크</a>
            <a href="#location">오시는 길</a>
            <a href={SITE.privacyUrl} {...EXTERNAL}>개인정보처리방침</a>
          </div>
          <div className="footer-col">
            <h5>QUICK CONTACT</h5>
            <a href={FIVE_MIN_URL} {...EXTERNAL}>5분 체크 요청</a>
            <a href={`tel:${SITE.tel}`}>전화 {SITE.tel}</a>
            <a href={`tel:${SITE.mobile}`}>모바일 {SITE.mobile}</a>
            <a href={SITE.kakaoConsultUrl} {...EXTERNAL}>카카오톡 상담</a>
          </div>
        </div>
        <div className="footer-disclaimer">
          본 웹사이트의 세무 정보는 일반 안내이며, 실제 세무 판단은 개별 사실관계와 관련 법령에 따라 달라질 수 있습니다.
        </div>
        <div className="footer-bottom">
          <span>© 2026 이로담 세무회계. All rights reserved.</span>
          <span>대표 세무사 임선아</span>
        </div>
      </div>
    </footer>
  );
}

function MobileCTA() {
  return (
    <div className="mobile-cta-bar">
      <div className="row">
        <a href={FIVE_MIN_URL} {...EXTERNAL} className="check" aria-label="카카오톡으로 5분 체크 요청하기">
          <Icon name="kakao" size={18}/><span>5분 체크</span>
        </a>
        <a href={`tel:${SITE.tel}`} className="tel" aria-label={`전화 ${SITE.tel}`}>
          <Icon name="phone" size={18}/><span>전화</span>
        </a>
        <a href={SITE.naverMapUrl} {...EXTERNAL} className="map" aria-label="네이버 지도에서 길찾기">
          <Icon name="map" size={18}/><span>길찾기</span>
        </a>
      </div>
    </div>
  );
}

function App() {
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const els = document.querySelectorAll(".fade-up.pre-anim:not(.in)");
    const reveal = (el) => el.classList.add("in");
    const io = new IntersectionObserver(entries => {
      entries.forEach(e => { if (e.isIntersecting) { reveal(e.target); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach(el => io.observe(el));
    const t = setTimeout(() => {
      document.querySelectorAll(".fade-up.pre-anim:not(.in)").forEach(reveal);
    }, 1500);
    return () => { io.disconnect(); clearTimeout(t); };
  }, []);
  useEffect(() => {
    const onHash = () => setMobileOpen(false);
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);
  return (
    <>
      <Header onOpenMobile={() => setMobileOpen(o => !o)} mobileOpen={mobileOpen} />
      <MobileNav open={mobileOpen} onClose={() => setMobileOpen(false)} />
      <main>
        <Hero />
        <Problem />
        <Services />
        <About />
        <Contact />
        <FiveMinProcess />
        <FAQSection />
        <Snapshot />
        <FinalCTA />
        <Location />
      </main>
      <Footer />
      <MobileCTA />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);