// Sections.jsx — Services, How it Works, Testimonials, Service Area Map (i18n)

const Services = ({ emphasis = "all", t }) => {
  const services = [
    { id: "plumbing", icon: "💧", name: t.svc_plumbing, items: t.svc_plumbing_items, color: "#7A8C6C" },
    { id: "electrical", icon: "⚡", name: t.svc_electrical, items: t.svc_electrical_items, color: "#C99A4A" },
    { id: "carpentry", icon: "🔨", name: t.svc_carpentry, items: t.svc_carpentry_items, color: "#C2552D" },
    { id: "exterior", icon: "🧰", name: t.svc_exterior, items: t.svc_exterior_items, color: "#8B3A1F" },
  ];

  return (
    <section id="services" className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div className="section-head-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "end", marginBottom: 56 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 12, color: "var(--terracotta)", marginBottom: 16, letterSpacing: "0.1em" }}>
              {t.svc_eyebrow}
            </div>
            <h2 className="font-display section-title" style={{ fontSize: 60, lineHeight: 0.95, letterSpacing: "-0.035em", margin: 0, fontWeight: 600 }}>
              {t.svc_title_1}<br/>
              <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.svc_title_2}</span> {t.svc_title_3}
            </h2>
          </div>
          <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--muted)", maxWidth: 460, justifySelf: "end", margin: 0 }}>
            {t.svc_blurb}
          </p>
        </div>

        <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {services.map((s, i) => {
            const isHighlighted = emphasis === "all" || emphasis === s.id;
            const dim = emphasis !== "all" && emphasis !== s.id;
            return (
              <div key={s.id} className="card" style={{
                padding: 28,
                background: isHighlighted && emphasis !== "all" ? "var(--cocoa)" : "var(--paper)",
                color: isHighlighted && emphasis !== "all" ? "var(--cream)" : "var(--cocoa)",
                opacity: dim ? 0.5 : 1,
                transition: "all .3s ease",
                position: "relative",
                overflow: "hidden",
              }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 24 }}>
                  <div style={{
                    width: 48, height: 48, borderRadius: 12,
                    background: s.color,
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontSize: 22,
                  }}>{s.icon}</div>
                  <span className="font-mono" style={{ fontSize: 11, color: isHighlighted && emphasis !== "all" ? "rgba(245,239,230,0.5)" : "var(--muted)" }}>0{i+1}</span>
                </div>
                <h3 className="font-display" style={{ fontSize: 24, margin: "0 0 16px", fontWeight: 600 }}>{s.name}</h3>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 8 }}>
                  {s.items.map(it => (
                    <li key={it} style={{ fontSize: 14, color: isHighlighted && emphasis !== "all" ? "rgba(245,239,230,0.8)" : "var(--muted)", display: "flex", gap: 8 }}>
                      <span style={{ color: s.color }}>—</span> {it}
                    </li>
                  ))}
                </ul>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const HowItWorks = ({ t }) => {
  return (
    <section id="how" className="section" style={{ background: "var(--paper)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }}>
      <div className="container">
        <div className="how-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: 80 }}>
          <div className="how-side" style={{ position: "sticky", top: 40, alignSelf: "start" }}>
            <div className="font-mono" style={{ fontSize: 12, color: "var(--terracotta)", marginBottom: 16, letterSpacing: "0.1em" }}>
              {t.how_eyebrow}
            </div>
            <h2 className="font-display section-title" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.035em", margin: "0 0 24px", fontWeight: 600 }}>
              {t.how_title_1} <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.how_title_word}</span> {t.how_title_2}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", margin: "0 0 28px" }}>
              {t.how_blurb}
            </p>
            <div style={{ display: "flex", gap: 12, alignItems: "center", padding: "14px 18px", border: "1px solid var(--line-strong)", borderRadius: 14, background: "var(--cream)" }}>
              <div style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--sage)", animation: "pulse-dot 2s infinite" }}></div>
              <span className="font-mono" style={{ fontSize: 12 }}>{t.how_status}</span>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {t.how_steps.map((s, i) => (
              <div key={i} className="how-step-row" style={{
                display: "grid", gridTemplateColumns: "auto 1fr auto", gap: 32, alignItems: "start",
                padding: "32px 0",
                borderTop: i === 0 ? "1px solid var(--line-strong)" : "none",
                borderBottom: "1px solid var(--line-strong)",
              }}>
                <div className="font-serif how-step-num" style={{ fontSize: 56, lineHeight: 1, color: "var(--terracotta)", fontWeight: 400 }}>0{i+1}</div>
                <div>
                  <h3 className="font-display how-step-title" style={{ fontSize: 26, margin: "0 0 10px", fontWeight: 600, letterSpacing: "-0.02em" }}>{s.title}</h3>
                  <p className="how-step-body" style={{ fontSize: 16, lineHeight: 1.55, color: "var(--muted)", margin: 0, maxWidth: 480 }}>{s.body}</p>
                </div>
                <svg className="step-arrow" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" style={{ color: "var(--cocoa)", marginTop: 18 }}>
                  <path d="M5 12h14M13 5l7 7-7 7" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const Testimonials = ({ t }) => {
  const colors = ["#C2552D", "#7A8C6C", "#C99A4A", "#8B3A1F"];
  return (
    <section id="reviews" className="section" style={{ background: "var(--cream)" }}>
      <div className="container">
        <div className="testimonials-head" style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 48 }}>
          <div>
            <div className="font-mono" style={{ fontSize: 12, color: "var(--terracotta)", marginBottom: 16, letterSpacing: "0.1em" }}>
              {t.rev_eyebrow}
            </div>
            <h2 className="font-display section-title" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.035em", margin: 0, fontWeight: 600 }}>
              {t.rev_title_1}<br/>
              <span className="font-serif" style={{ color: "var(--terracotta)", fontWeight: 400 }}>{t.rev_title_word}</span> {t.rev_title_2}
            </h2>
          </div>
          <div className="stars-block" style={{ textAlign: "right" }}>
            <div style={{ display: "flex", gap: 4, justifyContent: "end", marginBottom: 8 }}>
              {[0,1,2,3,4].map(i => (
                <svg key={i} width="20" height="20" viewBox="0 0 24 24" fill="#C99A4A"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
              ))}
            </div>
            <div className="font-mono" style={{ fontSize: 13, color: "var(--muted)" }}>{t.rev_meta}</div>
          </div>
        </div>
        <div className="testimonials-grid" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 20 }}>
          {t.reviews.map((r, i) => {
            const initials = r.name.split(" ").map(p => p[0]).join("");
            return (
              <div key={i} className="card" style={{ padding: 32, background: "var(--paper)" }}>
                <div style={{ display: "flex", gap: 4, marginBottom: 16 }}>
                  {[0,1,2,3,4].map(j => (
                    <svg key={j} width="14" height="14" viewBox="0 0 24 24" fill="#C99A4A"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                  ))}
                </div>
                <p className="font-serif review-quote" style={{ fontSize: 20, lineHeight: 1.45, margin: "0 0 24px", color: "var(--cocoa)", fontStyle: "normal" }}>
                  "{r.body}"
                </p>
                <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 18, borderTop: "1px solid var(--line)" }}>
                  <div style={{ width: 40, height: 40, borderRadius: "50%", background: colors[i % colors.length], display: "flex", alignItems: "center", justifyContent: "center", color: "var(--cream)", fontFamily: "'Bricolage Grotesque', sans-serif", fontWeight: 600, fontSize: 14 }}>{initials}</div>
                  <div>
                    <div className="font-display" style={{ fontSize: 15, fontWeight: 600 }}>{r.name}</div>
                    <div className="font-mono" style={{ fontSize: 11, color: "var(--muted)" }}>{r.area} · {t.rev_member}</div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const ServiceArea = ({ t }) => {
  const neighborhoods = [
    "Coral Gables", "Brickell", "Coconut Grove", "Little Havana", "Wynwood", "Edgewater",
    "Key Biscayne", "Pinecrest", "South Miami", "Downtown", "Midtown", "Design District",
    "Doral", "Miami Beach", "Surfside", "Bay Harbor"
  ];
  return (
    <section id="area" className="section service-area-section" style={{ background: "var(--cocoa)", color: "var(--cream)", borderRadius: 32, margin: "0 32px" }}>
      <div className="container">
        <div className="service-area-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
          <div>
            <div className="font-mono" style={{ fontSize: 12, color: "#E68A5C", marginBottom: 16, letterSpacing: "0.1em" }}>
              {t.area_eyebrow}
            </div>
            <h2 className="font-display section-title" style={{ fontSize: 56, lineHeight: 0.95, letterSpacing: "-0.035em", margin: "0 0 24px", fontWeight: 600 }}>
              {t.area_title_1}<br/>
              <span className="font-serif" style={{ color: "#E68A5C", fontWeight: 400 }}>{t.area_title_word}</span> {t.area_title_2}
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(245,239,230,0.7)", margin: "0 0 32px" }}>
              {t.area_blurb}
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 32 }}>
              {neighborhoods.map(n => (
                <span key={n} style={{
                  padding: "8px 14px", borderRadius: 999,
                  border: "1px solid rgba(245,239,230,0.2)",
                  fontFamily: "'Geist Mono', monospace", fontSize: 12,
                  color: "rgba(245,239,230,0.85)",
                }}>{n}</span>
              ))}
            </div>
            <div className="area-stats" style={{ display: "flex", gap: 24, paddingTop: 24, borderTop: "1px solid rgba(245,239,230,0.15)" }}>
              <div>
                <div className="font-display" style={{ fontSize: 32, fontWeight: 600, color: "#E68A5C" }}>16</div>
                <div className="font-mono" style={{ fontSize: 11, color: "rgba(245,239,230,0.6)" }}>{t.area_stat_neighborhoods}</div>
              </div>
              <div>
                <div className="font-display" style={{ fontSize: 32, fontWeight: 600, color: "#E68A5C" }}>4 hr</div>
                <div className="font-mono" style={{ fontSize: 11, color: "rgba(245,239,230,0.6)" }}>{t.area_stat_emergency}</div>
              </div>
              <div>
                <div className="font-display" style={{ fontSize: 32, fontWeight: 600, color: "#E68A5C" }}>{t.area_days_value}</div>
                <div className="font-mono" style={{ fontSize: 11, color: "rgba(245,239,230,0.6)" }}>{t.area_stat_days}</div>
              </div>
            </div>
          </div>
          <div style={{ position: "relative", aspectRatio: "1.2", borderRadius: 24, overflow: "hidden", background: "#1B130D", border: "1px solid rgba(245,239,230,0.1)" }}>
            <svg viewBox="0 0 400 340" style={{ width: "100%", height: "100%", display: "block" }}>
              <defs>
                <pattern id="grid" width="24" height="24" patternUnits="userSpaceOnUse">
                  <path d="M 24 0 L 0 0 0 24" fill="none" stroke="rgba(245,239,230,0.04)" strokeWidth="0.5"/>
                </pattern>
                <radialGradient id="glow" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#C2552D" stopOpacity="0.55"/>
                  <stop offset="55%" stopColor="#C2552D" stopOpacity="0.14"/>
                  <stop offset="100%" stopColor="#C2552D" stopOpacity="0"/>
                </radialGradient>
                <linearGradient id="land" x1="0" y1="0" x2="0" y2="1">
                  <stop offset="0%" stopColor="#3F2E22"/>
                  <stop offset="100%" stopColor="#352519"/>
                </linearGradient>
                <filter id="land-shadow" x="-5%" y="-5%" width="110%" height="110%">
                  <feGaussianBlur in="SourceAlpha" stdDeviation="1.2"/>
                  <feOffset dx="0" dy="1.2"/>
                  <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"/>
                  <feFlood floodColor="#000" floodOpacity="0.35"/>
                  <feComposite in2="shadowDiff" operator="in"/>
                  <feComposite in="SourceGraphic"/>
                </filter>
              </defs>

              {/* Water — bay + Atlantic */}
              <rect width="400" height="340" fill="#1B130D"/>
              <rect width="400" height="340" fill="url(#grid)"/>

              {/* Subtle parallels */}
              <line x1="0" y1="105" x2="400" y2="105" stroke="rgba(245,239,230,0.06)" strokeWidth="0.5" strokeDasharray="2 6"/>
              <line x1="0" y1="220" x2="400" y2="220" stroke="rgba(245,239,230,0.06)" strokeWidth="0.5" strokeDasharray="2 6"/>

              {/* South Florida mainland — coastline traced from N (Pompano) → S (Cutler Bay) */}
              <path
                d="M 0 0 L 352 0
                   L 348 26 L 344 52 L 340 78 L 336 102
                   L 332 124 L 328 142
                   C 322 158, 312 168, 300 178
                   C 286 188, 272 198, 264 212
                   C 258 222, 256 232, 257 244
                   C 258 254, 261 261, 264 268
                   C 256 278, 248 286, 244 296
                   C 246 308, 252 320, 258 332
                   L 261 340 L 0 340 Z"
                fill="url(#land)"
                stroke="#E68A5C"
                strokeOpacity="0.42"
                strokeWidth="0.9"/>

              {/* Barrier island chain — Sunny Isles → Bal Harbour → Surfside → Miami Beach */}
              <path
                d="M 354 88
                   C 360 108, 364 132, 366 158
                   C 367 184, 366 208, 362 230
                   C 360 240, 357 246, 352 250
                   L 346 250
                   C 342 230, 341 206, 342 184
                   C 343 158, 346 132, 350 108
                   Z"
                fill="url(#land)"
                stroke="#E68A5C"
                strokeOpacity="0.42"
                strokeWidth="0.8"/>

              {/* Key Biscayne */}
              <g transform="rotate(-14 350 282)">
                <ellipse cx="350" cy="282" rx="9" ry="14"
                  fill="url(#land)" stroke="#E68A5C" strokeOpacity="0.42" strokeWidth="0.7"/>
              </g>

              {/* Causeways across Biscayne Bay (Julia Tuttle / Venetian / MacArthur / Rickenbacker) */}
              <path d="M 285 198 L 348 200" stroke="#E68A5C" strokeOpacity="0.22" strokeWidth="0.6" strokeDasharray="2 3"/>
              <path d="M 280 222 L 343 220" stroke="#E68A5C" strokeOpacity="0.22" strokeWidth="0.6" strokeDasharray="2 3"/>
              <path d="M 275 240 L 348 248" stroke="#E68A5C" strokeOpacity="0.18" strokeWidth="0.6" strokeDasharray="2 3"/>
              <path d="M 268 268 L 348 282" stroke="#E68A5C" strokeOpacity="0.18" strokeWidth="0.6" strokeDasharray="2 3"/>

              {/* I-95 corridor — subtle inland highway */}
              <path d="M 295 0 C 285 60, 270 130, 252 200 C 248 240, 248 290, 252 340"
                stroke="#E68A5C" strokeWidth="0.5" strokeOpacity="0.16" strokeDasharray="3 5" fill="none"/>

              {/* Fort Lauderdale — north anchor */}
              <g>
                <circle cx="324" cy="46" r="2.5" fill="#E68A5C" opacity="0.7"/>
                <circle cx="324" cy="46" r="5" fill="none" stroke="#E68A5C" strokeOpacity="0.3" strokeWidth="0.5"/>
                <text x="318" y="42" textAnchor="end" fontFamily="'Geist Mono', monospace"
                  fontSize="8.5" fill="rgba(245,239,230,0.55)" letterSpacing="0.06em">
                  FT. LAUDERDALE
                </text>
              </g>

              {/* Hollywood label (between FTL and Miami) */}
              <text x="304" y="120" textAnchor="end" fontFamily="'Geist Mono', monospace"
                fontSize="7.5" fill="rgba(245,239,230,0.32)" letterSpacing="0.06em">HOLLYWOOD</text>

              {/* Miami HQ glow + service radius */}
              <circle cx="262" cy="232" r="100" fill="url(#glow)"/>
              <circle cx="262" cy="232" r="86" fill="none"
                stroke="#C2552D" strokeWidth="1" strokeDasharray="2 4" opacity="0.55"/>

              {/* Neighborhood markers — real geographic positions */}
              {[
                { x: 268, y: 196, label: "Wynwood" },        // Wynwood / Design District
                { x: 268, y: 240, label: "Brickell" },       // Brickell
                { x: 244, y: 268, label: "Coral Gables" },   // Coral Gables
                { x: 256, y: 286, label: "Coconut Grove" },  // Coconut Grove
                { x: 354, y: 218, label: "Miami Beach" },    // Miami Beach
                { x: 198, y: 230, label: "Doral" },          // Doral (west)
                { x: 350, y: 282, label: "Key Biscayne" },   // Key Biscayne (on island)
                { x: 240, y: 322, label: "Pinecrest" },      // Pinecrest (south)
              ].map((p, i) => (
                <g key={i}>
                  <circle cx={p.x} cy={p.y} r="2.5" fill="#FAF6EF"/>
                  <circle cx={p.x} cy={p.y} r="5" fill="none" stroke="#FAF6EF" strokeWidth="0.5" opacity="0.35"/>
                </g>
              ))}

              {/* Compass rose */}
              <g transform="translate(372, 30)">
                <circle r="14" fill="rgba(245,239,230,0.05)" stroke="rgba(245,239,230,0.2)" strokeWidth="0.5"/>
                <path d="M 0 -10 L 3 0 L 0 10 L -3 0 Z" fill="#E68A5C"/>
                <text y="-18" textAnchor="middle" fontSize="8" fill="rgba(245,239,230,0.6)"
                  fontFamily="'Geist Mono', monospace">N</text>
              </g>

              {/* HQ marker — pulsing */}
              <circle cx="262" cy="232" r="6.5" fill="#E68A5C"/>
              <circle cx="262" cy="232" r="6.5" fill="none" stroke="#FAF6EF" strokeWidth="1" opacity="0.5"/>
              <circle cx="262" cy="232" r="13" fill="none" stroke="#E68A5C" strokeWidth="1.5" opacity="0.6">
                <animate attributeName="r" from="7" to="24" dur="2.2s" repeatCount="indefinite"/>
                <animate attributeName="opacity" from="0.7" to="0" dur="2.2s" repeatCount="indefinite"/>
              </circle>

              {/* HQ label */}
              <text x="262" y="252" textAnchor="middle" fontFamily="'Geist Mono', monospace"
                fontSize="9.5" fill="#E68A5C" fontWeight="600">FixMyCasa HQ</text>
              <text x="262" y="263" textAnchor="middle" fontFamily="'Geist Mono', monospace"
                fontSize="7.5" fill="rgba(245,239,230,0.45)" letterSpacing="0.12em">DOWNTOWN MIAMI</text>

              {/* Atlantic Ocean label */}
              <text x="392" y="170" textAnchor="end" fontFamily="'Newsreader', serif" fontStyle="italic"
                fontSize="11" fill="rgba(245,239,230,0.22)" letterSpacing="0.15em">Atlantic Ocean</text>

              {/* Biscayne Bay label */}
              <text x="305" y="278" textAnchor="middle" fontFamily="'Newsreader', serif" fontStyle="italic"
                fontSize="9" fill="rgba(245,239,230,0.28)" letterSpacing="0.08em">Biscayne Bay</text>

              {/* Coordinates */}
              <text x="396" y="333" textAnchor="end" fontFamily="'Geist Mono', monospace"
                fontSize="8.5" fill="rgba(245,239,230,0.4)">25.7617° N · 80.1918° W</text>
            </svg>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
window.HowItWorks = HowItWorks;
window.Testimonials = Testimonials;
window.ServiceArea = ServiceArea;