// Sections - all major page sections
const { useState, useEffect, useRef } = React;

// Hook for scroll reveal
const useReveal = () => {
  const ref = useRef(null);
  useEffect(() => {
    const obs = new IntersectionObserver(
      (entries) => entries.forEach(e => e.isIntersecting && e.target.classList.add('in')),
      { threshold: 0.1 }
    );
    if (ref.current) {
      const items = ref.current.querySelectorAll('.reveal');
      items.forEach(i => obs.observe(i));
    }
    return () => obs.disconnect();
  }, []);
  return ref;
};

// ===== Hero =====
const Hero = ({ t, layout }) => {
  const P = window.PHOTOS || {};
  return (
    <section className={`hero hero-layout-${layout}`} id="home">
      <div className="hero-ambiance" style={{ backgroundImage: `url(${P.heroRoom})` }}></div>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-text reveal in">
            <div className="hero-eyebrow">
              <span className="hero-stars">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={13} />)}
              </span>
              {t.hero.eyebrow}
            </div>
            <h1>
              <span className="ln1">{t.hero.title1}</span>
              <span className="ln2">{t.hero.title2}</span>
            </h1>
            <p className="hero-desc">{t.hero.desc}</p>
            <div className="hero-offer-chip">
              <Icon name="sparkles" size={16} />
              <span><strong>{t.offer.chip}</strong></span>
            </div>
            <div className="hero-ctas">
              <a href="https://angel-shine.pages.dev" className="btn btn-primary btn-lg">
                {t.guarantee.cta} <Icon name="arrow" size={18} />
              </a>
              <a href="#services" className="btn btn-ghost btn-lg">
                {t.cta.learn}
              </a>
            </div>
            <div className="hero-microtrust">
              <span><Icon name="check" size={14} strokeWidth={2.4} /> {t.trust.guarantee}</span>
              <span><Icon name="clock" size={14} /> {t.cta.quote60}</span>
            </div>
          </div>
          <div className="hero-visual reveal in reveal-delay-2">
            <div className="hero-photo">
              <span className="glow"></span>
              <img src={window.IMG ? window.IMG.angela : "assets/angela-photo.png"} alt="Angela - Angel Shine Home Cleaning" />
            </div>
            <div className="hero-floating tag-review">
              <span className="rev-stars">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={12} />)}
              </span>
              <span className="rev-text">{t.trust.rating}</span>
            </div>
            <div className="hero-floating tag-offer">
              <span className="offer-big">15%</span>
              <span className="offer-small">{t.lang.current === 'PT' ? 'OFF 1ª limpeza' : 'OFF first clean'}</span>
            </div>
            <div className="hero-badge-name">
              <span className="bn-avatar"><img src={window.IMG ? window.IMG.angela : "assets/angela-photo.png"} alt="" /></span>
              <span><strong>Angela</strong><br/>{t.lang.current === 'PT' ? 'Sua faxineira' : 'Your cleaner'}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

const Sparkles = () => (
  <>
    <div className="sparkle-bg" style={{ top: '15%', left: '5%' }}><Icon name="sparkles" size={32} /></div>
    <div className="sparkle-bg" style={{ top: '60%', left: '48%' }}><Icon name="sparkles" size={20} /></div>
    <div className="sparkle-bg" style={{ top: '8%', right: '8%' }}><Icon name="sparkles" size={24} /></div>
  </>
);

// ===== About =====
const About = ({ t }) => {
  const ref = useReveal();
  const aboutValues = [
    { icon: 'shield', t: t.about.v1, d: t.about.v1d },
    { icon: 'sparkles', t: t.about.v2, d: t.about.v2d },
    { icon: 'heart', t: t.about.v3, d: t.about.v3d },
  ];
  return (
    <section className="about section-pad" id="about" ref={ref}>
      <div className="container">
        <div className="about-grid">
          <div className="about-text reveal">
            <div className="kicker">{t.about.role}</div>
            <h2>{t.about.kicker}</h2>
            <div className="role">★ ★ ★ ★ ★</div>
            <p>{t.about.p1}</p>
            <p>{t.about.p2}</p>
            <p>{t.about.p3}</p>
            <p style={{ color: 'var(--brand-deep)', fontStyle: 'italic', fontFamily: 'var(--serif)', fontSize: 18 }}>{t.about.p4}</p>
          </div>
          <div className="reveal reveal-delay-2">
            <div className="about-values">
              {aboutValues.map((v, i) => (
                <div key={i} className="about-value">
                  <div className="icon-circle"><Icon name={v.icon} size={24} /></div>
                  <h4>{v.t}</h4>
                  <p>{v.d}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== Services =====
const Services = ({ t }) => {
  const ref = useReveal();
  const icons = ['home', 'deep', 'move'];
  const P = window.PHOTOS || {};
  const photos = [P.svcRegular, P.svcDeep, P.svcMove];
  return (
    <section className="services section-pad" id="services" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{t.services.kicker}</div>
          <h2><span>{t.lang.current === 'PT' ? 'Limpeza para cada necessidade' : 'A clean for every need'}</span></h2>
          <p className="sub">{t.services.sub}</p>
        </div>
        <div className="services-grid">
          {t.services.list.map((s, i) => (
            <div key={i} className={`service-card reveal reveal-delay-${(i % 3) + 1}`}>
              <div className="service-photo" style={{ backgroundImage: `url(${photos[i]})` }}>
                <div className="service-icon"><Icon name={icons[i]} size={24} /></div>
              </div>
              <div className="service-body">
                <h3>{s.t}</h3>
                <p className="desc">{s.d}</p>
                <ul className="inc">
                  {s.inc.map((it, j) => (
                    <li key={j}><Icon name="check" size={14} strokeWidth={2.2} /> {it}</li>
                  ))}
                </ul>
                <a href="https://angel-shine.pages.dev" className="btn-link">{t.cta.book} <Icon name="arrow" size={14} /></a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Process =====
const Process = ({ t }) => {
  const ref = useReveal();
  return (
    <section className="process section-pad" id="process" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{t.process.kicker}</div>
          <h2>{t.process.sub}</h2>
        </div>
        <div className="process-grid">
          {t.process.steps.map((s, i) => (
            <div key={i} className={`process-step reveal reveal-delay-${i + 1}`}>
              <div className="process-num">{String(i + 1).padStart(2, '0')}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Why =====
const Why = ({ t }) => {
  const ref = useReveal();
  const icons = ['heart', 'clock', 'leaf', 'sparkles'];
  return (
    <section className="why section-pad" id="why" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">★ The Angel Shine difference</div>
          <h2>{t.why.kicker}</h2>
        </div>
        <div className="why-grid">
          {t.why.items.map((w, i) => (
            <div key={i} className={`why-item reveal reveal-delay-${i + 1}`}>
              <div className="icon-square"><Icon name={icons[i]} size={22} /></div>
              <h4>{w.t}</h4>
              <p>{w.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Gallery (before/after — real photo, honest dull→bright treatment) =====
const BAItem = ({ img, beforeLabel, afterLabel }) => {
  const [pos, setPos] = useState(50);
  const ref = useRef(null);
  const drag = useRef(false);

  const move = (clientX) => {
    if (!ref.current) return;
    const r = ref.current.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, ((clientX - r.left) / r.width) * 100));
    setPos(p);
  };

  return (
    <div className="ba-slider"
      ref={ref}
      onMouseDown={(e) => { drag.current = true; move(e.clientX); }}
      onMouseMove={(e) => drag.current && move(e.clientX)}
      onMouseUp={() => drag.current = false}
      onMouseLeave={() => drag.current = false}
      onTouchStart={(e) => { drag.current = true; move(e.touches[0].clientX); }}
      onTouchMove={(e) => drag.current && move(e.touches[0].clientX)}
      onTouchEnd={() => drag.current = false}
    >
      <div className="ba-img ba-before" style={{ backgroundImage: `url("${img}")` }}></div>
      <div className="ba-img after" style={{ backgroundImage: `url("${img}")`, clipPath: `inset(0 0 0 ${pos}%)` }}></div>
      <span className="ba-label before">{beforeLabel}</span>
      <span className="ba-label after">{afterLabel}</span>
      <div className="ba-divider" style={{ left: `${pos}%` }}></div>
      <div className="ba-handle" style={{ left: `${pos}%` }}>
        <Icon name="arrow" size={18} />
      </div>
    </div>
  );
};

const Gallery = ({ t }) => {
  const ref = useReveal();
  const beforeLabel = t.lang.current === 'PT' ? 'ANTES' : 'BEFORE';
  const afterLabel = t.lang.current === 'PT' ? 'DEPOIS' : 'AFTER';
  const P = window.PHOTOS || {};
  const items = [P.baLiving, P.baKitchen];
  return (
    <section className="gallery section-pad" id="gallery" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{t.lang.current === 'PT' ? 'Antes & Depois' : 'Before & After'}</div>
          <h2>{t.gallery.kicker}</h2>
          <p className="sub">{t.gallery.sub}</p>
        </div>
        <div className="gallery-grid">
          {items.map((img, i) => (
            <div key={i} className={`reveal reveal-delay-${i + 1}`}>
              <BAItem img={img} beforeLabel={beforeLabel} afterLabel={afterLabel} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Testimonials =====
const Testimonials = ({ t }) => {
  const ref = useReveal();
  return (
    <section className="testimonials section-pad" id="testimonials" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">★ ★ ★ ★ ★</div>
          <h2>{t.testimonials.kicker}</h2>
          <p className="sub">{t.testimonials.sub}</p>
        </div>
        <div className="testi-grid">
          {t.testimonials.items.map((it, i) => (
            <div key={i} className={`testi-card reveal reveal-delay-${(i % 2) + 1}`}>
              <div className="testi-stars">
                {[0,1,2,3,4].map(s => <Icon key={s} name="star" size={16} />)}
              </div>
              <p className="testi-quote">{it.q}</p>
              <div className="testi-author">
                <div className="testi-avatar">{it.a[0]}</div>
                <div>
                  <div className="name">{it.a}</div>
                  <div className="role">{it.r}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Areas =====
const Areas = ({ t }) => {
  const ref = useReveal();
  return (
    <section className="areas section-pad" id="areas" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">{t.lang.current === 'PT' ? 'Onde atendemos' : 'Where we serve'}</div>
          <h2>{t.areas.kicker}</h2>
          <p className="sub">{t.areas.sub}</p>
        </div>
        <div className="areas-wrap">
          <div className="areas-list reveal">
            {t.areas.list.map((a, i) => (
              <div key={i} className="area">
                <Icon name="pin" size={16} /> {a}
              </div>
            ))}
          </div>
          <div className="areas-map reveal reveal-delay-2">
            <div className="map-grid"></div>
            <div className="map-radius r2"></div>
            <div className="map-radius"></div>
            <div className="map-pin center"><Icon name="pin" size={48} strokeWidth={2} /></div>
          </div>
        </div>
      </div>
    </section>
  );
};

// ===== FAQ =====
const FAQ = ({ t }) => {
  const ref = useReveal();
  const [open, setOpen] = useState(0);
  return (
    <section className="faq section-pad" id="faq" ref={ref}>
      <div className="container">
        <div className="section-head reveal">
          <div className="kicker">FAQ</div>
          <h2>{t.faq.kicker}</h2>
        </div>
        <div className="faq-wrap reveal">
          {t.faq.items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="toggle"><Icon name="plus" size={16} strokeWidth={2.2} /></span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===== Contact =====
const Contact = ({ t }) => {
  const ref = useReveal();
  const [data, setData] = useState({ name: '', phone: '', email: '', service: '', message: '' });
  const [sent, setSent] = useState(false);
  const onChange = (k, v) => setData(d => ({ ...d, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 5000);
    setData({ name: '', phone: '', email: '', service: '', message: '' });
  };

  return (
    <section className="contact section-pad" id="contact" ref={ref}>
      <div className="container">
        <div className="contact-grid">
          <div className="contact-text reveal">
            <h2>
              {t.contact.kicker}
              <span className="h2-script">{t.contact.kicker2}</span>
            </h2>
            <div className="sub">{t.contact.sub}</div>
            <div className="contact-info">
              <a href="tel:1234567890" className="contact-row">
                <span className="icon-c"><Icon name="phone" size={18} /></span>
                <div><div className="lbl">{t.contact.callNow}</div><div className="val">(123) 456-7890</div></div>
              </a>
              <a href="mailto:email@example.com" className="contact-row">
                <span className="icon-c"><Icon name="mail" size={18} /></span>
                <div><div className="lbl">{t.contact.emailUs}</div><div className="val">email@example.com</div></div>
              </a>
              <div className="contact-row">
                <span className="icon-c"><Icon name="pin" size={18} /></span>
                <div><div className="lbl">{t.contact.location}</div><div className="val">Your City, State</div></div>
              </div>
              <div className="contact-row">
                <span className="icon-c"><Icon name="clock" size={18} /></span>
                <div><div className="lbl">{t.lang.current === 'PT' ? 'Horário' : 'Hours'}</div><div className="val">Mon–Sat · 8am–6pm</div></div>
              </div>
            </div>
          </div>
          <form className="contact-form reveal reveal-delay-2" onSubmit={submit}>
            <div className="form-title">{t.contact.formTitle}</div>
            <div className="field">
              <input id="f-name" type="text" placeholder=" " value={data.name} onChange={e => onChange('name', e.target.value)} required />
              <label htmlFor="f-name">{t.contact.name}</label>
            </div>
            <div className="field">
              <input id="f-phone" type="tel" placeholder=" " value={data.phone} onChange={e => onChange('phone', e.target.value)} required />
              <label htmlFor="f-phone">{t.contact.phone}</label>
            </div>
            <div className="field">
              <input id="f-email" type="email" placeholder=" " value={data.email} onChange={e => onChange('email', e.target.value)} />
              <label htmlFor="f-email">{t.contact.email}</label>
            </div>
            <div className={`field ${data.service ? 'has-value' : ''}`}>
              <select id="f-service" value={data.service} onChange={e => onChange('service', e.target.value)}>
                <option value=""></option>
                {t.services.list.map((s, i) => <option key={i} value={s.t}>{s.t}</option>)}
              </select>
              <label htmlFor="f-service">{t.contact.service}</label>
            </div>
            <div className="field">
              <textarea id="f-msg" placeholder=" " value={data.message} onChange={e => onChange('message', e.target.value)} />
              <label htmlFor="f-msg">{t.contact.message}</label>
            </div>
            <button type="submit" className="btn btn-primary">
              {t.contact.submit} <Icon name="heart" size={16} />
            </button>
            {sent && (
              <div className="success-toast">
                <Icon name="check" size={18} strokeWidth={2.4} />
                {t.contact.success}
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
};

// ===== Footer =====
const Footer = ({ t }) => (
  <footer className="footer">
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <LogoMark stacked={false} color="#fff" />
          <span className="tag">{t.footer.tagline}</span>
        </div>
        <div>
          <h5>{t.lang.current === 'PT' ? 'Navegação' : 'Navigate'}</h5>
          <ul>
            <li><a href="#home">{t.nav.home}</a></li>
            <li><a href="#about">{t.nav.about}</a></li>
            <li><a href="#services">{t.nav.services}</a></li>
            <li><a href="#contact">{t.nav.contact}</a></li>
          </ul>
        </div>
        <div>
          <h5>{t.lang.current === 'PT' ? 'Serviços' : 'Services'}</h5>
          <ul>
            {t.services.list.slice(0, 4).map((s, i) => <li key={i}><a href="#services">{s.t}</a></li>)}
          </ul>
        </div>
        <div>
          <h5>{t.lang.current === 'PT' ? 'Contato' : 'Contact'}</h5>
          <ul>
            <li><a href="tel:1234567890">(123) 456-7890</a></li>
            <li><a href="mailto:email@example.com">email@example.com</a></li>
            <li><a href="#">Your City, State</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© 2026 Angel Shine Home Cleaning LLC. {t.footer.rights}</div>
        <div className="footer-social">
          <a href="#"><Icon name="instagram" size={18} /></a>
          <a href="#"><Icon name="mail" size={18} /></a>
          <a href="#"><Icon name="phone" size={18} /></a>
        </div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Hero, About, Services, Process, Why, Gallery, Testimonials, Areas, FAQ, Contact, Footer, MobileStickyCTA, AnnouncementBar, TrustBar, GuaranteeBand });

// ===== Announcement Bar (15% off) =====
function AnnouncementBar({ t }) {
  const [open, setOpen] = useState(true);
  if (!open) return null;
  return (
    <div className="announce-bar">
      <div className="announce-inner">
        <span className="announce-spark"><Icon name="sparkles" size={15} /></span>
        <span className="announce-text">
          <strong>{t.offer.bar}</strong>
          <span className="announce-sub"> — {t.offer.barSub}</span>
        </span>
        <a href="https://angel-shine.pages.dev" className="announce-cta">{t.offer.claim} <Icon name="arrow" size={13} /></a>
      </div>
      <button className="announce-close" onClick={() => setOpen(false)} aria-label="Close">
        <Icon name="close" size={16} />
      </button>
    </div>
  );
}

// ===== Trust Bar (social proof strip) =====
function TrustBar({ t }) {
  const items = [
    { icon: 'star', label: t.trust.rating },
    { icon: 'heart', label: t.trust.families },
    { icon: 'clock', label: t.trust.years },
    { icon: 'shield', label: t.trust.guarantee },
  ];
  return (
    <div className="trust-bar">
      <div className="container">
        <div className="trust-row">
          {items.map((it, i) => (
            <div key={i} className="trust-item">
              <Icon name={it.icon} size={18} />
              <span>{it.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ===== Guarantee Band (mid-page conversion) =====
function GuaranteeBand({ t }) {
  const ref = useReveal();
  const P = window.PHOTOS || {};
  const points = [t.guarantee.point1, t.guarantee.point2, t.guarantee.point3];
  return (
    <section className="guarantee-band" ref={ref}>
      <div className="guarantee-bg" style={{ backgroundImage: `url(${P.guaranteeBg})` }}></div>
      <div className="container">
        <div className="guarantee-card reveal">
          <div className="guarantee-seal">
            <Icon name="shield" size={28} strokeWidth={1.6} />
            <span>100%</span>
          </div>
          <div className="kicker">{t.guarantee.kicker}</div>
          <h2>{t.guarantee.title} <span className="script">{t.guarantee.titleScript}</span></h2>
          <p>{t.guarantee.desc}</p>
          <ul className="guarantee-points">
            {points.map((p, i) => (
              <li key={i}><span className="gp-check"><Icon name="check" size={14} strokeWidth={2.6} /></span>{p}</li>
            ))}
          </ul>
          <a href="https://angel-shine.pages.dev" className="btn btn-primary btn-lg">{t.guarantee.cta} <Icon name="arrow" size={18} /></a>
        </div>
      </div>
    </section>
  );
}

// ===== Mobile Sticky CTA Bar =====
function MobileStickyCTA({ t }) {
  return (
    <div className="mobile-sticky-cta" role="navigation" aria-label="Quick contact">
      <a href="tel:+15551234567" className="sticky-call" aria-label={t.sticky?.call || "Call"}>
        <Icon name="phone" size={20} />
      </a>
      <a href="https://angel-shine.pages.dev" className="sticky-quote">
        <Icon name="sparkles" size={16} />
        {t.sticky?.quote || (t.nav?.contact || "Get a free quote")}
      </a>
    </div>
  );
}