// Community / Content Houses — marked clearly as placeholder awaiting real photography

function Community() {
  return (
    <section id="community" className="relative py-40 md:py-48 overflow-hidden" data-screen-label="Community">
      <div className="max-w-[1600px] mx-auto px-6 md:px-10 mb-16">
        <div className="grid grid-cols-12 gap-8 items-end">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="08 / 09">Content Houses</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-tight leading-[0.95]" style={{ fontSize: "clamp(44px, 5.6vw, 96px)" }}>
              Show up. Film.<br/>
              <GradientText>Leave with a quarter of content.</GradientText>
            </h2>
          </div>
          <div className="col-span-12 md:col-span-4 md:col-start-9 flex flex-col gap-3">
            <p className="text-[#7a7a7a] font-light leading-relaxed text-[15px]">
              Quarterly group shoots in <span className="text-[#f0ece8]">Palm Beach</span> and <span className="text-[#f0ece8]">Los Angeles</span>. Pro photographers, other creators, collab content — built into the management, not an upsell.
            </p>
          </div>
        </div>
      </div>

      <div className="marquee-pause">
        <div className="overflow-hidden border-y border-white/[0.04]">
          <div className="marquee">
            {[
              "01-pool-shoot",
              "02-bts-gear",
              "03-creator-filming-creator",
              "04-wardrobe-rack",
              "05-modern-house-exterior",
              "06-rooftop-sunset",
              "07-drone-overhead-pool",
              "08-photographer-hands",
            ].concat([
              "01-pool-shoot",
              "02-bts-gear",
              "03-creator-filming-creator",
              "04-wardrobe-rack",
              "05-modern-house-exterior",
              "06-rooftop-sunset",
              "07-drone-overhead-pool",
              "08-photographer-hands",
            ]).map((slug, i) => (
              <div key={i} className="shrink-0 w-[340px] h-[220px] mx-1.5 overflow-hidden relative" style={{ borderRadius: 4 }}>
                <img src={`assets/content-house/${slug}.jpg`} alt="" className="absolute inset-0 w-full h-full object-cover" />
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="mt-16 max-w-[1600px] mx-auto px-6 md:px-10 grid grid-cols-1 md:grid-cols-3 gap-px bg-white/[0.04] border border-white/[0.04]">
        {[
          ["Studios, crew, meals", "Full production covered. Lighting, photographers, video, edit. You just show up rested."],
          ["Creators you'll vibe with", "We curate the room. Collab-ready, NDA-signed, good energy. Nothing awkward."],
          ["A quarter in a weekend", "Shoot once, post for three months. Edited and queued into your social calendar within a week."],
        ].map(([t, d], i) => (
          <div key={t} className="reveal bg-[#060606] p-8" style={{ transitionDelay: `${i*100}ms` }}>
            <span className="font-display text-[11px] tracking-[0.3em] text-[rgba(232,160,160,0.6)]">0{i+1}</span>
            <h3 className="mt-4 font-display text-[20px] font-semibold tracking-tight">{t}</h3>
            <p className="mt-3 text-[13px] text-[#7a7a7a] font-light leading-relaxed">{d}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

window.Community = Community;