/* eslint-disable */
const { useState, useEffect, useRef } = React;

// ============================================================================
// TWEAKABLE DEFAULTS
// ============================================================================
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentColor": "#F26522",
  "navy": "#1B2A5B",
  "heroVariant": "editorial",
  "showTicker": true,
  "ctaPhone": "+62 812 5259 4443",
  "ctaLabel": "Konsultasi via WhatsApp",
  "heroEyebrow": "JASA PEMBUATAN LAPANGAN MINI SOCCER",
  "heroHeadline": "Lapangan mini soccer berstandar FIFA, dibangun untuk iklim tropis."
}/*EDITMODE-END*/;

// ============================================================================
// MOBILE HOOK
// ============================================================================
function useIsMobile() {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  useEffect(() => {
    const handler = () => setIsMobile(window.innerWidth < 768);
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);
  return isMobile;
}

// ============================================================================
// SMALL ATOMS
// ============================================================================
const Pill = ({ children, tone = "navy" }) => {
  const styles = {
    navy: { bg: "rgba(27,42,91,0.08)", fg: "#1B2A5B", bd: "rgba(27,42,91,0.18)" },
    orange: { bg: "rgba(242,101,34,0.10)", fg: "#C24E12", bd: "rgba(242,101,34,0.28)" },
    green: { bg: "rgba(43,168,74,0.10)", fg: "#1F7A36", bd: "rgba(43,168,74,0.28)" },
    dark: { bg: "rgba(255,255,255,0.06)", fg: "#fff", bd: "rgba(255,255,255,0.18)" },
  }[tone];
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "6px 12px", borderRadius: 999,
      background: styles.bg, color: styles.fg,
      border: `1px solid ${styles.bd}`,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase",
      fontWeight: 600,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: "currentColor" }} />
      {children}
    </span>
  );
};

const Arrow = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10m0 0L8.5 3.5M13 8l-4.5 4.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);

const LogoMark = ({ size = 36, color = "#F26522" }) => (
  <svg width={size} height={size * 0.78} viewBox="0 0 100 78" fill="none" style={{ display: "block" }}>
    <path d="M5 70 C 25 35, 55 12, 95 5 C 75 18, 55 38, 38 70 Z" fill={color}/>
  </svg>
);

const LogoFull = ({ light = false }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
    <LogoMark size={32} color="#F26522" />
    <div style={{ display: "flex", flexDirection: "column", lineHeight: 1 }}>
      <span style={{
        fontFamily: "'Barlow Condensed', sans-serif",
        fontWeight: 800, fontSize: 24, fontStyle: "italic",
        color: light ? "#fff" : "#1B2A5B", letterSpacing: "-0.01em",
      }}>
        Raga<span style={{ color: "#F26522" }}>Sport</span>
      </span>
      <span style={{
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 8, letterSpacing: "0.24em", marginTop: 2,
        color: light ? "rgba(255,255,255,0.6)" : "rgba(27,42,91,0.6)",
        fontWeight: 600,
      }}>
        HEALTHIER, HAPPIER
      </span>
    </div>
  </div>
);

const WA_LINK = "https://api.whatsapp.com/send?phone=6281252594443&text=Saya%20memerlukan%20informasi%20tentang%20Lapangan%2C%20apakah%20bisa%20dibantu%3F";

// ============================================================================
// TICKER
// ============================================================================
function Ticker() {
  const items = [
    "FIFA QUALITY PRO TURF", "★", "GARANSI INSTALASI", "★",
    "DESAIN 3D & VALUE ENGINEERING", "★", "200+ PROYEK TERSELESAIKAN", "★",
    "TROPICAL CLIMATE SPECIALIST", "★", "RAB TRANSPARAN", "★",
  ];
  return (
    <div style={{
      background: "#1B2A5B", color: "#fff",
      borderTop: "1px solid rgba(255,255,255,0.08)",
      borderBottom: "1px solid rgba(255,255,255,0.08)",
      overflow: "hidden", padding: "14px 0",
    }}>
      <div style={{ display: "flex", whiteSpace: "nowrap", animation: "tickerScroll 40s linear infinite" }}>
        {[...items, ...items, ...items].map((t, i) => (
          <span key={i} style={{
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 12, letterSpacing: "0.16em", fontWeight: 600,
            padding: "0 28px",
            color: t === "★" ? "#F26522" : "rgba(255,255,255,0.85)",
          }}>{t}</span>
        ))}
      </div>
    </div>
  );
}

// ============================================================================
// HERO
// ============================================================================
function Hero({ tweaks }) {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: "#FAF7F2", position: "relative", overflow: "hidden" }}>
      <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%", opacity: 0.05, pointerEvents: "none" }} preserveAspectRatio="none" viewBox="0 0 1320 800">
        <line x1="660" y1="0" x2="660" y2="800" stroke="#1B2A5B" strokeWidth="2"/>
        <circle cx="660" cy="400" r="120" stroke="#1B2A5B" strokeWidth="2" fill="none"/>
        <rect x="0" y="280" width="180" height="240" stroke="#1B2A5B" strokeWidth="2" fill="none"/>
        <rect x="1140" y="280" width="180" height="240" stroke="#1B2A5B" strokeWidth="2" fill="none"/>
      </svg>

      <div style={{ maxWidth: 1320, margin: "0 auto", padding: isMobile ? "48px 20px 40px" : "72px 32px 56px", position: "relative" }}>
        <div style={{
          display: "flex", alignItems: isMobile ? "flex-start" : "center",
          flexDirection: isMobile ? "column" : "row",
          justifyContent: "space-between", gap: 12, marginBottom: isMobile ? 28 : 40,
        }}>
          <Pill tone="orange">{tweaks.heroEyebrow}</Pill>
          {!isMobile && (
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: "rgba(15,20,36,0.5)", letterSpacing: "0.12em" }}>
              KEDIRI ↔ JAKARTA ↔ NUSANTARA ↔ SELURUH INDONESIA
            </div>
          )}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.15fr 1fr", gap: isMobile ? 32 : 56, alignItems: "stretch" }}>
          {/* LEFT */}
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
            <div>
              <h1 style={{
                fontFamily: "'Barlow Condensed', sans-serif",
                fontWeight: 700, fontStyle: "italic",
                fontSize: isMobile ? "clamp(40px, 11vw, 64px)" : "clamp(56px, 7vw, 104px)",
                lineHeight: 0.95, letterSpacing: "-0.02em", color: "#0F1424", margin: 0,
              }}>
                Bangun lapangan<br/>
                <span style={{ color: "#1B2A5B" }}>mini soccer </span>
                <span style={{ color: "#F26522" }}>berstandar FIFA</span><br/>
                <span style={{ fontStyle: "normal", fontWeight: 500, color: "#0F1424" }}>tahan iklim tropis.</span>
              </h1>
              <p style={{
                fontFamily: "Inter, sans-serif", fontSize: isMobile ? 15 : 18, lineHeight: 1.55,
                color: "rgba(15,20,36,0.75)", maxWidth: 560, marginTop: 24,
              }}>
                Dari survei lahan, konsep 3D, hingga grooming pasca-instalasi —
                RagaSport mendesain ekosistem bermain yang awet, efisien, dan
                diminati komunitas. Kontraktor lapangan olahraga sejak 2011.
              </p>
            </div>

            <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 20 }}>
              <div style={{ display: "flex", gap: 12, flexDirection: isMobile ? "column" : "row" }}>
                <a href={WA_LINK} target="_blank" rel="noreferrer" style={{
                  background: "#F26522", color: "#fff", padding: "16px 24px", borderRadius: 4,
                  fontFamily: "Inter, sans-serif", fontSize: 15, fontWeight: 600,
                  textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                  boxShadow: "0 8px 20px rgba(242,101,34,0.28)",
                }}>
                  {tweaks.ctaLabel} <Arrow size={16} />
                </a>
                <a href="#proses" style={{
                  background: "transparent", color: "#1B2A5B", padding: "16px 24px", borderRadius: 4,
                  fontFamily: "Inter, sans-serif", fontSize: 15, fontWeight: 600,
                  textDecoration: "none", border: "1.5px solid rgba(27,42,91,0.25)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                }}>
                  Lihat proses kerja
                </a>
              </div>
              <div style={{ display: "flex", gap: 20, alignItems: "center", flexWrap: "wrap", paddingTop: 16, borderTop: "1px solid rgba(15,20,36,0.1)" }}>
                <div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "rgba(15,20,36,0.5)", fontWeight: 600 }}>RESPON CEPAT</div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, color: "#0F1424", marginTop: 4, fontSize: isMobile ? 13 : 15 }}>{tweaks.ctaPhone}</div>
                </div>
                <div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "rgba(15,20,36,0.5)", fontWeight: 600 }}>EMAIL</div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, color: "#0F1424", marginTop: 4, fontSize: isMobile ? 13 : 15 }}>contact@ragasport.co.id</div>
                </div>
              </div>
            </div>
          </div>

          {/* RIGHT */}
          <div style={{ position: "relative", minHeight: isMobile ? 260 : 560 }}>
            <div style={{
              position: isMobile ? "relative" : "absolute", inset: isMobile ? "auto" : 0,
              height: isMobile ? 260 : "100%",
              borderRadius: 6, overflow: "hidden", background: "#0F1424",
            }}>
              <img src="assets/field-hero.jpg" alt="Lapangan mini soccer" style={{ width: "100%", height: "100%", objectFit: "cover" }}/>
              <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(15,20,36,0.55) 100%)" }}/>
              <div style={{ position: "absolute", left: 16, bottom: 16 }}>
                <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "rgba(255,255,255,0.7)", fontWeight: 600, display: "block" }}>PROJECT 087 — KEDIRI HIGHLAND</span>
                <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: isMobile ? 15 : 22, color: "#fff" }}>40 × 20 m · synthetic turf · FIFA Quality</span>
              </div>
            </div>

            {/* Mobile: inline stats */}
            {isMobile && (
              <div style={{ display: "flex", gap: 12, marginTop: 12 }}>
                <div style={{ flex: 1, background: "#0F1424", color: "#fff", padding: "16px 18px", borderRadius: 4 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.16em", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>SEJAK 2011</div>
                  <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: 40, lineHeight: 0.95, marginTop: 4 }}>200<span style={{ color: "#F26522" }}>+</span></div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>fasilitas terselesaikan</div>
                </div>
                <div style={{ flex: 1, background: "#fff", padding: "16px 18px", borderRadius: 4, border: "1px solid rgba(15,20,36,0.08)" }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }}>
                    <span style={{ width: 7, height: 7, borderRadius: 999, background: "#2BA84A", boxShadow: "0 0 0 3px rgba(43,168,74,0.18)" }}/>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.12em", fontWeight: 600, color: "rgba(15,20,36,0.5)" }}>ONLINE</span>
                  </div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.5, fontWeight: 500 }}>Tim survei siap kunjungan ke lokasi Anda.</div>
                </div>
              </div>
            )}

            {/* Desktop: floating cards */}
            {!isMobile && (
              <>
                <div style={{ position: "absolute", left: -28, top: 36, background: "#0F1424", color: "#fff", padding: "22px 26px", borderRadius: 4, boxShadow: "0 16px 40px rgba(15,20,36,0.25)", minWidth: 200 }}>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", color: "rgba(255,255,255,0.55)", fontWeight: 600 }}>SEJAK 2011</div>
                  <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: 64, lineHeight: 0.95, marginTop: 4 }}>200<span style={{ color: "#F26522" }}>+</span></div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 13, color: "rgba(255,255,255,0.7)", marginTop: 4 }}>fasilitas terselesaikan</div>
                </div>
                <div style={{ position: "absolute", right: -16, bottom: 60, background: "#fff", color: "#0F1424", padding: "18px 22px", borderRadius: 4, border: "1px solid rgba(15,20,36,0.08)", boxShadow: "0 14px 30px rgba(15,20,36,0.12)", maxWidth: 260 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                    <span style={{ width: 8, height: 8, borderRadius: 999, background: "#2BA84A", boxShadow: "0 0 0 4px rgba(43,168,74,0.18)" }}/>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(15,20,36,0.5)" }}>SEDANG ONLINE</span>
                  </div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.5, fontWeight: 500 }}>Tim survei siap kunjungan ke lokasi lahan Anda di seluruh Indonesia.</div>
                </div>
              </>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// TRUST BAR
// ============================================================================
function TrustBar() {
  const isMobile = useIsMobile();
  const clients = ["Sekolah Internasional", "Resort & Hotel", "Perumahan Cluster", "Sport Center", "Kampus & Universitas", "Kementerian"];
  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "24px 20px 36px" : "32px 32px 48px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "auto 1fr", gap: isMobile ? 16 : 40, alignItems: "center" }}>
        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(15,20,36,0.55)", textTransform: "uppercase", maxWidth: 180, lineHeight: 1.5 }}>
          Dipercaya oleh klien lintas sektor
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "repeat(2, 1fr)" : "repeat(6, 1fr)", gap: 1, background: "rgba(15,20,36,0.1)", border: "1px solid rgba(15,20,36,0.1)" }}>
          {clients.map((c, i) => (
            <div key={i} style={{ background: "#FAF7F2", padding: isMobile ? "14px 10px" : "20px 16px", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontSize: isMobile ? 13 : 16, color: "rgba(15,20,36,0.7)", textAlign: "center" }}>
              {c}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// OPPORTUNITY
// ============================================================================
function Opportunity() {
  const isMobile = useIsMobile();
  const cards = [
    { num: "01", title: "Pusat Aktivitas Komunitas", body: "Komunitas amatir, tim kantor, hingga liga antar-RT terus tumbuh di kota-kota Indonesia. Lapangan mini soccer jadi magnet sosial yang mengisi kebutuhan ini setiap hari.", tone: "#F26522" },
    { num: "02", title: "Fasilitas Sekolah & Akademi", body: "Sekolah dan akademi sepak bola lokal aktif mencari tempat latihan rutin. Lapangan yang layak dan terjangkau selalu jadi prioritas — dan daftarnya panjang.", tone: "#1B2A5B" },
    { num: "03", title: "Arena Turnamen & Event", body: "Liga komunitas, turnamen antar-kantor, hingga event sponsor lokal — semua butuh venue. Lapangan yang terkelola baik bisa jadi arena favorit di kotamu.", tone: "#2BA84A" },
    { num: "04", title: "Mesin Passive Income", body: "Omzet sewa lapangan bisa tembus Rp 80–130 juta/bulan. Dengan ROI rata-rata 1–2 tahun, ini bukan sekadar fasilitas — ini aset produktif jangka panjang.", tone: "#F26522" },
  ];
  return (
    <section style={{ background: "#0F1424", color: "#fff", padding: isMobile ? "64px 20px" : "96px 32px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.4fr", gap: isMobile ? 20 : 80, alignItems: "end", marginBottom: isMobile ? 32 : 64 }}>
          <div>
            <Pill tone="dark">PELUANG · SELURUH INDONESIA</Pill>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(36px, 10vw, 52px)" : "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.01em", margin: "20px 0 0" }}>
              Lebih dari fasilitas — <span style={{ color: "#F26522" }}>aset bisnis yang menghasilkan</span>.
            </h2>
          </div>
          <p style={{ fontFamily: "Inter, sans-serif", fontSize: isMobile ? 15 : 17, lineHeight: 1.65, color: "rgba(255,255,255,0.72)", maxWidth: 560, margin: 0 }}>
            Sepak bola adalah olahraga paling populer di Indonesia — tapi lapangan mini soccer yang layak masih jauh dari cukup. Permintaan tinggi, supply terbatas, dan potensi omzet yang nyata.
          </p>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: 1, background: "rgba(255,255,255,0.08)", border: "1px solid rgba(255,255,255,0.08)" }}>
          {cards.map((c, i) => (
            <div key={i} style={{ background: "#0F1424", padding: isMobile ? "24px 16px" : "32px 28px", minHeight: isMobile ? 180 : 240, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: c.tone }}>{c.num} / 04</div>
              <div>
                <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: isMobile ? 19 : 28, margin: "0 0 10px", color: "#fff" }}>{c.title}</h3>
                <p style={{ fontFamily: "Inter, sans-serif", fontSize: isMobile ? 12 : 14, lineHeight: 1.6, color: "rgba(255,255,255,0.65)", margin: 0 }}>{c.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// SPECS
// ============================================================================
function Specs() {
  const isMobile = useIsMobile();
  const [activeTab, setActiveTab] = useState(0);
  const tabs = [{ label: "Ukuran Lapangan", code: "01" }, { label: "Material Flooring", code: "02" }, { label: "Drainase & Iklim", code: "03" }];
  const content = [
    { title: "Standar FIFA, fleksibel sesuai lahan", body: "Standar FIFA untuk mini soccer ada di kisaran panjang 38–42 m dan lebar 18–25 m. Untuk lahan terbatas, kami menyesuaikan dimensi tanpa mengorbankan keamanan dan ritme permainan.", bullets: [["38–42 m","Panjang ideal"],["18–25 m","Lebar ideal"],["3 m","Run-off perimeter"],["7v7 / 5v5","Format permainan"]] },
    { title: "Synthetic turf atau interlock modular", body: "Pemilihan permukaan menentukan kenyamanan, keselamatan, dan daya tahan. Kami merekomendasikan rumput sintetis FIFA Quality untuk pengalaman premium, atau interlock modular untuk multi-fungsi.", bullets: [["FIFA Quality Pro","Sertifikasi turf"],["50–60 mm","Pile height standar"],["8.500 dtex","Densitas serat"],["10+ tahun","Estimasi umur pakai"]] },
    { title: "Drainase yang siap hujan deras tropis", body: "Iklim tropis dan curah hujan tinggi mengharuskan drainase didesain sejak hari pertama. Subbase berlapis, kemiringan presisi, dan subdrain perimeter memastikan lapangan tetap bermain pasca-hujan.", bullets: [["1–2 %","Kemiringan permukaan"],["30–40 cm","Lapisan batu pecah"],["5–10 cm","Lapisan pasir kasar"],["Subdrain","Pipa perforated"]] },
  ][activeTab];

  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "64px 20px" : "96px 32px" }} id="proses">
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 16 : 80, alignItems: "end", marginBottom: isMobile ? 28 : 56 }}>
          <div>
            <Pill tone="navy">JASA PEMBUATAN LAPANGAN MINI SOCCER</Pill>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(30px, 9vw, 44px)" : "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.01em", margin: "20px 0 0", color: "#0F1424" }}>
              Detail kecil yang bikin lapangan <em style={{ color: "#F26522", fontStyle: "italic" }}>tahan lama</em>.
            </h2>
          </div>
          {!isMobile && <p style={{ fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.65, color: "rgba(15,20,36,0.7)", margin: 0, maxWidth: 480 }}>Membangun mini soccer bukan sekadar pasang gawang. Tiga aspek ini membedakan lapangan yang awet 10+ tahun dari yang harus direnovasi tahunan.</p>}
        </div>

        <div style={{ display: "flex", borderTop: "1px solid rgba(15,20,36,0.15)", overflowX: "auto" }}>
          {tabs.map((t, i) => (
            <button key={i} onClick={() => setActiveTab(i)} style={{ flex: 1, minWidth: isMobile ? 100 : "auto", background: "transparent", border: "none", padding: isMobile ? "12px 8px" : "20px 0", textAlign: "left", cursor: "pointer", borderTop: activeTab === i ? "3px solid #F26522" : "3px solid transparent", marginTop: -1, display: "flex", flexDirection: "column", gap: 4 }}>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: activeTab === i ? "#F26522" : "rgba(15,20,36,0.4)" }}>{t.code}</span>
              <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontSize: isMobile ? 14 : 22, fontWeight: 600, fontStyle: "italic", color: activeTab === i ? "#0F1424" : "rgba(15,20,36,0.45)" }}>{t.label}</span>
            </button>
          ))}
        </div>

        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.1fr 1fr", gap: isMobile ? 24 : 56, marginTop: isMobile ? 24 : 48 }}>
          <div>
            <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: isMobile ? 26 : 40, lineHeight: 1.05, margin: "0 0 16px", color: "#0F1424" }}>{content.title}</h3>
            <p style={{ fontFamily: "Inter, sans-serif", fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: "rgba(15,20,36,0.75)", margin: 0 }}>{content.body}</p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 1, marginTop: 24, background: "rgba(15,20,36,0.1)", border: "1px solid rgba(15,20,36,0.1)" }}>
              {content.bullets.map(([k, v], i) => (
                <div key={i} style={{ background: "#FAF7F2", padding: isMobile ? "14px 14px" : "20px 22px" }}>
                  <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? 22 : 32, color: "#1B2A5B", lineHeight: 1 }}>{k}</div>
                  <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "rgba(15,20,36,0.6)", marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
          <SpecDiagram tab={activeTab} />
        </div>
      </div>
    </section>
  );
}

function SpecDiagram({ tab }) {
  return (
    <div style={{ background: "#fff", border: "1px solid rgba(15,20,36,0.1)", borderRadius: 4, padding: 20, minHeight: 280 }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 12 }}>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(15,20,36,0.45)" }}>FIG. {String(tab + 1).padStart(2, "0")}</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(15,20,36,0.45)" }}>SCALE: NTS</span>
      </div>
      {tab === 0 && <PitchDiagram />}
      {tab === 1 && <TurfDiagram />}
      {tab === 2 && <DrainDiagram />}
    </div>
  );
}

function PitchDiagram() {
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", height: "auto" }}>
      <rect x="20" y="20" width="440" height="280" fill="rgba(43,168,74,0.08)" stroke="#1B2A5B" strokeWidth="2"/>
      <line x1="240" y1="20" x2="240" y2="300" stroke="#1B2A5B" strokeWidth="1.5"/>
      <circle cx="240" cy="160" r="36" fill="none" stroke="#1B2A5B" strokeWidth="1.5"/>
      <circle cx="240" cy="160" r="3" fill="#1B2A5B"/>
      <rect x="20" y="100" width="60" height="120" fill="none" stroke="#1B2A5B" strokeWidth="1.5"/>
      <rect x="400" y="100" width="60" height="120" fill="none" stroke="#1B2A5B" strokeWidth="1.5"/>
      <rect x="14" y="140" width="6" height="40" fill="#F26522"/>
      <rect x="460" y="140" width="6" height="40" fill="#F26522"/>
      <line x1="20" y1="316" x2="460" y2="316" stroke="#0F1424" strokeWidth="1"/>
      <text x="240" y="312" fill="#0F1424" fontFamily="'JetBrains Mono', monospace" fontSize="10" textAnchor="middle">40 M</text>
    </svg>
  );
}

function TurfDiagram() {
  const layers = [
    { label: "FIBRILLATED YARN  ·  60mm", color: "#2BA84A", h: 50 },
    { label: "RUBBER INFILL", color: "#0F1424", h: 22 },
    { label: "SAND INFILL", color: "#D4C5A8", h: 16 },
    { label: "BACKING / GLUE", color: "#1B2A5B", h: 10 },
    { label: "SHOCK PAD", color: "#F26522", h: 18 },
    { label: "ASPHALT BASE", color: "#3A3A3A", h: 22 },
    { label: "AGGREGATE 30–40cm", color: "#7A6B5A", h: 36 },
  ];
  let y = 30;
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", height: "auto" }}>
      {layers.map((l, i) => {
        const rect = <rect key={i} x="40" y={y} width="280" height={l.h} fill={l.color} opacity={0.9}/>;
        const text = <text key={`t${i}`} x="340" y={y + l.h / 2 + 4} fill="#0F1424" fontFamily="'JetBrains Mono', monospace" fontSize="9">{l.label}</text>;
        const line = <line key={`l${i}`} x1="320" y1={y + l.h / 2} x2="336" y2={y + l.h / 2} stroke="#0F1424" strokeWidth="0.8"/>;
        const out = [rect, line, text];
        y += l.h;
        return out;
      })}
      <text x="40" y="22" fill="#0F1424" fontFamily="'JetBrains Mono', monospace" fontSize="10" fontWeight="600">CROSS-SECTION</text>
    </svg>
  );
}

function DrainDiagram() {
  return (
    <svg viewBox="0 0 480 320" style={{ width: "100%", height: "auto" }}>
      <polygon points="40,80 440,90 440,100 40,90" fill="#2BA84A" opacity="0.7"/>
      <text x="240" y="74" fill="#0F1424" fontFamily="'JetBrains Mono', monospace" fontSize="9" textAnchor="middle">PERMUKAAN · KEMIRINGAN 1–2%</text>
      <rect x="40" y="100" width="400" height="20" fill="#D4C5A8" opacity="0.9"/>
      <rect x="40" y="120" width="400" height="60" fill="#7A6B5A" opacity="0.85"/>
      <text x="240" y="155" fill="#fff" fontFamily="'JetBrains Mono', monospace" fontSize="9" textAnchor="middle">BATU PECAH · 30–40 cm</text>
      <circle cx="120" cy="200" r="14" fill="none" stroke="#1B2A5B" strokeWidth="2"/>
      <circle cx="240" cy="200" r="14" fill="none" stroke="#1B2A5B" strokeWidth="2"/>
      <circle cx="360" cy="200" r="14" fill="none" stroke="#1B2A5B" strokeWidth="2"/>
      <text x="240" y="230" fill="#0F1424" fontFamily="'JetBrains Mono', monospace" fontSize="9" textAnchor="middle">SUBDRAIN PERFORATED PIPE</text>
      <rect x="20" y="80" width="18" height="160" fill="none" stroke="#F26522" strokeWidth="2"/>
      <rect x="442" y="80" width="18" height="160" fill="none" stroke="#F26522" strokeWidth="2"/>
      <defs><marker id="arrow" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6" fill="#F26522"/></marker></defs>
    </svg>
  );
}

// ============================================================================
// WHY RAGASPORT
// ============================================================================
function WhyRagasport() {
  const isMobile = useIsMobile();
  const reasons = [
    { code: "01", title: "Desain berstandar terukur", body: "Material FIFA Quality / FIFA Quality Pro untuk rumput sintetis. Subbase berlapis, kemiringan 1–2%, subdrain perforated di perimeter." },
    { code: "02", title: "3D Concept & Value Engineering", body: "Rancangan 3D yang menampilkan layout lapangan keseluruhan. Survei lokasi & analisa mendalam untuk opsi material paling efisien." },
    { code: "03", title: "Spesialis iklim tropis", body: "Desain hemat energi (LED low-watt, kontrol otomatis), opsi solar-ready roof, dan rainwater harvesting untuk maintenance harian." },
    { code: "04", title: "Manajemen proyek transparan", body: "RAB/BoQ terperinci, time schedule realistis, PIC lapangan satu pintu. Progress dilaporkan mingguan dengan dokumentasi foto/video." },
    { code: "05", title: "Instalasi rapi & presisi", body: "Toleransi joint ketat, adhesive premium, line marking presisi turnamen. Edging, perimeter anchor, dan aksesori ditangani teknisi berpengalaman." },
    { code: "06", title: "Garansi & after-sales jelas", body: "Garansi instalasi sesuai MoU, plus SOP perawatan harian–bulanan, jadwal grooming/infill top-up, dan pelatihan caretaker." },
  ];
  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "64px 20px" : "96px 32px", borderTop: "1px solid rgba(15,20,36,0.08)" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr", gap: isMobile ? 20 : 80, alignItems: "end", marginBottom: isMobile ? 32 : 64 }}>
          <div>
            <Pill tone="orange">KENAPA RAGASPORT</Pill>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(30px, 9vw, 44px)" : "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.01em", margin: "20px 0 0", color: "#0F1424" }}>
              Bukan sekadar "membangun" — kami <em style={{ color: "#1B2A5B" }}>mendesain ekosistem bermain</em>.
            </h2>
          </div>
          {!isMobile && <p style={{ fontFamily: "Inter, sans-serif", fontSize: 16, lineHeight: 1.65, color: "rgba(15,20,36,0.7)", margin: 0, maxWidth: 480 }}>Kombinasi pengalaman teknis, manajemen proyek yang rapi, dan sentuhan lifestyle khas iklim tropis Indonesia.</p>}
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "repeat(3, 1fr)", gap: 1, background: "rgba(15,20,36,0.1)", border: "1px solid rgba(15,20,36,0.1)" }}>
          {reasons.map((r, i) => (
            <div key={i} style={{ background: "#FAF7F2", padding: isMobile ? "24px 20px" : "32px 30px", minHeight: isMobile ? 140 : 220, display: "flex", flexDirection: "column", gap: 12 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? 32 : 44, color: "#F26522", lineHeight: 1 }}>{r.code}</span>
                <Arrow size={18} />
              </div>
              <div>
                <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: isMobile ? 20 : 24, margin: "0 0 8px", color: "#0F1424" }}>{r.title}</h3>
                <p style={{ fontFamily: "Inter, sans-serif", fontSize: isMobile ? 13 : 14, lineHeight: 1.6, color: "rgba(15,20,36,0.7)", margin: 0 }}>{r.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// PROCESS
// ============================================================================
function Process() {
  const isMobile = useIsMobile();
  const steps = [
    { day: "HARI 1", title: "Konsultasi & Survei Lahan", body: "Tim datang ke lokasi, ukur kontur, cek kondisi tanah dan akses." },
    { day: "MINGGU 1", title: "Konsep 3D & RAB", body: "Rancangan 3D layout lapangan, BoQ terperinci, time schedule." },
    { day: "MINGGU 2–6", title: "Konstruksi & Subbase", body: "Galian, drainase, pondasi berlapis, pemasangan asphalt base." },
    { day: "MINGGU 7–8", title: "Instalasi Turf & Aksesori", body: "Penggelaran rumput sintetis, line marking, gawang & net." },
    { day: "PASCA-INSTALASI", title: "Grooming & Pelatihan", body: "SOP perawatan, pelatihan caretaker, garansi & dukungan." },
  ];
  return (
    <section style={{ background: "#1B2A5B", color: "#fff", padding: isMobile ? "64px 20px" : "96px 32px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ marginBottom: isMobile ? 36 : 56 }}>
          <Pill tone="dark">PROSES KERJA</Pill>
          <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(30px, 9vw, 44px)" : "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.01em", margin: "20px 0 0" }}>
            Dari survei sampai grooming — <span style={{ color: "#F26522" }}>satu pintu</span>.
          </h2>
        </div>

        {isMobile ? (
          <div style={{ display: "flex", flexDirection: "column", gap: 0, position: "relative" }}>
            <div style={{ position: "absolute", left: 11, top: 0, bottom: 0, width: 1, background: "rgba(255,255,255,0.18)" }}/>
            {steps.map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 20, paddingBottom: 28, position: "relative" }}>
                <div style={{ width: 24, height: 24, borderRadius: 999, flexShrink: 0, background: i === 0 ? "#F26522" : "#1B2A5B", border: "2px solid rgba(255,255,255,0.5)", position: "relative", zIndex: 1 }}/>
                <div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: "#F26522", marginBottom: 6 }}>{s.day}</div>
                  <h4 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: 20, margin: "0 0 6px", color: "#fff" }}>{s.title}</h4>
                  <p style={{ fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,0.65)", margin: 0 }}>{s.body}</p>
                </div>
              </div>
            ))}
          </div>
        ) : (
          <div style={{ position: "relative", paddingTop: 24 }}>
            <div style={{ position: "absolute", top: 36, left: 0, right: 0, height: 1, background: "rgba(255,255,255,0.18)" }}/>
            <div style={{ display: "grid", gridTemplateColumns: `repeat(${steps.length}, 1fr)`, gap: 24 }}>
              {steps.map((s, i) => (
                <div key={i}>
                  <div style={{ width: 24, height: 24, borderRadius: 999, background: i === 0 ? "#F26522" : "#1B2A5B", border: "2px solid rgba(255,255,255,0.5)", marginBottom: 24, position: "relative", zIndex: 1 }}/>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: "#F26522", marginBottom: 10 }}>{s.day}</div>
                  <h4 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: 22, margin: "0 0 10px", color: "#fff" }}>{s.title}</h4>
                  <p style={{ fontFamily: "Inter, sans-serif", fontSize: 13, lineHeight: 1.6, color: "rgba(255,255,255,0.65)", margin: 0 }}>{s.body}</p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ============================================================================
// PORTFOLIO
// ============================================================================
function Portfolio() {
  const isMobile = useIsMobile();
  const projects = [
    { city: "Tangerang", year: "2025", img: "assets/portfolio-tangerang-2025.jpg" },
    { city: "Pontianak", year: "2025", img: "assets/portfolio-pontianak-2025.jpg" },
    { city: "Ponorogo", year: "2025", img: "assets/portfolio-ponorogo-2025.jpg" },
    { city: "Pemalang", year: "2025", img: "assets/portfolio-pemalang-2025.jpg" },
  ];
  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "64px 20px" : "96px 32px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexDirection: isMobile ? "column" : "row", gap: isMobile ? 16 : 0, marginBottom: isMobile ? 24 : 48 }}>
          <div>
            <Pill tone="navy">PORTOFOLIO TERPILIH</Pill>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(30px, 9vw, 44px)" : "clamp(40px, 5vw, 72px)", lineHeight: 0.95, letterSpacing: "-0.01em", margin: "20px 0 0", color: "#0F1424" }}>
              Sebagian dari <span style={{ color: "#F26522" }}>200+ lapangan</span> yang sudah jalan.
            </h2>
          </div>
          <a href="#" style={{ fontFamily: "Inter, sans-serif", fontSize: 14, fontWeight: 600, color: "#1B2A5B", textDecoration: "none", display: "inline-flex", alignItems: "center", gap: 8, paddingBottom: 8, borderBottom: "1.5px solid #1B2A5B", alignSelf: "flex-start" }}>
            Semua portofolio <Arrow size={14} />
          </a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr 1fr" : "repeat(4, 1fr)", gap: isMobile ? 8 : 12 }}>
          {projects.map((p, i) => (
            <article key={i} style={{ overflow: "hidden", border: "1px solid rgba(15,20,36,0.08)" }}>
              <div style={{ aspectRatio: "4/5", background: `url(${p.img}) center/cover`, position: "relative" }}>
                <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, transparent 50%, rgba(15,20,36,0.7) 100%)" }}/>
                <div style={{ position: "absolute", left: 12, bottom: 12 }}>
                  <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: "0.18em", fontWeight: 600, color: "#F26522", display: "block" }}>{p.year}</span>
                  <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? 20 : 28, color: "#fff" }}>{p.city}</span>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// TESTIMONIAL
// ============================================================================
function Testimonial() {
  const isMobile = useIsMobile();
  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "0 20px 64px" : "32px 32px 96px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", background: "#0F1424", color: "#fff", padding: isMobile ? "48px 24px" : "72px 64px", position: "relative", overflow: "hidden" }}>
        <div style={{ position: "absolute", top: -20, right: 20, fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? 140 : 280, lineHeight: 1, color: "rgba(242,101,34,0.12)" }}>"</div>
        <div style={{ position: "relative", maxWidth: 900 }}>
          <Pill tone="dark">TESTIMONI KLIEN</Pill>
          <p style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 500, fontStyle: "italic", fontSize: isMobile ? "clamp(20px, 6vw, 30px)" : "clamp(28px, 3.4vw, 44px)", lineHeight: 1.25, margin: "24px 0 28px" }}>
            "Hasilnya bagus, kualitasnya tiada tanding, pengerjaan transparan dari awal hingga akhir. Yang paling saya sukai adalah timelinenya disiplin. Sangat profesional!"
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <div style={{ width: 44, height: 44, borderRadius: 999, background: "linear-gradient(135deg, #F26522, #1B2A5B)", flexShrink: 0 }}/>
            <div>
              <div style={{ fontFamily: "Inter, sans-serif", fontWeight: 600, fontSize: 15 }}>Rahmad</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(255,255,255,0.55)", marginTop: 2 }}>KEDIRI, JAWA TIMUR</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// FAQ
// ============================================================================
function FAQ() {
  const isMobile = useIsMobile();
  const [open, setOpen] = useState(0);
  const items = [
    { q: "Berapa lama proses pembangunan lapangan mini soccer?", a: "Tergantung kondisi lahan dan ukuran. Standar kami 6–10 minggu dari penandatanganan kontrak hingga lapangan siap dipakai, termasuk drainase berlapis dan instalasi turf." },
    { q: "Apakah RagaSport menerima proyek di luar Jawa?", a: "Ya. Kami sudah menyelesaikan proyek di seluruh Indonesia — dari kota besar sampai daerah wisata, termasuk Sumatra, Kalimantan, Sulawesi, Bali, dan NTB." },
    { q: "Material rumput apa saja yang tersedia?", a: "Synthetic turf FIFA Quality / FIFA Quality Pro dengan pile height 50–60 mm, dan interlock modular untuk lapangan multi-fungsi. Pilihan disesuaikan tujuan proyek." },
    { q: "Apakah ada garansi setelah lapangan selesai?", a: "Ya. Garansi instalasi sesuai MoU, plus SOP perawatan, jadwal grooming, infill top-up, dan pelatihan caretaker untuk operasional jangka panjang." },
    { q: "Bisakah RagaSport bantu skema bisnis & monetisasi lapangan?", a: "Tentu. Kami punya pengalaman mendesain ekosistem bermain — termasuk pertimbangan membership, sewa, event hosting, dan tarif komunitas." },
  ];
  return (
    <section style={{ background: "#FAF7F2", padding: isMobile ? "0 20px 64px" : "0 32px 96px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1fr 1.6fr", gap: isMobile ? 28 : 80, alignItems: "start" }}>
          <div>
            <Pill tone="navy">FAQ</Pill>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(26px, 8vw, 38px)" : "clamp(36px, 4vw, 56px)", lineHeight: 0.98, letterSpacing: "-0.01em", margin: "20px 0 16px", color: "#0F1424" }}>
              Hal-hal yang sering ditanyakan calon mitra.
            </h2>
            <p style={{ fontFamily: "Inter, sans-serif", fontSize: 14, lineHeight: 1.65, color: "rgba(15,20,36,0.7)", margin: 0 }}>
              Tidak ketemu jawabannya? Tanya langsung tim kami via WhatsApp — respon di bawah 30 menit.
            </p>
          </div>
          <div style={{ borderTop: "1px solid rgba(15,20,36,0.15)" }}>
            {items.map((it, i) => (
              <div key={i} style={{ borderBottom: "1px solid rgba(15,20,36,0.15)" }}>
                <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: "100%", background: "transparent", border: "none", padding: "18px 0", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", textAlign: "left", gap: 12 }}>
                  <span style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 600, fontStyle: "italic", fontSize: isMobile ? 17 : 24, color: "#0F1424" }}>{it.q}</span>
                  <span style={{ width: 30, height: 30, borderRadius: 999, flexShrink: 0, background: open === i ? "#F26522" : "transparent", border: "1.5px solid", borderColor: open === i ? "#F26522" : "rgba(15,20,36,0.3)", color: open === i ? "#fff" : "#1B2A5B", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 20, fontWeight: 300, transform: open === i ? "rotate(45deg)" : "rotate(0)", transition: "all 0.2s" }}>+</span>
                </button>
                {open === i && <div style={{ paddingBottom: 18, paddingRight: isMobile ? 0 : 48, fontFamily: "Inter, sans-serif", fontSize: isMobile ? 14 : 16, lineHeight: 1.7, color: "rgba(15,20,36,0.75)" }}>{it.a}</div>}
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================================================
// FINAL CTA
// ============================================================================
function FinalCTA({ tweaks }) {
  const isMobile = useIsMobile();
  return (
    <section id="kontak" style={{ background: "#FAF7F2", padding: isMobile ? "0 20px 64px" : "0 32px 96px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", background: "#F26522", color: "#fff", position: "relative", overflow: "hidden", padding: isMobile ? "48px 24px" : "80px 64px" }}>
        <div style={{ position: "absolute", right: -80, bottom: -120, opacity: 0.18, transform: "rotate(-15deg)" }}>
          <LogoMark size={isMobile ? 240 : 500} color="#fff" />
        </div>
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: isMobile ? "1fr" : "1.3fr 1fr", gap: isMobile ? 32 : 64, alignItems: "center" }}>
          <div>
            <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? "clamp(34px, 10vw, 52px)" : "clamp(44px, 5.5vw, 84px)", lineHeight: 0.92, letterSpacing: "-0.01em", margin: "0 0 16px", color: "#fff" }}>
              Lahan sudah ada?<br/>Kami bantu jadikan <em style={{ color: "#0F1424" }}>lapangan kebanggaan</em>.
            </h2>
            <p style={{ fontFamily: "Inter, sans-serif", fontSize: isMobile ? 15 : 17, lineHeight: 1.6, color: "rgba(255,255,255,0.92)", margin: 0 }}>
              Survei lokasi seluruh Indonesia. Konsep 3D dan RAB siap secepatnya.
            </p>
          </div>
          <div style={{ background: "#fff", color: "#0F1424", padding: isMobile ? "28px 20px" : "40px 36px", borderRadius: 4, display: "flex", flexDirection: "column", gap: 16 }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", color: "rgba(15,20,36,0.55)", fontWeight: 600 }}>HUBUNGI KAMI LANGSUNG</div>
            <h3 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontStyle: "italic", fontSize: isMobile ? 22 : 32, lineHeight: 1.1, margin: 0, color: "#0F1424" }}>Chat tim kami — respon di bawah 30 menit.</h3>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "#2BA84A", boxShadow: "0 0 0 4px rgba(43,168,74,0.18)" }}/>
              <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 11, letterSpacing: "0.16em", fontWeight: 600, color: "rgba(15,20,36,0.5)" }}>ONLINE · RESPON CEPAT</span>
            </div>
            <a href={WA_LINK} target="_blank" rel="noreferrer" style={{ background: "#2BA84A", color: "#fff", padding: "18px 20px", borderRadius: 4, fontFamily: "Inter, sans-serif", fontSize: 15, fontWeight: 600, textDecoration: "none", display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10, boxShadow: "0 10px 24px rgba(43,168,74,0.35)" }}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.002-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/></svg>
              Chat Sekarang via WhatsApp
            </a>
            <div style={{ fontFamily: "Inter, sans-serif", fontSize: 12, color: "rgba(15,20,36,0.55)", lineHeight: 1.5 }}>
              Atau telepon <strong style={{ color: "#0F1424" }}>{tweaks.ctaPhone}</strong> · <strong style={{ color: "#0F1424" }}>contact@ragasport.co.id</strong>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}



// ============================================================================
// PANEL & APP
// ============================================================================
function Panel() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    window.__tweaks = tweaks;
    window.dispatchEvent(new CustomEvent("tweakschange"));
  }, [tweaks]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Brand">
        <TweakColor label="Accent (orange)" value={tweaks.accentColor} onChange={(v) => setTweak("accentColor", v)} />
        <TweakColor label="Navy" value={tweaks.navy} onChange={(v) => setTweak("navy", v)} />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakText label="Eyebrow" value={tweaks.heroEyebrow} onChange={(v) => setTweak("heroEyebrow", v)} />
        <TweakText label="CTA label" value={tweaks.ctaLabel} onChange={(v) => setTweak("ctaLabel", v)} />
        <TweakText label="Phone" value={tweaks.ctaPhone} onChange={(v) => setTweak("ctaPhone", v)} />
      </TweakSection>
      <TweakSection title="Layout">
        <TweakToggle label="Show announcement ticker" value={tweaks.showTicker} onChange={(v) => setTweak("showTicker", v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  useEffect(() => {
    const onChange = () => setTweaks({ ...window.__tweaks });
    window.addEventListener("tweakschange", onChange);
    return () => window.removeEventListener("tweakschange", onChange);
  }, []);
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accentColor);
    document.documentElement.style.setProperty("--navy", tweaks.navy);
  }, [tweaks]);
  return (
    <>
      {tweaks.showTicker && <Ticker />}
      <Hero tweaks={tweaks} />
      <TrustBar />
      <Opportunity />
      <Specs />
      <WhyRagasport />
      <Process />
      <Portfolio />
      <Testimonial />
      <FAQ />
      <FinalCTA tweaks={tweaks} />
      <Panel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
