const { Pill } = window.CammusDesignSystem_2ef585;

/* O MODELO ATUAL — o mundo "antes", todo em cinzas de propósito.
   O diagrama é uma teia de aranha de verdade: 13 fornecedores/ferramentas
   nomeados (pills) amarrados por ~38 fios de 1px que se cruzam pelo meio.
   Fios curtos do perímetro são mais claros (a moldura da teia); os cruzamentos
   longos internos são mais escuros (profundidade). Geometria medida das
   posições reais dos nós e redesenhada no resize. Lima: zero. */
function CurrentModelSection() {
  const boxRef = React.useRef(null);
  const nodeRefs = React.useRef([]);
  const [geom, setGeom] = React.useState({ w: 0, h: 0, segs: [] });

  const eyebrowStyle = {
    color: 'var(--cam-text-inactive)', fontSize: 'var(--fs-eyebrow)',
    fontWeight: 'var(--fw-semibold)', textTransform: 'uppercase',
    letterSpacing: 'var(--track-eyebrow)', marginBottom: 'var(--space-4)',
  };

  /* Nós nomeados (pills). Tops escalonados para não colidir no mobile. */
  const nodes = [
    { label: 'Agency', top: '4%', left: '38%' },         /* 0 — hub */
    { label: 'Analytics', top: '11%', right: '13%' },    /* 1 */
    { label: 'Freelancers', top: '24%', left: '2%' },    /* 2 */
    { label: 'Branding', top: '15%', left: '29%' },      /* 3 */
    { label: 'Software', top: '22%', right: '1%' },      /* 4 */
    { label: 'CRM', top: '44%', left: '24%' },           /* 5 — hub */
    { label: 'Social media', top: '37%', right: '8%' },  /* 6 — hub */
    { label: 'Headcount', top: '64%', left: '4%' },      /* 7 */
    { label: 'Spreadsheets', top: '80%', left: '16%' },  /* 8 */
    { label: 'Paid traffic', top: '90%', left: '39%' },  /* 9 */
    { label: 'Email mktg', top: '78%', left: '57%' },    /* 10 */
    { label: 'Design', top: '70%', right: '11%' },       /* 11 */
    { label: 'Scattered AI', top: '58%', right: '1%' },  /* 12 */
  ];

  /* Fios. tone: 0 = fundo (#242424), 1 = principal (#404040), 2 = perto (#6B6B6B).
     Perímetro curto = tom claro (moldura); diagonais longas = tons escuros. */
  const links = [
    /* Agência — o hub de cima puxa fio para quase tudo */
    { a: 0, b: 1, tone: 1 }, { a: 0, b: 2, tone: 1 }, { a: 0, b: 3, tone: 2 },
    { a: 0, b: 5, tone: 1 }, { a: 0, b: 6, tone: 1 }, { a: 0, b: 9, tone: 0 },
    { a: 0, b: 10, tone: 0 }, { a: 0, b: 11, tone: 0 },
    /* Analytics */
    { a: 1, b: 3, tone: 0 }, { a: 1, b: 4, tone: 2 }, { a: 1, b: 6, tone: 1 },
    { a: 1, b: 12, tone: 0 },
    /* Freelancers */
    { a: 2, b: 3, tone: 2 }, { a: 2, b: 5, tone: 0 }, { a: 2, b: 7, tone: 2 },
    { a: 2, b: 8, tone: 0 },
    /* Branding */
    { a: 3, b: 5, tone: 1 }, { a: 3, b: 6, tone: 0 }, { a: 3, b: 9, tone: 0 },
    /* Softwares */
    { a: 4, b: 6, tone: 0 }, { a: 4, b: 11, tone: 0 }, { a: 4, b: 12, tone: 2 },
    /* CRM — o nó do meio onde tudo se enrosca */
    { a: 5, b: 6, tone: 1 }, { a: 5, b: 7, tone: 1 }, { a: 5, b: 8, tone: 1 },
    { a: 5, b: 9, tone: 1 }, { a: 5, b: 10, tone: 0 }, { a: 5, b: 11, tone: 0 },
    { a: 5, b: 12, tone: 0 },
    /* Social media */
    { a: 6, b: 9, tone: 0 }, { a: 6, b: 10, tone: 1 }, { a: 6, b: 11, tone: 1 },
    { a: 6, b: 12, tone: 1 },
    /* Perímetro de baixo — a borda da teia */
    { a: 7, b: 8, tone: 2 }, { a: 8, b: 9, tone: 2 }, { a: 9, b: 10, tone: 2 },
    { a: 10, b: 11, tone: 2 }, { a: 11, b: 12, tone: 2 },
  ];
  const TONES = ['var(--cam-border-subtle)', 'var(--cam-border-strong)', 'var(--cam-text-inactive)'];

  React.useEffect(() => {
    const box = boxRef.current;
    if (!box) return;
    const measure = () => {
      const w = box.clientWidth, h = box.clientHeight;
      const centers = nodeRefs.current.map((el) => (
        el ? { x: el.offsetLeft + el.offsetWidth / 2, y: el.offsetTop + el.offsetHeight / 2 } : null
      ));
      if (!w || !h || centers.some((c) => !c)) return;
      /* Centro-a-centro: as pills têm fundo opaco e ficam por cima,
         então o fio "morre" exatamente na borda de cada pill. */
      const segs = links.map((l, i) => ({
        x1: centers[l.a].x, y1: centers[l.a].y,
        x2: centers[l.b].x, y2: centers[l.b].y,
        tone: l.tone, d: 0.25 + i * 0.03,
      }));
      setGeom({ w, h, segs });
    };
    measure();
    const ro = new ResizeObserver(measure);
    ro.observe(box);
    return () => ro.disconnect();
  }, []);

  return (
    <section id="model" data-screen-label="The Current Model" style={{ background: 'var(--cam-surface-base)', borderTop: '1px solid var(--cam-border-subtle)' }}>
      <div style={{ maxWidth: 'var(--page-max)', margin: '0 auto', padding: 'var(--section-pad) var(--page-gutter)' }}>
        <div className="lp-reveal">
          <div style={eyebrowStyle}>The Current Model</div>
          <h2 style={{
            margin: 0, fontSize: 'min(var(--fs-h1), calc(min(72rem, 100vw - 2 * var(--page-gutter)) / 15.5))', fontWeight: 'var(--fw-black)',
            letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            color: 'var(--cam-text-primary)',
          }}><span style={{ whiteSpace: 'nowrap' }}>Today, the marketing operation</span><br /><span style={{ whiteSpace: 'nowrap' }}>is a fragmented web.</span></h2>
          <p style={{
            margin: 'var(--space-5) 0 0', fontSize: 'var(--fs-lead)',
            color: 'var(--cam-text-secondary)', letterSpacing: 'var(--track-text)',
            lineHeight: 1.5, maxWidth: '58ch',
          }}>Agency, freelancers, software, spreadsheets, and scattered AI that don't communicate with each other.</p>
        </div>

        <div ref={boxRef} className="lp-web lp-group" aria-label="A tangled spider web of disconnected suppliers and tools" style={{ marginTop: 'var(--space-8)' }}>
          <svg aria-hidden="true" viewBox={'0 0 ' + (geom.w || 1) + ' ' + (geom.h || 1)} preserveAspectRatio="none"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block' }}>
            {geom.segs.map((s, i) => {
              const len = Math.hypot(s.x2 - s.x1, s.y2 - s.y1);
              return (
                <line key={i} className="lp-svgseg" x1={s.x1} y1={s.y1} x2={s.x2} y2={s.y2}
                  stroke={TONES[s.tone]} strokeWidth="1"
                  style={{ '--len': len, '--d': s.d + 's', strokeDasharray: len }} />
              );
            })}
          </svg>
          {nodes.map((n, i) => (
            <span key={n.label} ref={(el) => { nodeRefs.current[i] = el; }} className="lp-pop"
              style={{
                '--d': (0.1 + i * 0.06) + 's', position: 'absolute',
                top: n.top, left: n.left, right: n.right,
              }}>
              <Pill style={{ background: 'var(--cam-surface-base)' }}>{n.label}</Pill>
            </span>
          ))}
        </div>

        {/* Veredito — crescendo de luminosidade */}
        <div className="lp-group" style={{ marginTop: 'var(--space-8)' }}>
          {[
            { t: 'Many suppliers.', c: 'var(--cam-text-auxiliary)', w: 'var(--fw-medium)' },
            { t: 'High cost.', c: 'var(--cam-text-secondary)', w: 'var(--fw-semibold)' },
            { t: 'Zero autonomy.', c: 'var(--cam-text-primary)', w: 'var(--fw-black)' },
          ].map((f, i) => (
            <div key={f.t} className="lp-item" style={{
              '--d': (i * 0.18) + 's',
              color: f.c, fontWeight: f.w, fontSize: 'var(--fs-h2)',
              letterSpacing: 'var(--track-display)', lineHeight: 'var(--lh-snug)',
            }}>{f.t}</div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.CurrentModelSection = CurrentModelSection;