// BoltLabs sections — Brief v2 (Part 2)
const { useState: useState2, useEffect: useEffect2 } = React;
const { Reveal, RevealWords, useInView, CountUp } = window;

// ===== 3. PROOF =====
function Proof() {
  const [ref, inView] = useInView({ threshold: 0.2 });
  return (
    <section className="proof" id="proof" data-screen-label="03 Proof" ref={ref}>
      <div className="section-inner">
        <Reveal kind="fade-up">
          <div className="section-eyebrow" style={{ fontSize: "18px" }}>{t('proof.eyebrow')}</div>
        </Reveal>
        <h2 className="section-h2" style={{ fontWeight: "500" }}>
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('proof.h2.line1')}
          </RevealWords>
          <br />
          <RevealWords delay={460} stagger={60} kind="blur-up">
            <em style={{ fontWeight: "500", color: "rgb(25, 130, 254)" }}>{t('proof.h2.line2')}</em>
          </RevealWords>
        </h2>
        <Reveal delay={820} kind="fade-up">
          <p className="section-lede">{t('proof.lede')}

          </p>
        </Reveal>

        <div className="proof-hero">
          <Reveal delay={100} kind="mask-up" duration={1100}>
            <div className="proof-big">
              <div className="proof-big-val" style={{ fontWeight: "500" }}><CountUp to={3.2} decimals={1} trigger={inView} />{'\u00d7'}</div>
              <div className="proof-big-lbl">{t('proof.big.cvr')}</div>
            </div>
          </Reveal>
          <Reveal delay={250} kind="mask-up" duration={1100}>
            <div className="proof-big">
              <div className="proof-big-val" style={{ fontWeight: "500" }}>+<CountUp to={56} trigger={inView} />%</div>
              <div className="proof-big-lbl">{t('proof.big.sales')}</div>
            </div>
          </Reveal>

        </div>

        <div>
          <div className="proof-cards">
            <Reveal delay={0} kind="scale-up" y={36} duration={1000}>
              <div className="proof-card">
                <div className="pc-tag">{t('proof.card1.tag')}</div>
                <div className="pc-title">{t('proof.card1.title')}</div>
                <div className="pc-vis">
                  <div className="pc-bar">
                    <div className="pc-bar-l">{t('proof.card1.before')}</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-a" style={{ width: '37.6%' }}></div></div>
                    <div className="pc-bar-v">3.76%</div>
                  </div>
                  <div className="pc-bar">
                    <div className="pc-bar-l">{t('proof.card1.after')}</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-b" style={{ width: '86.9%' }}></div></div>
                    <div className="pc-bar-v">8.69%</div>
                  </div>
                </div>
                <div className="pc-foot">{t('proof.card1.foot')}{' '}<strong>{t('proof.card1.foot.val')}</strong>{' '}{t('proof.card1.foot.suffix')}</div>
              </div>
            </Reveal>

            <Reveal delay={140} kind="scale-up" y={36} duration={1000}>
              <div className="proof-card">
                <div className="pc-tag">{t('proof.card2.tag')}</div>
                <div className="pc-title">{t('proof.card2.title')}</div>
                <div className="pc-vis">
                  <div className="pc-bar">
                    <div className="pc-bar-l">{t('proof.card2.before')}</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-a" style={{ width: '31.5%' }}></div></div>
                    <div className="pc-bar-v">3.15%</div>
                  </div>
                  <div className="pc-bar">
                    <div className="pc-bar-l">{t('proof.card2.after')}</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-b" style={{ width: '100%' }}></div></div>
                    <div className="pc-bar-v">10.34%</div>
                  </div>
                </div>
                <div className="pc-foot">{t('proof.card2.foot')}{' '}<strong>{t('proof.card2.foot.val')}</strong>{' '}{t('proof.card2.foot.suffix')}</div>
              </div>
            </Reveal>

            <Reveal delay={280} kind="scale-up" y={36} duration={1000}>
              <div className="proof-card">
                <div className="pc-tag">{t('proof.card3.tag')}</div>
                <div className="pc-title">{t('proof.card3.title')}</div>
                <div className="pc-vis">
                  <div className="pc-bar">
                    <div className="pc-bar-l">3/1 ~ 3/15</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-a" style={{ width: '63.7%' }}></div></div>
                    <div className="pc-bar-v">{t('proof.card3.val')}</div>
                  </div>
                  <div className="pc-bar">
                    <div className="pc-bar-l">3/16 ~ 3/31</div>
                    <div className="pc-bar-track"><div className="pc-bar-fill pc-fill-b" style={{ width: '100%' }}></div></div>
                    <div className="pc-bar-v">{t('proof.card3.val2')}</div>
                  </div>
                </div>
                <div className="pc-foot">{t('proof.card3.foot')}{' '}<strong>+56%</strong></div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>);

}

// ===== 4. BRANDS =====
function Brands() {
  const brands = [
    {
      name: t('brand.leafin'),
      tagline: t('brands.leafin.tagline'),
      desc: t('brands.leafin.desc'),
      url: 'leaf-in.kr',
      bg: '#f0f0ec',
      visual: 'leafin'
    },
    {
      name: t('brand.babsang'),
      tagline: t('brands.babsang.tagline'),
      desc: t('brands.babsang.desc'),
      url: 'aboutbabsang.com',
      bg: '#ebebe6',
      visual: 'babsang'
    }];

  return (
    <section className="brands" id="brands" data-screen-label="04 Brands">
      <div className="section-inner">
        <Reveal kind="fade-up">
          <div className="section-eyebrow" style={{ fontSize: "18px" }}>{t('brands.eyebrow')}</div>
        </Reveal>
        <h2 className="section-h2" style={{ fontWeight: "500", color: "rgb(25, 130, 254)" }}>
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('brands.h2.line1')}
          </RevealWords>
          <br />
          <RevealWords delay={420} stagger={60} kind="blur-up">
            <em style={{ fontWeight: "500" }}>{t('brands.h2.line2')}</em>
          </RevealWords>
        </h2>
        <Reveal delay={780} kind="fade-up">
          <p className="section-lede">{t('brands.lede.line1')}
            {' '}{t('brands.lede.line2')}

          </p>
        </Reveal>
        <div className="brand-grid">
          {brands.map((b, i) =>
            <Reveal key={b.name} delay={i * 180} kind="slide-left" y={48} duration={1000}>
              <div className="brand-card" style={{ background: b.bg }}>
                <div className="brand-visual">
                  {b.visual === 'leafin' ? <LeafinVisual /> : <BabsangVisual />}
                </div>
                <div className="brand-meta">
                  <div className="brand-tag" style={{ fontSize: "14px", lineHeight: "1" }}>{b.tagline}</div>
                  <h3 className="brand-name">{b.name}</h3>
                  <p className="brand-desc" style={{ fontSize: "17px" }}>{b.desc}</p>
                  <a href={`https://${b.url}`} target="_blank" className="brand-link">
                    {b.url} {'\u2192'}
                  </a>
                </div>
              </div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function LeafinVisual() {
  return (
    <div className="visual-placeholder">
      <img src={window.__resources?.leafinImg || "assets/leafin.png"} alt="\uB9AC\uD540 LEAFIN" className="brand-visual-img" />
    </div>);

}
function BabsangVisual() {
  return (
    <div className="visual-placeholder">
      <img src={window.__resources?.babsangImg || "assets/babsang.avif"} alt="\uBC25\uC0C1\uC5D0\uB300\uD55C" className="brand-visual-img" />
    </div>);

}

// ===== 5. PRICE =====
function Price() {
  return (
    <section className="price" id="price" data-screen-label="05 Price">
      <div className="section-inner">
        <Reveal kind="fade-up">
          <div className="section-eyebrow" style={{ fontSize: "18px" }}>{t('price.eyebrow')}</div>
        </Reveal>
        <h2 className="section-h2" style={{ fontWeight: "500", color: "rgb(0, 0, 0)" }}>
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('price.h2.line1')}
          </RevealWords>
          <br />
          <RevealWords delay={520} stagger={60} kind="blur-up">
            <em style={{ fontWeight: "500", color: "rgb(25, 130, 254)" }}>{t('price.h2.line2')}</em>
          </RevealWords>
        </h2>
        <Reveal delay={1000} kind="fade-up">
          <p className="section-lede">{t('price.lede')}

          </p>
        </Reveal>
        <div className="price-card-wrap">
          <Reveal delay={100} kind="scale-up" y={48} duration={1100}>
            <div className="price-card">
              <div className="pp-badge" style={{ fontSize: "15px" }}>{t('price.badge.patent')}</div>
              <div className="pp-h">
                <div>
                  <div className="pp-name">{t('price.name.boltreview')}</div>
                  <div className="pp-sub" style={{ fontSize: "17px" }}>{t('price.sub.boltreview')}</div>
                </div>
                <div className="pp-price">
                  <span className="pp-currency">{'\u20A9'}</span>
                  <span className="pp-num">0</span>
                  <span className="pp-period">{t('price.period')}</span>
                </div>
              </div>
              <div className="pp-compare">
                <span className="pp-strike" style={{ color: "rgb(250, 3, 3)" }}>{t('price.compare.others')}</span>
                <span className="pp-save">{t('price.compare.free')}</span>
              </div>
              <div className="pp-divider"></div>
              <div className="pp-features">
                <div className="pp-fcol">
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.match')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.sort')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.manage')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.widget')}</div>
                </div>
                <div className="pp-fcol">
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.noti')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.ab')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.reply')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.api')}</div>
                </div>
              </div>
              <div className="pp-divider"></div>
              <div className="pp-patent">
                <span className="pp-patent-icon">{'\u2295'}</span>
                <div>
                  <div className="pp-patent-h">{t('price.patent.title')}</div>
                  <div className="pp-patent-d">{t('price.patent.desc')}</div>
                </div>
              </div>
            </div>
          </Reveal>
          <Reveal delay={260} kind="scale-up" y={48} duration={1100}>
            <div className="price-card is-soon">
              <div className="pp-badge is-soon" style={{ fontSize: "15px", color: "rgb(247, 131, 24)" }}>{t('price.badge.soon')}</div>
              <div className="pp-h">
                <div>
                  <div className="pp-name">{t('price.name.crm')}</div>
                  <div className="pp-sub" style={{ fontSize: "17px" }}>{t('price.sub.crm')}</div>
                </div>
                <div className="pp-price">
                  <span className="pp-currency">{'\u20A9'}</span>
                  <span className="pp-num">0</span>
                  <span className="pp-period">{t('price.period')}</span>
                </div>
              </div>
              <div className="pp-compare">
                <span className="pp-strike" style={{ color: "rgb(250, 3, 3)" }}>{t('price.compare.others2')}</span>
                <span className="pp-save">{t('price.compare.free')}</span>
              </div>
              <div className="pp-divider"></div>
              <div className="pp-features">
                <div className="pp-fcol">
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.segment')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.retarget')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.messaging')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.churn')}</div>
                </div>
                <div className="pp-fcol">
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.rfm')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.coupon')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.data')}</div>
                  <div className="pp-feat"><span className="pp-check">{'\u2713'}</span>{t('price.feat.platform')}</div>
                </div>
              </div>
              <div className="pp-divider"></div>
              <div className="pp-patent">
                <span className="pp-patent-icon">{'\u25F7'}</span>
                <div>
                  <div className="pp-patent-h">{t('price.soon.title')}</div>
                  <div className="pp-patent-d">{t('price.soon.desc')}</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

// ===== 6. USE CASES =====
function Beta() {
  const cases = [
    {
      brand: t('beta.case1.brand'),
      desc: t('beta.case1.desc'),
      person: t('beta.case1.person'),
      role: 'CEO',
      bg: '#1747c8',
      img: 'assets/case-olivazumo.jpg',
      url: 'https://olivazumo.com/'
    },
    {
      brand: 'OKO101',
      desc: t('beta.case2.desc'),
      person: t('beta.case2.person'),
      role: 'CEO',
      bg: '#f3f3f0',
      img: 'assets/case-oko101.jpg',
      url: 'https://oko101.com/'
    },
    {
      brand: t('beta.case3.brand'),
      desc: t('beta.case3.desc'),
      person: t('beta.case3.person'),
      role: 'CMO',
      bg: '#e8c9a8',
      img: 'assets/case-artmont.jpg',
      url: 'https://artmont.co.kr/'
    }];


  return (
    <section className="usecases" id="beta" data-screen-label="06 Use Cases">
      <div className="section-inner">
        <Reveal kind="fade-up">
          <div className="section-eyebrow">CASE STUDIES</div>
        </Reveal>
        <h2 className="section-h2" style={{ textAlign: 'center', marginBottom: '64px' }}>
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('beta.h2')}
          </RevealWords>
        </h2>
        <div className="uc-list">
          {cases.map((c, i) =>

            <Reveal key={i} delay={i * 120} kind="fade-up" y={32} duration={800}>
              <div className="uc-row">
                <div className="uc-thumb" style={{ background: c.bg }}>
                  {c.img && <a href={c.url} target="_blank"><img src={c.img} alt={c.brand} /></a>}
                  <div className="uc-thumb-label">{c.brand}</div>
                </div>
                <div className="uc-body">
                  <a href={c.url} target="_blank"><h3 className="uc-brand">{c.brand}</h3></a>
                  <p className="uc-desc">{c.desc}</p>
                  <div className="uc-person">
                    <span className="uc-name">{c.person}</span>
                    <span className="uc-role">{c.role}</span>
                  </div>
                </div>
              </div>
            </Reveal>

          )}
        </div>
      </div>
    </section>);

}

// ===== 7. CTA =====
function FinalCTA() {
  return (
    <section className="cta-section" id="cta" data-screen-label="07 CTA">
      <div className="cta-inner">
        <Reveal kind="fade-up">
          <div className="cta-eyebrow" style={{ fontSize: "19px" }}>{t('cta.eyebrow')}</div>
        </Reveal>
        <h2 className="cta-h2">
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('cta.h2.line1')}
          </RevealWords>
          <br />
          <RevealWords delay={620} stagger={60} kind="blur-up">
            {t('cta.h2.line2')}
          </RevealWords>
        </h2>
        <Reveal delay={1100} kind="fade-up">
          <p className="cta-lede">{t('cta.lede')}

          </p>
        </Reveal>
        <Reveal delay={1260} kind="scale-up" y={20}>
          <div className="cta-buttons">
            <a href="https://boltlabs.kr/index.html" target="_blank" className="cta-btn-primary">
              {t('cta.btn.start')}
            </a>
            <a href="about.html" className="cta-btn-ghost">
              {t('cta.btn.about')}
            </a>
          </div>
        </Reveal>
      </div>
    </section>);

}

// ===== 8. COMPANY + FOOTER =====
function Company() {
  return (
    <section className="company" id="company" data-screen-label="08 Company">
      <div className="section-inner">
        <Reveal kind="fade-up">
          <div className="section-eyebrow">Company</div>
        </Reveal>
        <h2 className="section-h2 section-h2--small">
          <RevealWords delay={120} stagger={60} kind="blur-up">
            {t('company.h2.line1')}
          </RevealWords>
          <br />
          <RevealWords delay={520} stagger={60} kind="blur-up">
            {t('company.h2.line2')}
          </RevealWords>
        </h2>
        <Reveal delay={1100} kind="scale-up" duration={1100}>
          <div className="company-slogan">
            <span className="cs-quote">{'\u201C'}</span>
            <span className="cs-text">{t('company.slogan')}</span>
            <span className="cs-quote">{'\u201D'}</span>
          </div>
        </Reveal>
        <div className="company-info">
          <Reveal delay={100} kind="slide-left" y={32} duration={900}>
            <div className="ci-block">
              <div className="ci-h">{t('company.label.name')}</div>
              <div className="ci-v">{t('company.val.name')}</div>
            </div>
          </Reveal>
          <Reveal delay={180} kind="slide-left" y={32} duration={900}>
            <div className="ci-block">
              <div className="ci-h">{t('company.label.ceo')}</div>
              <div className="ci-v">{t('person.kwon')}</div>
            </div>
          </Reveal>
          <Reveal delay={260} kind="slide-left" y={32} duration={900}>
            <div className="ci-block">
              <div className="ci-h">{t('company.label.brn')}</div>
              <div className="ci-v">225-81-29978</div>
            </div>
          </Reveal>
          <Reveal delay={340} kind="slide-left" y={32} duration={900}>
            <div className="ci-block">
              <div className="ci-h">{t('company.label.addr')}</div>
              <div className="ci-v">{t('company.val.addr')}</div>
            </div>
          </Reveal>
          <Reveal delay={420} kind="slide-left" y={32} duration={900}>
            <div className="ci-block">
              <div className="ci-h">{t('company.label.tel')}</div>
              <div className="ci-v">02-6925-2539</div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>);

}

function Footer() {
  const addrLines = t('footer.addr').split('\n');
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-col footer-col-brand">
          <div className="footer-logo">
            <img src={window.__resources?.logoImg || "assets/boltlabs-logo.png"} alt="BoltLabs" className="footer-logo-img" />
          </div>
          <p className="footer-mission">{t('footer.mission')}</p>
        </div>
        <div className="footer-col">
          <div className="footer-h">{t('footer.h.service')}</div>
          <a href="https://boltlabs.kr/index.html" target="_blank">{t('footer.link.boltreview')}</a>
          <a href="https://leaf-in.kr" target="_blank">{t('brand.leafin')}</a>
          <a href="https://aboutbabsang.com" target="_blank">{t('brand.babsang')}</a>
        </div>
        <div className="footer-col">
          <div className="footer-h">{t('footer.h.company')}</div>
          <a href="about.html">{t('footer.link.about')}</a>
          <a href="about.html#team">{t('footer.link.team')}</a>
          <a href="about.html#contact">Contact</a>
        </div>
        <div className="footer-col footer-col-info">
          <div className="footer-h">Contact</div>
          <p className="footer-addr">
            {addrLines.map((line, i) => <React.Fragment key={i}>{line}{i < addrLines.length - 1 && <br />}</React.Fragment>)}
          </p>
        </div>
      </div>
      <div className="footer-bottom">
        <span>{'\u00A9'} 2026 BoltLabs Corp. All rights reserved.</span>
        <div className="footer-links">
          <a href="#">{t('footer.terms')}</a>
          <a href="#">{t('footer.privacy')}</a>
        </div>
      </div>
    </footer>);

}

window.Proof = Proof;
window.Brands = Brands;
window.Price = Price;
window.Beta = Beta;
window.FinalCTA = FinalCTA;
window.Company = Company;
window.Footer = Footer;