/* =========================================================
   SECTIONS · Part 1 — Header / Hero / TrustBar / Why / Types / Process
   ========================================================= */

function Header({ scrolled, onMenu }) {
  const C = window.COMPANY;
  return (
    <header className={`header${scrolled ? " header--scrolled" : ""}`}>
      <div className="container header__inner">
        <a href="#top" className="brand" aria-label={C.name}>
          <img className="brand__logo brand__logo--header" src="img/logo-footer.png" alt={C.name} />
        </a>

        <nav className="nav">
          <a href="#why">왜 자연인가</a>
          <a href="#credentials">면허·자격</a>
          <a href="#types">저장고 종류</a>
          <a href="#process">시공 절차</a>
          <a href="#construction-case">시공 과정</a>
          <a href="#gallery">시공 사례</a>
          <a href="#subsidy">보조사업</a>
          <a href="#faq">자주 묻는 질문</a>
        </nav>

        <div className="header__cta">
          <a className="header__phone" href={`tel:${C.phoneMobile}`}>
            <Icon name="phone" size={18} /> {C.phoneMobile}
          </a>
          <a className="btn btn--primary" href={`tel:${C.phoneMobile}`} style={{ padding: "11px 22px", fontSize: 15 }}>
            <Icon name="phone" size={16} /> 전화 상담
          </a>
          <button className="hamburger" onClick={onMenu} aria-label="메뉴 열기">
            <Icon name="menu" size={26} />
          </button>
        </div>
      </div>
    </header>
  );
}

function Drawer({ open, onClose }) {
  const C = window.COMPANY;
  const links = [
    ["#why", "왜 자연인가"], ["#credentials", "면허·자격"], ["#types", "저장고 종류"], ["#process", "시공 절차"],
    ["#construction-case", "시공 과정"], ["#gallery", "시공 사례"], ["#trust", "고객 후기"], ["#subsidy", "보조사업"],
    ["#faq", "자주 묻는 질문"], ["#notice", "공지사항"],
  ];
  return (
    <React.Fragment>
      <div className={`drawer-backdrop${open ? " open" : ""}`} onClick={onClose} />
      <aside className={`drawer${open ? " open" : ""}`} aria-hidden={!open}>
        <div className="drawer__head">
          <span className="brand">
            <img className="brand__logo brand__logo--header" src="img/logo-footer.png" alt={C.name} />
          </span>
          <button className="drawer__close" onClick={onClose} aria-label="닫기"><Icon name="x" size={24} /></button>
        </div>
        <nav>
          {links.map(([href, label]) => (
            <a key={href} href={href} onClick={onClose}>{label}</a>
          ))}
        </nav>
        <div className="drawer__foot">
          <a className="drawer__phone" href={`tel:${C.phoneMobile}`}>
            <span>상담 전화</span>{C.phoneMobile}
          </a>
          <a className="btn btn--primary btn--block" href={`tel:${C.phoneMobile}`} onClick={onClose}>
            <Icon name="phone" size={18} /> 지금 바로 전화 상담
          </a>
        </div>
      </aside>
    </React.Fragment>
  );
}

function Hero() {
  const C = window.COMPANY;
  const stats = window.STATS;
  return (
    <section className="hero" id="top">
      <div className="hero__bg">
        <img src="img/1.jpeg" alt="자연 저온저장고 야외형 2도어 맞춤 저장고 시공 현장" />
      </div>
      <div className="container hero__inner">
        <div className="hero__grid">
          <div>
            <Reveal className="hero__badge" as="span">
              <span className="dot" /> 전국 출장 · 면허 보유 전문 시공
            </Reveal>
            <Reveal as="h1" delay={1}>
              자연의 신선함 그대로,<br /><span className="hl">정직하게 짓는 저온저장고</span>
            </Reveal>
            <Reveal as="p" className="hero__sub" delay={2}>
              꼼꼼한 맞춤 설계와 빈틈없는 시공으로 농가와 업체의
              소중한 자산을 안전하게 지킵니다.
            </Reveal>
            <Reveal className="hero__actions" delay={3}>
              <a className="btn btn--primary btn--lg" href={`tel:${window.COMPANY.phoneMobile}`}>
                <Icon name="phone" size={19} /> 전화로 바로 상담하기
              </a>
              <a className="btn btn--ghost btn--lg" href="#gallery">시공 사례 보기</a>
            </Reveal>
          </div>

          <Reveal className="hero__stats" delay={3}>
            {stats.map((s) => (
              <div className="hero__stat" key={s.label}>
                <div className="num"><Counter to={s.num} suffix={s.suffix} /></div>
                <div className="lbl">{s.label}</div>
              </div>
            ))}
          </Reveal>
        </div>
      </div>
      <div className="hero__scroll">
        <span className="mouse" />
        <span>SCROLL</span>
      </div>
    </section>
  );
}

function TrustBar() {
  const items = [
    ["doc", "기계설비 전문 면허"],
    ["snow", "공조냉동 국가기술자격"],
    ["doc", "정부 보조사업 규격 대응"],
    ["bolt", "전기·용접 기술자격"],
    ["shield", "끝까지 A/S 책임"],
    ["pin", "전국 출장 시공"],
  ];
  const row = items.concat(items);
  return (
    <div className="trustbar" aria-hidden="true">
      <div className="trustbar__track">
        {row.map(([ic, t], i) => (
          <span className="trustbar__item" key={i}><Icon name={ic} size={18} /> {t}</span>
        ))}
      </div>
    </div>
  );
}

function Why() {
  const feats = window.WHY_FEATURES;
  return (
    <section className="section why" id="why">
      <div className="container">
        <div className="section-head" style={{ maxWidth: 720 }}>
          <Reveal as="span" className="eyebrow">WHY 자연 저온저장고</Reveal>
          <Reveal as="h2" className="h-title" delay={1} style={{ marginTop: 16 }}>
            오래 믿고 맡길 수 있는<br /><span className="accent">정직한 시공</span>의 차이
          </Reveal>
        </div>
        <div className="why__grid">
          {feats.map((f, i) => (
            <Reveal key={f.title} className={`why__feature${f.span ? " span2" : ""}`} delay={(i % 3) + 1}>
              <span className="why__ic"><Icon name={f.icon} size={28} /></span>
              <div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Credentials() {
  const cert = window.CREDENTIALS;
  return (
    <section className="section credentials" id="credentials">
      <div className="container">
        <div className="credentials__layout">
          <div className="credentials__intro">
            <Reveal as="span" className="eyebrow">면허·자격 보유</Reveal>
            <Reveal as="h2" className="h-title" delay={1} style={{ marginTop: 16 }}>
              기계설비 면허와<br /><span className="accent">국가기술자격</span>으로 확인하는 전문성
            </Reveal>
            <Reveal as="p" className="lead" delay={2}>
              {cert.lead}
            </Reveal>
            <Reveal className="credentials__scope" delay={3}>
              {cert.scopes.map((scope) => (
                <span key={scope}><Icon name="check" size={16} /> {scope}</span>
              ))}
            </Reveal>
          </div>
          <div className="credentials__grid">
            {cert.cards.map((item, i) => (
              <Reveal className="credential-card" key={item.title} delay={(i % 2) + 1}>
                <span className="credential-card__ic"><Icon name={item.icon} size={25} /></span>
                <div>
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Types() {
  const types = window.TYPES;
  return (
    <section className="section types" id="types">
      <div className="container">
        <div className="section-head section-head--center">
          <Reveal as="span" className="eyebrow eyebrow--center">저장고 종류</Reveal>
          <Reveal as="h2" className="h-title" delay={1}>용도에 꼭 맞는 저장고를 짓습니다</Reveal>
          <Reveal as="p" className="lead" delay={2} style={{ textAlign: "center" }}>
            농가용 소형부터 산업용 대형 창고까지 — 작물과 물량, 부지 여건에 맞춰 설계합니다.
          </Reveal>
        </div>
        <div className="types__grid">
          {types.map((t, i) => (
            <Reveal key={t.title} className="type-card" delay={i + 1}>
              <div className="type-card__img">
                <img src={t.img} alt={t.title} loading="lazy" />
                <span className="type-card__tag">{t.tag}</span>
              </div>
              <div className="type-card__body">
                <h3>{t.title}</h3>
                <p>{t.desc}</p>
                <ul className="type-card__list">
                  {t.points.map((p) => (
                    <li key={p}><Icon name="check" size={17} /> {p}</li>
                  ))}
                </ul>
              </div>
            </Reveal>
          ))}
        </div>
        <Reveal style={{ textAlign: "center", marginTop: 48 }}>
          <a className="btn btn--dark btn--lg" href={`tel:${window.COMPANY.phoneMobile}`}>
            <Icon name="phone" size={19} /> 어떤 저장고가 맞을지 전화 상담하기
          </a>
        </Reveal>
      </div>
    </section>
  );
}

function Process() {
  const steps = window.PROCESS;
  return (
    <section className="section process" id="process">
      <div className="container">
        <div className="section-head section-head--center">
          <Reveal as="span" className="eyebrow eyebrow--center">시공 절차</Reveal>
          <Reveal as="h2" className="h-title" delay={1}>상담부터 A/S까지, 체계적으로 관리합니다</Reveal>
          <Reveal as="p" className="lead" delay={2} style={{ textAlign: "center" }}>
            복잡한 단계 없이 명확하게. 현장 확인부터 시공 이후 관리까지 기술 기준에 맞춰 진행합니다.
          </Reveal>
        </div>
        <div className="process__grid">
          <div className="process__line" />
          {steps.map((s, i) => (
            <Reveal key={s.n} className="step" delay={i + 1}>
              <div className="step__num">{s.n}</div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Drawer, Hero, TrustBar, Why, Credentials, Types, Process });