/* global React */
const { useEffect, useRef, useState } = React;

// =================================================================
// §5 COMPARISON — full rewrite
// =================================================================
const COMPARE_ROWS = [
  { lab: "COST",              inhouse: "$80K+/yr salary + benefits", agency: "$3-8K/mo retainer + setup fees", us: "Performance-based · $0 if we miss 3X" },
  { lab: "SPEED TO LAUNCH",   inhouse: "Months to hire + train",     agency: "2-4 week onboarding",            us: "Live in 48 hours" },
  { lab: "FOLLOW-UP SPEED",   inhouse: "When staff has time",        agency: "1-3 day email replies",          us: "<30 seconds (Sophie AI)" },
  { lab: "GUARANTEE",         inhouse: "None",                       agency: "Usually none",                   us: "3X in 90 days or we work free" },
  { lab: "EXCLUSIVITY",       inhouse: "N/A",                        agency: "Takes 5+ direct competitors",    us: "1 business per market. Period." },
];

function Comparison() {
  const [visibleRows, setVisibleRows] = useState([]);
  const tableRef = useRef(null);

  useEffect(() => {
    const obs = new IntersectionObserver(entries => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          COMPARE_ROWS.forEach((_, i) => {
            setTimeout(() => {
              setVisibleRows(v => v.includes(i) ? v : [...v, i]);
            }, i * 120);
          });
          obs.disconnect();
        }
      });
    }, { threshold: 0.15 });
    if (tableRef.current) obs.observe(tableRef.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="sec compare-sec" id="compare">
      <div className="sec-inner">
        <div style={{ textAlign: "center" }}>
          <span className="eyebrow"><span className="dot" /> THE STUFF NO ONE WILL SHOW YOU</span>
          <h2 className="display" style={{ marginTop: 24 }}>
            Don't take our word for it.<br/><span className="it">This offer doesn't exist anywhere else.</span>
          </h2>
          <p className="lede" style={{ maxWidth: 56 + "ch", margin: "20px auto 0" }}>
            Most agencies hide this comparison. Here's why.
          </p>
        </div>

        <div className="compare-table v2" ref={tableRef}>
          <div className="compare-head">
            <div className="h"></div>
            <div className="h">In-house</div>
            <div className="h">Typical Agency</div>
            <div className="h us">Ad Scaling</div>
          </div>
          {COMPARE_ROWS.map((r, i) => (
            <div key={i} className={"compare-row" + (visibleRows.includes(i) ? " in" : "")}>
              <div className="c lab">{r.lab}</div>
              <div className="c bad">{r.inhouse}</div>
              <div className="c bad">{r.agency}</div>
              <div className="c us">{r.us}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =================================================================
// §6 MEET MOI
// =================================================================
function MeetMoi() {
  return (
    <section className="sec" id="moi">
      <div className="sec-inner">
        <div style={{ textAlign: "left" }}>
          <span className="eyebrow"><span className="dot" /> THE STORY</span>
        </div>
        <div className="moi-grid">
          <div className="moi-portrait">
            <img src="moi-portrait.png" alt="Moises Gurdian — Founder, Ad Scaling" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top', borderRadius: 'inherit' }} />
          </div>
          <div className="moi-copy">
            <h2 className="display">
              Built from the inside.<br/><span className="it">Refined for 8 years.</span>
            </h2>
            <div className="moi-pull">
              "We treat every account like our own company."
            </div>
            <div className="moi-bio">
              <p>Ad Scaling started 8 years ago after running media for an e-commerce brand and a chiropractic clinic. Same playbook worked in both — hyper-targeted ads, instant follow-up, transparent reporting.</p>
              <p>Eight years of refinement. <strong>381 clients. 40+ industries. $480M+ in revenue.</strong> Every campaign sharpens the system. Every client adds another loop to the playbook.</p>
              <p>Today a full team — media buyers, copywriters, video editors, AI engineers, and account leads — runs every account on the same standards. Same response times. Same transparency. No bait-and-switch. No junior hand-offs.</p>
              <p>The agency we wished existed when we started.</p>
            </div>
            <div className="moi-tiles">
              <div className="moi-tile">
                <div className="l">Founded</div>
                <div className="v">2018</div>
              </div>
              <div className="moi-tile">
                <div className="l">Based</div>
                <div className="v">Calgary, AB</div>
              </div>
              <div className="moi-tile">
                <div className="l">Track Record</div>
                <div className="v">381 clients</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Comparison, MeetMoi });