// Why We're Different

function CollabVisual() {
  // Abstract "collaboration" SVG composition - two nodes meeting, network
  return (
    <div style={{
      position: "relative",
      width: "100%",
      aspectRatio: "4/5",
      borderRadius: "var(--radius-lg)",
      background: "linear-gradient(170deg, #0a0a0a 0%, #1a1a1a 100%)",
      overflow: "hidden",
      border: "1px solid var(--line)",
    }}>
      {/* Grid overlay */}
      <svg width="100%" height="100%" style={{ position: "absolute", inset: 0, opacity: 0.18 }}>
        <defs>
          <pattern id="gd" width="40" height="40" patternUnits="userSpaceOnUse">
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.35)" strokeWidth="0.6"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#gd)"/>
      </svg>

      {/* Animated connections */}
      <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        <defs>
          <radialGradient id="glow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(255,90,31,0.5)"/>
            <stop offset="100%" stopColor="rgba(255,90,31,0)"/>
          </radialGradient>
        </defs>

        {/* Soft glow center */}
        <circle cx="200" cy="250" r="160" fill="url(#glow)" opacity="0.6"/>

        {/* Connecting lines */}
        <g stroke="rgba(255,255,255,0.25)" strokeWidth="1" fill="none">
          <line x1="80" y1="120" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3.2s" repeatCount="indefinite"/>
          </line>
          <line x1="320" y1="100" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3.8s" repeatCount="indefinite" begin="0.4s"/>
          </line>
          <line x1="80" y1="380" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3.4s" repeatCount="indefinite" begin="0.8s"/>
          </line>
          <line x1="320" y1="400" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="4s" repeatCount="indefinite" begin="1.2s"/>
          </line>
          <line x1="60" y1="250" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3s" repeatCount="indefinite" begin="0.2s"/>
          </line>
          <line x1="340" y1="250" x2="200" y2="250">
            <animate attributeName="opacity" values="0.2;1;0.2" dur="3.6s" repeatCount="indefinite" begin="0.6s"/>
          </line>
        </g>

        {/* Outer nodes */}
        {[
          [80, 120], [320, 100], [60, 250], [340, 250], [80, 380], [320, 400]
        ].map(([x, y], i) => (
          <g key={i}>
            <circle cx={x} cy={y} r="14" fill="#0a0a0a" stroke="rgba(255,255,255,0.5)"/>
            <circle cx={x} cy={y} r="4" fill="#fff"/>
          </g>
        ))}

        {/* Center node */}
        <circle cx="200" cy="250" r="40" fill="#fff"/>
        <circle cx="200" cy="250" r="50" fill="none" stroke="rgba(255,90,31,0.6)" strokeWidth="1">
          <animate attributeName="r" values="40;70;40" dur="3s" repeatCount="indefinite"/>
          <animate attributeName="opacity" values="0.8;0;0.8" dur="3s" repeatCount="indefinite"/>
        </circle>
        <text x="200" y="255" textAnchor="middle" fontSize="11" fill="#0a0a0a" fontFamily="JetBrains Mono, monospace" fontWeight="600" letterSpacing="0.1em">YDG</text>
      </svg>

      {/* Caption */}
      <div style={{
        position: "absolute",
        bottom: 20,
        left: 20,
        right: 20,
        display: "flex",
        justifyContent: "space-between",
        color: "rgba(255,255,255,0.6)",
        fontFamily: "var(--mono)",
        fontSize: 10.5,
        letterSpacing: "0.16em",
        textTransform: "uppercase",
      }}>
        <span>FIG. 02 — Partnership Network</span>
        <span style={{ color: "var(--accent)" }}>● Live</span>
      </div>
    </div>
  );
}

function Different() {
  const cards = [
    { t: "Direct communication", d: "No layers. Talk to the people building." },
    { t: "Hands on strategy", d: "Sleeves up alongside your team." },
    { t: "Dedicated partnership", d: "A small client list by design." },
    { t: "Customized systems", d: "Built to your operation, not a template." },
    { t: "Built around your business", d: "Your goals shape our roadmap." },
    { t: "Long term thinking", d: "Compounding wins beat quick fixes." },
  ];
  return (
    <section id="different" style={{ padding: "160px 0 140px" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 96, alignItems: "start" }} className="diff-grid">
          <div>
            <Reveal>
              <CollabVisual />
            </Reveal>
            <Reveal delay={200}>
              <figure style={{
                margin: "32px 0 0",
                padding: "28px 32px",
                background: "var(--paper)",
                border: "1px solid var(--line)",
                borderRadius: 22,
              }}>
                <blockquote style={{ margin: 0, fontSize: 20, lineHeight: 1.35, letterSpacing: "-0.018em" }}>
                  <span style={{ color: "var(--accent)" }}>“</span>The best growth strategies are built through relationships, not handoffs.<span style={{ color: "var(--accent)" }}>”</span>
                </blockquote>
                <figcaption style={{ marginTop: 16, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--muted)" }}>
                  — Working Principle 02
                </figcaption>
              </figure>
            </Reveal>
          </div>

          <div>
            <Reveal><SectionLabel index="03" label="Why We're Different" /></Reveal>
            <Reveal delay={100}>
              <h2 className="h-1" style={{ marginTop: 32, maxWidth: "16ch" }}>
                You are not <br/>client <span style={{ color: "var(--muted-2)" }}>#4,372.</span>
              </h2>
            </Reveal>
            <Reveal delay={200}>
              <p className="lede" style={{ marginTop: 28, maxWidth: "48ch" }}>
                We intentionally keep our client group small because relationships create better businesses.
              </p>
            </Reveal>
            <Reveal delay={280}>
              <div style={{ display: "flex", flexDirection: "column", gap: 16, marginTop: 28 }}>
                <p className="body">
                  Many agencies stack hundreds or thousands of clients onto a handful of account managers. We built Young Dev Group differently.
                </p>
                <p className="body">
                  We believe businesses grow faster through partnership. We spend time understanding your business, goals, team, strengths and opportunities. We build systems <em style={{ fontStyle: "normal", color: "var(--ink)" }}>together</em>. Not <em style={{ fontStyle: "normal", color: "var(--ink)" }}>at you</em>.
                </p>
              </div>
            </Reveal>

            <div className="diff-cards" style={{
              display: "grid",
              gridTemplateColumns: "1fr 1fr",
              gap: 12,
              marginTop: 40,
            }}>
              {cards.map((c, i) => (
                <Reveal key={c.t} delay={i * 60}>
                  <div className="card" style={{ padding: 22, minHeight: 110 }}>
                    <div className="row gap-2" style={{ alignItems: "center" }}>
                      <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--accent)" }}></span>
                      <span style={{ fontSize: 15, fontWeight: 500, letterSpacing: "-0.015em" }}>{c.t}</span>
                    </div>
                    <p style={{ margin: "10px 0 0", fontSize: 13.5, color: "var(--muted)", lineHeight: 1.5 }}>{c.d}</p>
                  </div>
                </Reveal>
              ))}
            </div>
          </div>
        </div>

        <Reveal delay={120}>
          <div style={{
            marginTop: 120,
            padding: "72px 32px",
            borderTop: "1px solid var(--line)",
            borderBottom: "1px solid var(--line)",
            textAlign: "center",
          }}>
            <h3 className="h-1" style={{ fontWeight: 400 }}>
              Less clients. More attention. <br/>
              <span style={{ color: "var(--accent)" }}>Better execution.</span>
            </h3>
          </div>
        </Reveal>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .diff-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
        @media (max-width: 560px) {
          .diff-cards { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

window.Different = Different;