// Problem section — Traffic / Systems flow with leaks

function FlowDiagram() {
  const stages = [
    { label: "Traffic", note: "Ads · SEO · Social", leak: false },
    { label: "Lead Generation", note: "Forms · Calls · Chat", leak: true, leakLabel: "Missed forms" },
    { label: "Follow Up", note: "Speed · Cadence · Channel", leak: true, leakLabel: "Slow response" },
    { label: "Sales Process", note: "Pipeline · Scripts · Offers", leak: true, leakLabel: "No structure" },
    { label: "Customer", note: "Onboarding · Delivery", leak: false },
    { label: "Retention", note: "Lifetime value · Referrals", leak: true, leakLabel: "No system" },
  ];

  return (
    <div style={{
      background: "var(--paper)",
      border: "1px solid var(--line)",
      borderRadius: "var(--radius-lg)",
      padding: "40px clamp(20px, 4vw, 56px)",
      position: "relative",
      overflow: "hidden",
    }}>
      <div className="row" style={{ justifyContent: "space-between", marginBottom: 28, alignItems: "center" }}>
        <SectionLabel index="FIG. 01" label="Where growth breaks" />
        <div className="row gap-3" style={{ fontSize: 12, color: "var(--muted)" }}>
          <span className="row gap-2" style={{ alignItems: "center" }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--ink)" }}></span>
            Healthy
          </span>
          <span className="row gap-2" style={{ alignItems: "center" }}>
            <span style={{ width: 10, height: 10, borderRadius: "50%", background: "var(--accent)" }}></span>
            Leak
          </span>
        </div>
      </div>

      <div className="flow-grid" style={{
        display: "grid",
        gridTemplateColumns: `repeat(${stages.length}, 1fr)`,
        gap: 0,
        alignItems: "stretch",
        position: "relative",
      }}>
        {stages.map((s, i) => (
          <Reveal key={s.label} delay={i * 90} style={{ position: "relative" }}>
            <div style={{
              display: "flex",
              flexDirection: "column",
              gap: 10,
              padding: "20px 14px",
              borderRight: i < stages.length - 1 ? "1px dashed var(--line-strong)" : "none",
              height: "100%",
            }}>
              <div className="idx">0{i + 1}</div>
              <div style={{ fontSize: 19, fontWeight: 500, letterSpacing: "-0.02em" }}>{s.label}</div>
              <div style={{ fontSize: 12.5, color: "var(--muted)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.06em" }}>{s.note}</div>
              <div style={{ flex: 1 }}></div>
              {s.leak ? (
                <div className="row gap-2" style={{ alignItems: "center" }}>
                  <span style={{
                    display: "inline-block",
                    width: 8, height: 8,
                    borderRadius: "50%",
                    background: "var(--accent)",
                    boxShadow: "0 0 0 0 rgba(255,90,31,0.4)",
                    animation: "pulse 2s ease-out infinite",
                  }}></span>
                  <span style={{ fontSize: 11.5, color: "var(--accent)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>{s.leakLabel}</span>
                </div>
              ) : (
                <div className="row gap-2" style={{ alignItems: "center" }}>
                  <span style={{ display: "inline-block", width: 8, height: 8, borderRadius: "50%", background: "var(--ink)" }}></span>
                  <span style={{ fontSize: 11.5, color: "var(--muted)", fontFamily: "var(--mono)", textTransform: "uppercase", letterSpacing: "0.08em" }}>Healthy</span>
                </div>
              )}
            </div>
            {/* Arrow */}
            {i < stages.length - 1 && (
              <div style={{
                position: "absolute",
                top: "50%",
                right: -8,
                transform: "translateY(-50%)",
                zIndex: 2,
                background: "var(--paper)",
                width: 16, height: 16,
                borderRadius: "50%",
                border: "1px solid var(--line-strong)",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
              }}>
                <svg width="8" height="8" viewBox="0 0 8 8"><path d="M1 1L6 4L1 7" stroke="var(--ink)" strokeWidth="1.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
            )}
          </Reveal>
        ))}
      </div>

      <style>{`
        @keyframes pulse {
          0% { box-shadow: 0 0 0 0 rgba(255,90,31,0.5); }
          100% { box-shadow: 0 0 0 14px rgba(255,90,31,0); }
        }
        @media (max-width: 880px) {
          .flow-grid { grid-template-columns: repeat(2, 1fr) !important; }
        }
      `}</style>
    </div>
  );
}

function Problem() {
  return (
    <section id="problem" style={{ padding: "160px 0 120px" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal>
              <SectionLabel index="01" label="The Problem" />
            </Reveal>
            <Reveal delay={120}>
              <h2 className="h-1" style={{ marginTop: 32 }}>
                Marketing gets attention.<br/>
                <span style={{ color: "var(--muted-2)" }}>Systems create growth.</span>
              </h2>
            </Reveal>
          </div>
          <Reveal delay={220}>
            <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
              <p className="body">
                Businesses absolutely need visibility. More traffic. More leads. More opportunities. But growth breaks when marketing and systems operate separately.
              </p>
              <p className="body">
                Many businesses run ads, invest in websites, or improve SEO while opportunities leak through missed calls, delayed responses, poor follow up, disconnected software, or sales processes that never scale.
              </p>
              <p className="body" style={{ color: "var(--ink)" }}>
                Young Dev Group helps businesses create both sides of growth.
              </p>
            </div>
          </Reveal>
        </div>

        <Reveal delay={120}>
          <FlowDiagram />
        </Reveal>

        <Reveal delay={200}>
          <div style={{ marginTop: 120, textAlign: "center", maxWidth: 1000, marginLeft: "auto", marginRight: "auto" }}>
            <p className="h-1" style={{ fontWeight: 400, lineHeight: 1.05 }}>
              Traffic without systems creates <span style={{ color: "var(--muted-2)" }}>chaos.</span><br/>
              Systems without traffic create <span style={{ color: "var(--muted-2)" }}>silence.</span>
            </p>
            <p className="lede" style={{ marginTop: 28, color: "var(--ink)" }}>
              You need <span style={{ color: "var(--accent)", fontWeight: 500 }}>both.</span>
            </p>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

window.Problem = Problem;