// home-sections.jsx — homepage sections matching the live tintlife.co.kr layout.

/* ---------- HERO: full-bleed image band ---------- */
function Hero() {
  return (
    <section id="home" className="tl-hero">
      <img className="tl-hero-img" src={IMG.hero} alt="염색 시술 장면" />
      <span className="tl-hero-scrim"></span>
      <div className="tl-wrap tl-hero-in">
        <div className="tl-hero-copy">
          <h1 className="tl-hero-title">{HERO.title}</h1>
          <p className="tl-hero-sub">{HERO.body1}<br />{HERO.body2}</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- ONEDAY: soft-gray band, text + owner photo ---------- */
function Oneday() {
  return (
    <section className="tl-section tl-section--soft">
      <div className="tl-wrap tl-oneday">
        <div className="tl-oneday-copy">
          <p className="tl-oneday-l1">{ONEDAY.l1}</p>
          <p className="tl-oneday-l2">{ONEDAY.l2}</p>
          <p className="tl-oneday-l3">{ONEDAY.l3}</p>
          <p className="tl-oneday-l4">{ONEDAY.l4}</p>
          <div className="tl-oneday-cta">
            <Button href={CONTACT.oneday} target="_blank" iconRight>{ONEDAY.cta}</Button>
          </div>
        </div>
        <div className="tl-oneday-media">
          <a href="https://ondayclass.tintlife.co.kr" target="_blank" rel="noreferrer" style={{ display: "block" }}>
            <img src="uploads/2026-tint_oneday-class02.jpg" alt="2026 틴트라이프 원데이클래스 — 매주 수요일 선착순 2명" style={{ cursor: "pointer" }} />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- ESTEEM + 3 pillars ---------- */
function Esteem() {
  return (
    <section className="tl-section">
      <div className="tl-wrap">
        <div className="tl-center" style={{ maxWidth: 760 }}>
          <h2 className="tl-h2">{ESTEEM.title1}<br />{ESTEEM.title2}</h2>
          <p className="tl-body tl-center-body">{ESTEEM.body}</p>
        </div>
        <div className="tl-pillars">
          {PILLARS.map((p) => (
            <div key={p.en} className="tl-pillar">
              <img className="tl-pillar-img" src={IMG[p.img]} alt={p.en} />
              <h3 className="tl-pillar-en">{p.en}</h3>
              <p className="tl-pillar-desc">{p.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- FRANCHISE: full-bleed band, text right ---------- */
function Franchise() {
  return (
    <section className="tl-band tl-band--parallax">
      <span className="tl-band-scrim"></span>
      <div className="tl-wrap tl-band-in">
        <div className="tl-band-copy">
          <h2 className="tl-band-title">{FRANCHISE.title}</h2>
          <p className="tl-band-sub">{FRANCHISE.body1}<br />{FRANCHISE.body2}<br />{FRANCHISE.body3}</p>
          <div style={{ marginTop: 22 }}>
            <Button variant="lineLight" href={FRANCHISE.href} target="_blank" iconRight>{FRANCHISE.cta}</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- PROMO: special-offer banner linking to startup page ---------- */
function Promo() {
  return (
    <section className="tl-promo" aria-label="Special Offer">
      <div className="tl-wrap tl-promo-in">
        <div className="tl-promo-copy">
          <p className="tl-promo-kicker">{PROMO.kicker}</p>
          <h2 className="tl-promo-title">{PROMO.title}</h2>
          <p className="tl-promo-sub">{PROMO.sub}</p>
        </div>
        <div className="tl-promo-aside">
          <p className="tl-promo-highlight">{PROMO.highlight}</p>
          <a className="tl-promo-btn" href={PROMO.href}>
            {PROMO.cta}
            <svg width="18" height="9" viewBox="0 0 18 9" fill="none" aria-hidden="true"><path d="M0 4.5h16M16 4.5l-3.6-3.5M16 4.5l-3.6 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- LOUNGE: centered head + two splits ---------- */
function Lounge() {
  return (
    <section className="tl-section">
      <div className="tl-wrap">
        <h2 className="tl-h2 tl-center" style={{ marginBottom: "clamp(40px,5vw,64px)" }}>
          {LOUNGE.head[0]}<br />{LOUNGE.head[1]}<br />{LOUNGE.head[2]}
        </h2>

        <div className="tl-split">
          <div className="tl-split-media"><img src={IMG.building} alt="틴트라이프 공간" /></div>
          <div className="tl-split-copy">
            <h3 className="tl-h3">{LOUNGE.aTitle}</h3>
            <p className="tl-body">{LOUNGE.aBody}</p>
            <div className="tl-split-cta"><Button href={LOUNGE.href} target="_blank" iconRight>{DESIGN.cta}</Button></div>
          </div>
        </div>

        <div className="tl-split tl-split--rev">
          <div className="tl-split-copy">
            <h3 className="tl-h3">{LOUNGE.bTitle}</h3>
            <p className="tl-body">{LOUNGE.bBody}</p>
            <p className="tl-price">{LOUNGE.bPrice}</p>
          </div>
          <div className="tl-split-media"><img src={IMG.valueWoman} alt="염색 시술" /></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- DESIGN: centered head + two splits ---------- */
function Design() {
  return (
    <section className="tl-section">
      <div className="tl-wrap">
        <h2 className="tl-h2 tl-center" style={{ marginBottom: "clamp(40px,5vw,64px)" }}>{DESIGN.head}</h2>

        <div className="tl-split">
          <div className="tl-split-media"><img src={IMG.basicWoman} alt="기본에 충실한 아름다움" /></div>
          <div className="tl-split-copy">
            <h3 className="tl-h3">{DESIGN.basicTitle}</h3>
            <p className="tl-body">{DESIGN.basicBody}</p>
            <div className="tl-split-cta"><Button href={DESIGN.href} target="_blank" iconRight>{DESIGN.cta}</Button></div>
          </div>
        </div>

        <div className="tl-split tl-split--rev">
          <div className="tl-split-copy">
            <h3 className="tl-h3">{DESIGN.bridgeTitle}</h3>
            <p className="tl-body">{DESIGN.bridgeBody}</p>
            <div className="tl-split-cta"><Button href={DESIGN.href} target="_blank" iconRight>{DESIGN.cta}</Button></div>
          </div>
          <div className="tl-split-media"><img src={IMG.bridge} alt="세대를 잇는 브릿지" /></div>
        </div>
      </div>
    </section>
  );
}

/* ---------- REVIEWS ---------- */
function Reviews() {
  return (
    <section className="tl-section tl-section--soft" id="reviews">
      <div className="tl-wrap tl-reviews">
        <aside className="tl-reviews-head">
          <h2 className="tl-h2">진심이 담긴 고객리뷰를<br />확인해보세요</h2>
          <img className="tl-reviews-img" src={IMG.reviewHero} alt="고객 후기" />
          <Button href={CONTACT.review} target="_blank" iconRight>리뷰 더 보기</Button>
        </aside>
        <div className="tl-reviews-list">
          {REVIEWS.map((r, i) => (
            <article key={i} className="tl-review">
              <img className="tl-review-av" src={IMG.avatars[i]} alt="" />
              <div>
                <h4 className="tl-review-title">{r.title}</h4>
                <p className="tl-review-text">{r.text}</p>
                {r.meta && <p className="tl-review-meta">{r.meta}</p>}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- STORY (video) ---------- */
function Story() {
  return (
    <section className="tl-section">
      <div className="tl-wrap tl-story">
        <a className="tl-story-media" href={CONTACT.more} target="_blank" rel="noreferrer">
          <img src={IMG.story} alt="틴트라이프 이야기" />
          <span className="tl-story-play"><Icon name="play" size={22} /></span>
        </a>
        <div className="tl-story-copy">
          <h2 className="tl-h2">{STORY.title1}<br />{STORY.title2}</h2>
          <p className="tl-body">{STORY.body}</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- GALLERY — live Instagram feed via Behold ---------- */
const BEHOLD_URL = "https://feeds.behold.so/pnruKWvZzbRvMWzMLAnf";

function Gallery() {
  const [posts,   setPosts]   = React.useState(null);
  const [profile, setProfile] = React.useState(null);

  React.useEffect(() => {
    fetch(BEHOLD_URL)
      .then(r => r.json())
      .then(data => {
        setProfile({ username: data.username, followers: data.followersCount, avatar: data.profilePictureUrl });
        setPosts((data.posts || []).slice(0, 8));
      })
      .catch(() => setPosts([]));
  }, []);

  const loading = posts === null;
  const tiles   = (posts && posts.length > 0) ? posts : [];

  return (
    <section className="tl-gallery">
      <div className="tl-wrap">
        {/* header */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24, flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
            {profile && profile.avatar && (
              <img src={profile.avatar} alt={profile.username}
                style={{ width: 52, height: 52, borderRadius: "50%", objectFit: "cover", border: "2px solid rgba(255,255,255,.25)", flexShrink: 0 }} />
            )}
            <div>
              <a href={CONTACT.instagram} target="_blank" rel="noreferrer"
                style={{ fontWeight: 800, fontSize: "clamp(18px,2.4vw,26px)", color: "#fff", textDecoration: "none", letterSpacing: "-0.02em" }}>
                {CONTACT.instaHandle}
              </a>
              {profile && (
                <div style={{ fontSize: 13, color: "rgba(255,255,255,.6)", marginTop: 3 }}>
                  팔로워 <strong style={{ color: "rgba(255,255,255,.85)" }}>{profile.followers.toLocaleString()}</strong>명
                </div>
              )}
            </div>
          </div>
          <a href={CONTACT.instagram} target="_blank" rel="noreferrer"
            style={{ display: "inline-flex", alignItems: "center", gap: 8, padding: "10px 20px", borderRadius: "var(--btn-radius, 6px)",
              background: "rgba(255,255,255,.12)", color: "#fff", textDecoration: "none", fontWeight: 700, fontSize: 14,
              border: "1px solid rgba(255,255,255,.2)", transition: "background .2s" }}>
            <Icon name="instagram" size={16} /> 팔로우하기
          </a>
        </div>

        {tiles.length > 0 ? (
          <div className="tl-gallery-grid">
            {tiles.map(post => {
              const thumb   = post.thumbnailUrl || post.mediaUrl;
              const isVideo = post.mediaType === "VIDEO";
              return (
                <a key={post.id} className="tl-gtile" href={post.permalink} target="_blank" rel="noreferrer">
                  {thumb && <img src={thumb} alt={post.caption ? post.caption.slice(0, 60) : ""} loading="lazy" />}
                  <span className="tl-gtile-ov"><Icon name={isVideo ? "play" : "instagram"} size={24} /></span>
                </a>
              );
            })}
          </div>
        ) : !loading && (
          <div style={{ textAlign: "center", padding: "32px 0" }}>
            <a href={CONTACT.instagram} target="_blank" rel="noreferrer"
               style={{ color: "#fff", fontWeight: 700, textDecoration: "none", fontSize: 16, opacity: 0.85 }}>
              Instagram에서 최신 게시물 보기 →
            </a>
          </div>
        )}
      </div>
    </section>
  );
}

/* ---------- MAP + CONTACT ---------- */
function ContactSection() {
  return (
    <React.Fragment>
      <section className="tl-map" aria-label="오시는 길">
        <iframe
          src="https://maps.google.com/maps?q=수원시+영통구+대학1로+8번길+76&output=embed&hl=ko&z=17"
          width="100%"
          height="100%"
          style={{border: 0, display: "block"}}
          allowFullScreen=""
          loading="lazy"
          referrerPolicy="no-referrer-when-downgrade"
          title="틴트라이프 위치"
        />
      </section>
      <section className="tl-section tl-contact" id="contact">
        <div className="tl-wrap tl-center">
          <h2 className="tl-h2">가맹 상담 및 문의</h2>
          <a className="tl-tel" href={`tel:${CONTACT.tel}`}>{CONTACT.tel}</a>
          <p className="tl-contact-addr">{CONTACT.address}</p>
          <p className="tl-contact-way">{CONTACT.way}</p>
          <div className="tl-contact-maps">
            <Button href={CONTACT.naverMap} target="_blank">네이버 맵으로 보기</Button>
            <Button href={CONTACT.kakaoMap} target="_blank">다음 맵으로 보기</Button>
          </div>
          <p className="tl-contact-note">가맹문의 페이지로 이동하여 간략한 정보를 입력하시면 순차적으로 본사에서 유선 연락을 먼저 드립니다.</p>
          <div className="tl-contact-cta">
            <Button variant="solid" href={CONTACT.franchise} iconRight>가맹 문의하기</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function Home() {
  return (
    <React.Fragment>
      <Hero />
      <Oneday />
      <Esteem />
      <Franchise />
      <Promo />
      <Lounge />
      <Design />
      <Reviews />
      <Story />
      <Gallery />
      <ContactSection />
    </React.Fragment>
  );
}

Object.assign(window, { Home });