// About (Who we are) + Why Palm, honestly — two sections in one file.

function About() {
  const ref = React.useRef(null);
  const p = useSectionProgress(ref);
  const hl = (start, end) => {
    const t = Math.max(0, Math.min(1, (p - start) / (end - start)));
    return { opacity: 0.3 + t * 0.7, color: `rgba(240, 236, 232, ${0.3 + t*0.7})` };
  };

  return (
    <section ref={ref} id="about" className="relative py-40 md:py-56" data-screen-label="About">
      <div className="absolute right-0 top-1/4 w-[600px] h-[600px] rounded-full bg-[rgba(232,160,160,0.02)] blur-[180px] pointer-events-none"></div>
      <div className="max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8">
          <aside className="col-span-12 md:col-span-3 md:sticky md:top-28 self-start">
            <SecLabel num="03 / 09">Who We Are</SecLabel>
            <p className="mt-6 font-display text-[22px] font-medium leading-tight max-w-xs">
              <GradientText>Palm Beach. L.A.</GradientText><br/>
              <span className="text-[#7a7a7a] font-light italic">— Not a faceless agency.</span>
            </p>
            <div className="mt-8 h-px w-16 bg-[rgba(232,160,160,0.3)]"></div>
            <p className="mt-6 text-[11px] tracking-[0.2em] uppercase text-white/25">Est. 2022</p>
          </aside>

          <div className="col-span-12 md:col-span-9">
            <h2 className="font-display font-semibold tracking-tight leading-[0.96] mb-16" style={{ fontSize: "clamp(36px, 4.6vw, 76px)" }}>
              Who's actually<br/><GradientText>behind this.</GradientText>
            </h2>

            <div className="font-display text-[#7a7a7a] font-light leading-[1.25] tracking-[-0.02em] max-w-[900px]" style={{ fontSize: "clamp(20px, 2.3vw, 34px)" }}>
              <p style={hl(0.05, 0.35)}>
                Palm started because we watched too many creators get burned by agencies that overpromised, underdelivered, and{" "}
                <span className="italic text-[#C47A7A]">disappeared the moment something went wrong.</span>
              </p>
              <div className="h-8"></div>
              <p style={hl(0.2, 0.55)}>
                We built the team we wished existed — small enough that <span className="text-[#f0ece8]">you know everyone working on your page</span>, big enough to actually move the needle.
              </p>
              <div className="h-8"></div>
              <p style={hl(0.4, 0.75)}>
                Every creator we sign is a decision. We keep a <span className="text-[#f0ece8]">curated roster</span> on purpose — attention doesn't scale, and we'd rather go deep with a few than spread thin across everyone. Because <span className="text-[#E8A0A0] italic">if you win, we win.</span> That's the whole model.
              </p>
            </div>

            <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-px bg-white/[0.04] border border-white/[0.04]">
              {[
                ["Palm Beach", "HQ"],
                ["Los Angeles", "Studio"],
                ["Est. 2022", "Founded"],
                ["Selective", "Roster"],
              ].map(([v, l]) => (
                <div key={l} className="bg-[#060606] p-6 md:p-8">
                  <div className="font-display text-[18px] md:text-[22px] font-semibold tracking-tight">{v}</div>
                  <div className="mt-2 text-[10px] tracking-[0.3em] uppercase text-white/30">{l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// Why Palm, honestly — three cards
function WhyDifferent() {
  const cards = [
    { n: "01", t: "We invest in our creators",
      d: "Most agencies chase volume — sign everyone, hope 20% stick. We do the opposite. Smaller roster, higher attention, longer relationships. We put real time, money, and strategy into every creator on the roster. If we can't genuinely help you, we'll tell you.",
      k: "Selective Roster" },
    { n: "02", t: "AI baked in. Marketing on us.",
      d: "We use AI across the whole business. Chat assist, content scoring, posting, plus our supplemental cloning tech for social-only marketing. Most agencies charge extra for growth. We don't. If we don't help you grow, we don't grow either. The math works for both of us.",
      k: "Marketing Included" },
    { n: "03", t: "We don't hide anything",
      d: "Real commission structure, no hidden fees, no mystery about what your team is doing. Weekly calls. Monthly recaps. If it's not working, we say it first.",
      k: "Full Transparency" },
  ];

  return (
    <section id="trust" className="relative py-40 md:py-48" data-screen-label="Why Palm">
      <div className="max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8 mb-20">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="04 / 09">Why Palm</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95]" style={{ fontSize: "clamp(44px, 5.4vw, 88px)" }}>
              Why Palm, <GradientText>honestly.</GradientText>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9 self-end">
            <p className="text-[#7a7a7a] font-light leading-relaxed max-w-md text-[15px]">
              Three things most agencies won't tell you. <span className="text-[#f0ece8]">Ask them these questions on your next call.</span>
            </p>
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[0.04] border border-white/[0.04]">
          {cards.map((c, i) => (
            <div key={c.n} className="reveal bg-[#060606] p-10 md:p-12 hover:bg-[rgba(232,160,160,0.02)] transition-colors duration-500 group" style={{ transitionDelay: `${i*80}ms` }}>
              <div className="flex items-start justify-between mb-10">
                <span className="font-display text-[72px] md:text-[88px] font-semibold tracking-tight leading-none text-[rgba(232,160,160,0.15)] group-hover:text-[rgba(232,160,160,0.35)] transition-colors duration-500">{c.n}</span>
                <span className="mt-4 text-[9px] tracking-[0.3em] uppercase text-white/30">{c.k}</span>
              </div>
              <h3 className="font-display text-[26px] md:text-[30px] font-semibold tracking-tight leading-[1.1] pb-6 border-b border-white/[0.06]">{c.t}</h3>
              <p className="mt-6 text-[14px] text-[#7a7a7a] font-light leading-relaxed">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.About = About;
window.WhyDifferent = WhyDifferent;
// Keep old export alive as alias so any leftover references still work
window.Reality = WhyDifferent;