/* global React */
const { useState: useStateS, useEffect: useEffectS } = React;

function CompanySection() {
  return (
    <section id="company" className="section company" data-screen-label="Company">
      <div className="section-header">
        <div>
          <div className="index">02 · Company</div>
          <h2>A single team<br/>from concept <span className="italic-accent">to completion.</span></h2>
        </div>
        <div className="header-right">
          <p className="lede" style={{ margin: 0 }}>
            {window.COPY.companyLede}
          </p>
        </div>
      </div>

      <div className="company-grid">
        <div className="company-copy">
          <div className="quote">
            {window.COPY.companyQuote}
          </div>
          <p>{window.COPY.companyBody1}</p>
          <p>{window.COPY.companyBody2}</p>
        </div>

        <div
          className="company-image-stack"
          style={{ backgroundImage: "url(images/bathroom-hero.jpeg)" }}
        >
          <div className="badge">
            <span className="n">15+</span>
            <span className="lbl">Years of experience</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ServicesSection() {
  const services = window.SERVICES;
  return (
    <section id="services" className="section services" data-screen-label="Services">
      <div className="section-header">
        <div>
          <div className="index">04 · Services</div>
          <h2>Multiple practices, <span className="italic-accent">one roof.</span></h2>
        </div>
        <div className="header-right">
          <p className="lede" style={{ margin: 0 }}>
            {window.COPY.servicesLede}
          </p>
        </div>
      </div>

      <div className="services-list">
        {services.map(s => (
          <div key={s.num} className="service-row">
            <div className="num">{s.num}</div>
            <div className="body">
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="meta">
                {s.meta.map(m => <span key={m}>{m}</span>)}
              </div>
            </div>
            <div className="image" style={{ backgroundImage: `url(${s.image})` }} />
          </div>
        ))}
      </div>

      <div className="capabilities">
        <div className="label">In-haus capabilities</div>
        <div className="chips">
          <span className="chip">Licensed General Contractor</span>
          <span className="chip">Licensed Realtor</span>
          <span className="chip">Architect</span>
          <span className="chip">Interior Designer</span>
          <span className="chip">Project Manager</span>
          <span className="chip">Off-Market Sourcing</span>
        </div>
      </div>
    </section>
  );
}

function StatsBand() {
  return (
    <section className="stats" aria-label="By the numbers">
      <div className="stats-inner">
        <div className="stat">
          <span className="n">15<span className="u">+ yrs</span></span>
          <div className="lbl">Of experience</div>
          <div className="caption">Building across Miami-Dade, Broward, and Palm Beach.</div>
        </div>
        <div className="stat">
          <span className="n">100<span className="u">+</span></span>
          <div className="lbl">Projects delivered</div>
          <div className="caption">Custom homes, renovations, and investment plays.</div>
        </div>
        <div className="stat">
          <span className="n">250<span className="u">K sq ft</span></span>
          <div className="lbl">Built &amp; renovated</div>
          <div className="caption">Residential square footage since founding.</div>
        </div>
        <div className="stat">
          <span className="n">0<span className="u">%</span></span>
          <div className="lbl">Management fees</div>
          <div className="caption">For investor partners — hands-off, transparent returns.</div>
        </div>
      </div>
    </section>
  );
}

function TestimonialsSection() {
  const items = window.TESTIMONIALS;
  const [i, setI] = useStateS(0);
  const [fading, setFading] = useStateS(false);

  const go = (dir) => {
    setFading(true);
    setTimeout(() => {
      setI(prev => (prev + dir + items.length) % items.length);
      setFading(false);
    }, 220);
  };

  useEffectS(() => {
    const id = setInterval(() => go(1), 8000);
    return () => clearInterval(id);
  // eslint-disable-next-line
  }, []);

  const t = items[i];

  return (
    <section className="testimonials" aria-label="Testimonials">
      <div className="testimonials-inner">
        <div className="testimonial-stage">
          <div className="left">
            <div className="eyebrow"><span className="dot"/>05 · Testimonials</div>
            <h3>Clients who came back, and partners who kept investing.</h3>
            <div className="controls">
              <button aria-label="Previous" onClick={() => go(-1)}>
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M13 5H1M1 5L5 1M1 5L5 9" stroke="currentColor" strokeWidth="1.2"/></svg>
              </button>
              <button aria-label="Next" onClick={() => go(1)}>
                <svg width="14" height="10" viewBox="0 0 14 10" fill="none"><path d="M1 5H13M13 5L9 1M13 5L9 9" stroke="currentColor" strokeWidth="1.2"/></svg>
              </button>
            </div>
            <div className="count">{String(i+1).padStart(2,"0")} / {String(items.length).padStart(2,"0")}</div>
          </div>
          <div>
            <p className="testimonial-quote" style={{ opacity: fading ? 0 : 1 }}>
              "{t.quote}"
            </p>
            <div className="testimonial-attr" style={{ opacity: fading ? 0 : 1, transition: "opacity 300ms" }}>
              <div className="avatar">{t.avatar}</div>
              <div className="who">
                {t.who}
                <span>{t.role}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CtaSplit() {
  return (
    <section className="cta-split" aria-label="Who we work with">
      <div className="cta-panel">
        <div className="eyebrow"><span className="dot"/>For homeowners</div>
        <h3>Build or renovate your home — with one team, under one roof.</h3>
        <p className="cta-copy">
          High-touch, personalized service with transparent pricing tailored to your project scope and design vision. From first sketch to final walk-through.
        </p>
        <a href="#contact" className="btn btn-outline">Start a home project <span className="arrow"/></a>
      </div>
      <div className="cta-panel is-dark">
        <div className="eyebrow"><span className="dot" style={{ background: "var(--beige)" }}/>For investors</div>
        <h3>Hands-off, off-market deals — no management fees, no hidden costs.</h3>
        <p className="cta-copy">
          We source, build, and deliver. You invest with a single point of contact, quarterly reporting, and transparent net returns.
        </p>
        <a href="#contact" className="btn btn-outline-light">Explore investment <span className="arrow"/></a>
      </div>
    </section>
  );
}

Object.assign(window, { CompanySection, ServicesSection, StatsBand, TestimonialsSection, CtaSplit });