/* ============================================================
   Agency BRN — Services, Why, Local SEO, Industries
   ============================================================ */

/* ---------- Services ---------- */
function Services() {
  const { t, basePath = "" } = React.useContext(window.LanguageContext);
  const icons = [
    <Icon.Web />, <Icon.Gmaps />, <Icon.Crm />,
    <Icon.Automation />, <Icon.Ai />, <Icon.Ads />,
    <Icon.House />,
  ];
  const slugs = window.SERVICE_SLUGS || [
    "website-design-landing-pages",
    "google-business-profile-optimization",
    "crm-setup",
    "marketing-automation",
    "ai-powered-business-systems",
    "paid-traffic-strategy",
    "real-estate-rental-lead-systems",
  ];
  return (
    <section className="section section--light" id="services">
      <div className="container">
        <div className="section__header reveal">
          <span className="eyebrow"><span className="dot" /> {t.services.eyebrow}</span>
          <h2>
            {t.services.h2A}
            <span className="text-grad">{t.services.h2Grad}</span>
            {t.services.h2B}
          </h2>
          <p className="lede">{t.services.lede}</p>
        </div>

        <div className="services-grid">
          {t.services.items.map((s, i) => (
            <a
              key={i}
              href={`${basePath}services/${slugs[i]}.html`}
              className="service-card reveal"
              data-delay={(i % 3) + 1}
            >
              <span className="service-card__num">0{i + 1}</span>
              <div className="service-card__icon">{icons[i]}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <span className="service-card__more">
                {t.services.learnMore}
                <Icon.ArrowRight width="13" height="13" />
              </span>
            </a>
          ))}
        </div>

        <div className="services-grid__footer">
          <a href={`${basePath}services/`} className="btn btn--ghost btn--lg">
            {t.nav.viewAllServices || "View All Services"}
            <Icon.ArrowRight className="arrow" />
          </a>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why ---------- */
function Why() {
  const { t } = React.useContext(window.LanguageContext);
  return (
    <section className="section section--dark" id="why">
      <div className="grid-overlay" />
      <div className="container">
        <div className="why-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" /> {t.why.eyebrow}</span>
            <h2 style={{ marginTop: 18 }}>
              {t.why.h2A}
              <span className="text-grad">{t.why.h2Grad}</span>
              {t.why.h2B}
            </h2>
            <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.7)", maxWidth: 520 }}>
              {t.why.body}
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 32 }}>
              <a href="#contact" className="btn btn--primary">
                {t.cta}
                <Icon.ArrowRight className="arrow" />
              </a>
            </div>
          </div>

          <div className="why-bullets reveal" data-delay="1">
            {t.why.bullets.map((b, i) => (
              <div key={i} className="why-bullet">
                <span className="why-bullet__check"><Icon.Check /></span>
                <span className="why-bullet__text">{b}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Local SEO ---------- */
function LocalSEO() {
  const { t } = React.useContext(window.LanguageContext);
  // Approximate pin positions (% of container)
  const pins = [
    { x: 50, y: 50, name: "Orlando", large: true },
    { x: 32, y: 74, name: "Kissimmee" },
    { x: 56, y: 32, name: "Winter Park" },
    { x: 38, y: 26, name: "Apopka" },
    { x: 28, y: 50, name: "Winter Garden" },
    { x: 36, y: 58, name: "Windermere" },
    { x: 64, y: 62, name: "Lake Nona" },
    { x: 78, y: 38, name: "Altamonte" },
  ];
  return (
    <section className="section section--light" id="orlando">
      <div className="container">
        <div className="localseo-grid">
          <div className="reveal">
            <span className="eyebrow"><span className="dot" /> {t.local.eyebrow}</span>
            <h2 style={{ marginTop: 18 }}>
              {t.local.h2A}
              <span className="text-grad">{t.local.h2Grad}</span>
              {t.local.h2B}
            </h2>
            <p style={{ marginTop: 22, fontSize: 17, lineHeight: 1.65, color: "var(--ink-500)" }}>
              {t.local.body}
            </p>
            <p style={{ marginTop: 18, fontSize: 17, lineHeight: 1.65, color: "var(--ink-900)", fontWeight: 500 }}>
              {t.local.body2}
            </p>
            <div className="city-badges">
              {t.local.cities.map((c) => (
                <span key={c} className="city-badge">
                  <Icon.Pin className="pin" />
                  {c}
                </span>
              ))}
            </div>
          </div>

          <div className="localseo-visual reveal" data-delay="1">
            <div className="map-grid" />
            {/* Routes between pins */}
            <svg style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} viewBox="0 0 100 100" preserveAspectRatio="none">
              {pins.slice(1).map((p, i) => (
                <line key={i} x1="50" y1="50" x2={p.x} y2={p.y}
                      stroke="rgba(37,99,235,0.18)" strokeWidth="0.3"
                      strokeDasharray="0.6 0.6" />
              ))}
            </svg>
            {pins.map((p, i) => (
              <React.Fragment key={p.name}>
                <div className={"map-pin" + (p.large ? " large" : "")} style={{ top: p.y + "%", left: p.x + "%" }} />
                {p.large && (
                  <div className="map-pin-label" style={{ top: p.y + "%", left: p.x + "%" }}>
                    {p.name}, FL
                  </div>
                )}
              </React.Fragment>
            ))}
            <div style={{
              position: "absolute", bottom: 16, left: 16,
              background: "#fff",
              borderRadius: "var(--r-md)",
              padding: "10px 14px",
              boxShadow: "var(--shadow-sm)",
              border: "1px solid var(--ink-100)",
              fontFamily: "var(--font-display)",
              fontSize: 12,
              fontWeight: 600,
              display: "flex", alignItems: "center", gap: 8,
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "var(--green-500)", boxShadow: "0 0 8px var(--green-500)" }} />
              {t.local.visualCaption}: Central Florida
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Industries ---------- */
function Industries() {
  const { t } = React.useContext(window.LanguageContext);
  const industryIcons = [
    <Icon.Spray />, <Icon.Car />, <Icon.Razor />, <Icon.Scissors />,
    <Icon.Spa />, <Icon.Hard />, <Icon.Fork />, <Icon.Dumbbell />,
    <Icon.Lightbulb />, <Icon.House />, <Icon.Key />, <Icon.Pen />,
  ];
  const rental = t.industries.rental;
  return (
    <section className="section section--dark" id="industries">
      <div className="grid-overlay" />
      <div className="container">
        <div className="section__header reveal" style={{ maxWidth: 820 }}>
          <span className="eyebrow"><span className="dot" /> {t.industries.eyebrow}</span>
          <h2>
            {t.industries.h2A}
            <span className="text-grad">{t.industries.h2Grad}</span>
            {t.industries.h2B}
          </h2>
          <p className="lede">{t.industries.lede}</p>
        </div>

        <div className="industries-grid">
          {t.industries.items.map((it, i) => (
            <div key={i} className="industry-card reveal" data-delay={(i % 4) + 1}>
              <span className="industry-card__icon">{industryIcons[i]}</span>
              <div className="industry-card__body">
                <div className="industry-card__name">{it.name}</div>
                <div className="industry-card__desc">{it.desc}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Featured Rental Property Agents card */}
        <div className="rental-feature reveal">
          <div className="rental-feature__bg-orb" />
          <div className="rental-feature__bg-orb rental-feature__bg-orb--2" />

          <div className="rental-feature__left">
            <span className="eyebrow"><span className="dot" /> {rental.eyebrow}</span>
            <div className="rental-feature__icon-row">
              <span className="rental-feature__icon"><Icon.Key /></span>
              <h3 className="rental-feature__title">{rental.title}</h3>
            </div>
            <p className="rental-feature__sub">{rental.subtitle}</p>
            <p className="rental-feature__body">{rental.body}</p>
            <a href="#contact" className="btn btn--primary rental-feature__cta">
              {rental.cta}
              <Icon.ArrowRight className="arrow" />
            </a>
          </div>

          <div className="rental-feature__right">
            <div className="rental-feature__features-label">Included in the system</div>
            <ul className="rental-feature__features">
              {rental.features.map((f, i) => (
                <li key={i}>
                  <span className="rental-feature__check"><Icon.Check /></span>
                  <span>{f}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

window.Services = Services;
window.Why = Why;
window.LocalSEO = LocalSEO;
window.Industries = Industries;