// Round 2 — Services (outcome-led), Destinations (reordered, no specialty tags),
// Comparator (all-in vs. surgery-only + dollar savings), FAQ

function Services({ copy }) {
  const s = copy.services;
  return (
    <Section id="services" pad="lg">
      <div style={{ maxWidth: 760 }}>
        <Eyebrow>{s.eyebrow}</Eyebrow>
        <div style={{ height: 16 }} />
        <Display size="lg">{s.title}</Display>
      </div>
      <div style={{ height: 40 }} />
      <div>
        {s.items.map((it, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(200px, 1.2fr) minmax(200px, 1fr)',
            gap: 'clamp(16px, 3vw, 48px)',
            padding: 'clamp(18px, 2vw, 28px) 0',
            borderTop: `1px solid ${TOKENS.color.hairline}`,
            borderBottom: i === s.items.length - 1 ? `1px solid ${TOKENS.color.hairline}` : 'none',
            alignItems: 'baseline',
          }}>
            <div style={{
              fontFamily: TOKENS.font.display, fontWeight: 400,
              fontSize: 'clamp(20px, 2vw, 24px)', color: TOKENS.color.navy,
              letterSpacing: '-0.01em',
            }}>{it.t}</div>
            <div style={{
              fontFamily: TOKENS.font.sans, fontSize: 15,
              color: TOKENS.color.inkSoft, fontStyle: 'italic',
            }}>{it.outcome}</div>
          </div>
        ))}
      </div>
    </Section>
  );
}

// City icons — thin gold lines, 1.25 stroke, 56×56 viewBox.
function DestIcon({ name, color = '#C9A961' }) {
  const props = { width: 56, height: 56, viewBox: '0 0 56 56', fill: 'none', stroke: color, strokeWidth: 1.25, strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'peaks') {
    return (
      <svg {...props} aria-hidden="true">
        <path d="M4 44 L18 22 L26 32 L36 14 L52 44 Z" />
        <path d="M14 30 L18 26 M22 26 L18 22" opacity="0.55" />
        <path d="M32 22 L36 18 M40 22 L36 14" opacity="0.55" />
        <circle cx="44" cy="10" r="2.2" />
      </svg>
    );
  }
  if (name === 'palm' || name === 'waves') {
    // Minimalist palm tree — same gold stroke / 1.25 weight as siblings
    return (
      <svg {...props} aria-hidden="true">
        {/* trunk with subtle segmentation */}
        <path d="M28 52 Q26 40 28 22" />
        <path d="M27 44 L29 44 M26.6 38 L29.4 38 M26.4 32 L29.6 32 M26.4 26 L29.6 26" opacity="0.55" />
        {/* fronds radiating from crown */}
        <path d="M28 22 Q18 18 8 22" />
        <path d="M28 22 Q20 14 12 12" />
        <path d="M28 22 Q26 12 22 4" opacity="0.7" />
        <path d="M28 22 Q38 18 48 22" />
        <path d="M28 22 Q36 14 44 12" />
        <path d="M28 22 Q30 12 34 4" opacity="0.7" />
        {/* coconut cluster */}
        <circle cx="28" cy="22" r="1.6" />
      </svg>
    );
  }
  if (name === 'bloom') {
    return (
      <svg {...props} aria-hidden="true">
        <path d="M28 52 V28" />
        <path d="M28 28 Q18 24 14 14" />
        <path d="M28 28 Q38 24 42 14" />
        <circle cx="28" cy="20" r="3.5" />
        <circle cx="22" cy="14" r="2.6" />
        <circle cx="34" cy="14" r="2.6" />
        <circle cx="28" cy="9" r="2.6" />
        <path d="M22 38 Q26 34 28 36" opacity="0.6" />
      </svg>
    );
  }
  // sun (also catches legacy 'valley')
  return (
    <svg {...props} aria-hidden="true">
      {/* core */}
      <circle cx="28" cy="28" r="8" />
      {/* eight rays — cardinal stronger, diagonals softer */}
      <path d="M28 6 V14" />
      <path d="M28 42 V50" />
      <path d="M6 28 H14" />
      <path d="M42 28 H50" />
      <path d="M12.5 12.5 L18 18" opacity="0.7" />
      <path d="M38 38 L43.5 43.5" opacity="0.7" />
      <path d="M43.5 12.5 L38 18" opacity="0.7" />
      <path d="M12.5 43.5 L18 38" opacity="0.7" />
    </svg>
  );
}

function Destinations({ copy }) {
  const d = copy.destinations;
  const cream = '#F5F1EA';
  const gold  = '#C9A961';
  // Track viewport for responsive grid (1 col mobile, 2 tablet, 4 desktop)
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onR = () => setW(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const cityCols = w < 768 ? '1fr' : (w < 1024 ? 'repeat(2, minmax(0, 1fr))' : 'repeat(4, minmax(0, 1fr))');
  return (
    <Section id="destinations" pad="lg" bg={TOKENS.color.paper}>
      {/* Header — editorial, generous */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
        gap: 'clamp(24px, 4vw, 64px)',
        alignItems: 'end',
        marginBottom: 'clamp(40px, 5vw, 72px)',
      }}>
        <div style={{ maxWidth: 720 }}>
          <Eyebrow style={{ color: TOKENS.color.navy }}>{d.eyebrow}</Eyebrow>
          <div style={{ height: 18 }} />
          <Display size="lg">{d.title}</Display>
        </div>
        <div style={{ maxWidth: 360, paddingBottom: 6 }}>
          <p style={{
            margin: 0, fontFamily: TOKENS.font.sans, fontSize: 15,
            lineHeight: 1.6, color: TOKENS.color.inkSoft, fontStyle: 'italic',
          }}>{d.sub}</p>
        </div>
      </div>

      {/* Flight-times subhead — centered, discreet, mono caps */}
      <div style={{
        textAlign: 'center',
        marginBottom: 'clamp(20px, 2.4vw, 32px)',
        marginTop: 'clamp(-16px, -1.2vw, -8px)',
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          fontFamily: TOKENS.font.mono, fontSize: 10.5,
          letterSpacing: '0.18em', color: TOKENS.color.inkMute,
          textTransform: 'uppercase',
        }}>
          <span aria-hidden="true" style={{ width: 28, height: 1, background: 'rgba(27,54,97,0.18)' }} />
          {d.flightHeader}
          <span aria-hidden="true" style={{ width: 28, height: 1, background: 'rgba(27,54,97,0.18)' }} />
        </span>
      </div>

      {/* Card grid — 4 columns desktop, 2 tablet, 1 mobile */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: cityCols,
        gap: 'clamp(16px, 1.6vw, 24px)',
      }}>
        {d.items.map((c, i) => (
          <article key={i} style={{
            background: TOKENS.color.ivory,
            border: `1px solid rgba(27,54,97,0.10)`,
            padding: 'clamp(22px, 2vw, 32px)',
            display: 'flex', flexDirection: 'column',
            position: 'relative',
            transition: 'transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease',
          }}
          onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.borderColor = 'rgba(201,169,97,0.55)'; e.currentTarget.style.boxShadow = '0 16px 40px -24px rgba(27,54,97,0.25)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.borderColor = 'rgba(27,54,97,0.10)'; e.currentTarget.style.boxShadow = ''; }}
          >
            {/* Icon + Mood — aligned on the same row */}
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 22, gap: 12 }}>
              <DestIcon name={c.icon} color={gold} />
              <span style={{ fontFamily: TOKENS.font.mono, fontSize: 10, letterSpacing: '0.12em', color: TOKENS.color.inkMute, textTransform: 'uppercase', textAlign: 'right' }}>
                {c.mood}
              </span>
            </div>

            {/* City name */}
            <h3 style={{
              margin: 0, fontFamily: TOKENS.font.display, fontWeight: 360,
              fontSize: 'clamp(30px, 2.6vw, 38px)', color: TOKENS.color.navy,
              letterSpacing: '-0.02em', lineHeight: 1,
            }}>{c.city}</h3>

            <div style={{ height: 22 }} />
            <div style={{ height: 1, background: 'rgba(27,54,97,0.12)', width: '100%' }} />
            <div style={{ height: 18 }} />

            {/* Practical data — definition list */}
            <dl style={{ margin: 0, display: 'grid', gap: 10 }}>
              {[
                { k: 'Climate',  v: c.climate  },
                { k: 'Altitude', v: c.altitude },
                { k: 'Flight',   v: c.flight   },
              ].map((row, j) => (
                <div key={j} style={{ display: 'grid', gridTemplateColumns: '74px 1fr', alignItems: 'baseline', gap: 12 }}>
                  <dt style={{
                    fontFamily: TOKENS.font.mono, fontSize: 9.5,
                    letterSpacing: '0.16em', color: TOKENS.color.inkMute,
                    textTransform: 'uppercase',
                  }}>{row.k}</dt>
                  <dd style={{
                    margin: 0, fontFamily: TOKENS.font.sans, fontSize: 13.5,
                    color: TOKENS.color.navy, fontWeight: 500, letterSpacing: '-0.005em',
                  }}>{row.v}</dd>
                </div>
              ))}
            </dl>

            <div style={{ height: 22 }} />

            {/* Ideal for — gold-accented pill row */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
              <span style={{ width: 18, height: 1, background: gold }} />
              <span style={{
                fontFamily: TOKENS.font.mono, fontSize: 9.5,
                letterSpacing: '0.16em', color: gold, textTransform: 'uppercase',
              }}>Ideal for</span>
            </div>
            <div style={{
              fontFamily: TOKENS.font.display, fontWeight: 400, fontStyle: 'italic',
              fontSize: 17, color: TOKENS.color.navy, lineHeight: 1.25,
              marginBottom: 16,
            }}>{c.fit}</div>

            {/* Ambiance note */}
            <p style={{
              margin: 0, fontFamily: TOKENS.font.sans, fontSize: 13.5,
              lineHeight: 1.6, color: TOKENS.color.inkSoft, textWrap: 'pretty',
              flex: 1,
            }}>{c.note}</p>
          </article>
        ))}
      </div>

      {/* Footnote */}
      <div style={{
        marginTop: 'clamp(32px, 4vw, 56px)',
        fontFamily: TOKENS.font.mono, fontSize: 10,
        letterSpacing: '0.14em', color: TOKENS.color.inkMute,
        textTransform: 'uppercase', textAlign: 'center',
      }}>
        Your concierge will recommend the city that best fits your procedure
        <span style={{ margin: '0 10px', color: gold }}>·</span>
        Four Colombian cities total
      </div>
    </Section>
  );
}

// Comparator — all-inclusive vs. surgery-only, savings in absolute dollars (midpoint)
function Comparator({ copy }) {
  const c = copy.comparator;
  const items = copy.procedures;
  const [idx, setIdx] = React.useState(0);
  const [animKey, setAnimKey] = React.useState(0);
  const current = items[idx];

  React.useEffect(() => { setAnimKey(k => k + 1); }, [idx]);

  const fmt = (r) => {
    const f = (n) => n < 10 && n % 1 !== 0 ? `$${(n * 1000).toLocaleString()}` : `$${n}K`;
    return `${f(r[0])} – ${f(r[1])}`;
  };
  const mid = (r) => (r[0] + r[1]) / 2;
  const savingsMid = Math.round((mid(current.us) - mid(current.sanna)) * 1000);
  const globalMax = Math.max(...items.map(it => it.us[1]));
  const sannaRatio = mid(current.sanna) / globalMax;
  const usRatio    = mid(current.us)    / globalMax;

  return (
    <Section id="comparator" pad="lg" bg={TOKENS.color.paper}>
      <div style={{ maxWidth: 820 }}>
        <Eyebrow>{c.eyebrow}</Eyebrow>
        <div style={{ height: 16 }} />
        <Display size="lg">{c.title}</Display>
        <div style={{ height: 12 }} />
        <p style={{ margin: 0, fontFamily: TOKENS.font.sans, fontSize: 15, color: TOKENS.color.inkSoft, lineHeight: 1.55 }}>{c.sub}</p>
      </div>
      <div style={{ height: 36 }} />

      {/* Picker */}
      <div style={{ marginBottom: 28 }}>
        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', color: TOKENS.color.inkMute, marginBottom: 10 }}>{c.pick}</div>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {items.map((it, i) => (
            <button key={i} onClick={() => setIdx(i)} style={{
              padding: '10px 16px',
              border: `1px solid ${idx === i ? TOKENS.color.navy : TOKENS.color.hairline}`,
              background: idx === i ? TOKENS.color.navy : 'transparent',
              color: idx === i ? '#fff' : TOKENS.color.navy,
              fontFamily: TOKENS.font.sans, fontSize: 13, fontWeight: 450,
              borderRadius: TOKENS.r.sm, cursor: 'pointer',
              transition: 'all 180ms ease',
            }}>{it.t}</button>
          ))}
        </div>
      </div>

      {/* Headline savings */}
      <div style={{
        padding: 'clamp(20px, 3vw, 32px)',
        background: TOKENS.color.pinkWash,
        borderLeft: `3px solid ${TOKENS.color.pink}`,
        marginBottom: 24,
      }}>
        <div style={{
          fontFamily: TOKENS.font.mono, fontSize: 10,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          color: TOKENS.color.pinkDeep,
        }}>{c.saveLabel}</div>
        <div style={{ height: 10 }} />
        <div key={animKey} style={{
          fontFamily: TOKENS.font.display, fontWeight: 420,
          fontSize: 'clamp(34px, 5vw, 56px)', color: TOKENS.color.navy,
          letterSpacing: '-0.02em', lineHeight: 1,
        }}>Save ${savingsMid.toLocaleString()}<span style={{ color: TOKENS.color.pink }}>.</span></div>
        <div style={{ height: 6 }} />
        <div style={{ fontFamily: TOKENS.font.sans, fontSize: 14, color: TOKENS.color.inkSoft, fontStyle: 'italic' }}>
          on {current.t.toLowerCase()} · midpoint comparison
        </div>
      </div>

      {/* Bars */}
      <div style={{
        padding: 'clamp(24px, 3vw, 40px)',
        background: TOKENS.color.ivoryDeep,
        display: 'grid', gap: 28,
      }}>
        <CostBar
          tag={c.sannaLabel}
          tagSub="ALL-INCLUSIVE"
          range={fmt(current.sanna)}
          ratio={sannaRatio}
          accent
          animKey={animKey}
        />
        <CostBar
          tag={c.usLabel}
          tagSub="SURGERY ONLY · +15–25% for lodging, transport, aftercare"
          range={fmt(current.us)}
          ratio={usRatio}
          accent={false}
          animKey={animKey}
        />

        <Rule style={{ marginTop: 8, background: TOKENS.color.hairline }} />

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 'clamp(20px, 3vw, 40px)' }}>
          <IncludedList heading={c.inclHead} items={c.inclList} tone="good" />
          <IncludedList heading={c.exclHead} items={c.exclList} tone="bad" />
        </div>
      </div>

      <div style={{
        marginTop: 20,
        fontFamily: TOKENS.font.mono,
        fontSize: 11,
        letterSpacing: '0.14em',
        textTransform: 'uppercase',
        color: TOKENS.color.inkMute,
        textAlign: 'center',
        lineHeight: 1.8,
      }}>
        Board-certified surgeons
        <span style={{ margin: '0 12px', color: TOKENS.color.pink }}>·</span>
        Licensed Colombian clinics
        <span style={{ margin: '0 12px', color: TOKENS.color.pink }}>·</span>
        End-to-end concierge coordination
      </div>
    </Section>
  );
}

function CostBar({ tag, tagSub, range, ratio, accent, animKey }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10, gap: 16, flexWrap: 'wrap' }}>
        <div>
          <div style={{
            fontFamily: TOKENS.font.sans, fontSize: 'clamp(15px, 1.4vw, 19px)', fontWeight: 600,
            color: TOKENS.color.navy, letterSpacing: '0.005em',
          }}>{tag}</div>
          <div style={{
            fontFamily: TOKENS.font.mono, fontSize: 10,
            letterSpacing: '0.1em', color: accent ? TOKENS.color.pinkDeep : TOKENS.color.inkMute,
            marginTop: 4,
          }}>{tagSub}</div>
        </div>
        <div style={{
          fontFamily: TOKENS.font.display, fontWeight: 420,
          fontSize: 'clamp(22px, 2vw, 26px)', color: TOKENS.color.navy,
          letterSpacing: '-0.01em',
        }}>{range}</div>
      </div>
      <div style={{ position: 'relative', height: 10, background: 'rgba(27,54,97,0.06)' }}>
        <div key={animKey} style={{
          position: 'absolute', top: 0, left: 0, bottom: 0,
          width: `${Math.max(8, ratio * 100)}%`,
          background: accent ? TOKENS.color.pink : TOKENS.color.navy,
          animation: 'sannatrip-bar-grow 700ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards',
          transformOrigin: 'left',
        }} />
      </div>
    </div>
  );
}

function IncludedList({ heading, items, tone }) {
  const mark = tone === 'good' ? '+' : '—';
  const col  = tone === 'good' ? TOKENS.color.navy : TOKENS.color.inkMute;
  return (
    <div>
      <div style={{
        fontFamily: TOKENS.font.mono, fontSize: 10,
        letterSpacing: '0.1em', textTransform: 'uppercase',
        color: TOKENS.color.inkMute, marginBottom: 12,
      }}>{heading}</div>
      {items.map((it, i) => (
        <div key={i} style={{
          display: 'flex', gap: 10, alignItems: 'baseline',
          padding: '6px 0',
          fontFamily: TOKENS.font.sans, fontSize: 13.5,
          color: TOKENS.color.inkSoft,
          borderBottom: i < items.length - 1 ? `1px solid ${TOKENS.color.hairlineSoft}` : 'none',
        }}>
          <span style={{ color: col, fontFamily: TOKENS.font.mono, fontSize: 12, width: 12 }}>{mark}</span>
          <span>{it}</span>
        </div>
      ))}
    </div>
  );
}

function FAQ({ copy }) {
  const f = copy.faq;
  const [open, setOpen] = React.useState(0);
  return (
    <Section id="faq" pad="lg" bg={TOKENS.color.ivory}>
      <div style={{ maxWidth: 760 }}>
        <Eyebrow>{f.eyebrow}</Eyebrow>
        <div style={{ height: 16 }} />
        <Display size="lg">{f.title}</Display>
      </div>
      <div style={{ height: 40 }} />
      <div style={{ maxWidth: 860 }}>
        {f.items.map((it, i) => {
          const isOpen = open === i;
          return (
            <div key={i} style={{
              borderTop: `1px solid ${TOKENS.color.hairline}`,
              borderBottom: i === f.items.length - 1 ? `1px solid ${TOKENS.color.hairline}` : 'none',
            }}>
              <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                background: 'transparent', border: 'none', cursor: 'pointer',
                fontFamily: TOKENS.font.display, fontWeight: 420,
                fontSize: 'clamp(17px, 1.6vw, 22px)', color: TOKENS.color.navy,
                letterSpacing: '-0.01em',
              }}>
                <span>{it.q}</span>
                <span style={{ width: 28, height: 28, position: 'relative', flexShrink: 0, marginLeft: 16 }}>
                  <span style={{ position: 'absolute', top: '50%', left: 0, right: 0, height: 1, background: TOKENS.color.navy, transform: 'translateY(-50%)' }} />
                  <span style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: TOKENS.color.navy, transform: `translateX(-50%) scaleY(${isOpen ? 0 : 1})`, transition: 'transform 240ms ease' }} />
                </span>
              </button>
              <div style={{ overflow: 'hidden', maxHeight: isOpen ? 400 : 0, transition: 'max-height 320ms ease' }}>
                <p style={{
                  margin: 0, paddingBottom: 24, maxWidth: 640,
                  fontFamily: TOKENS.font.sans, fontSize: 15,
                  lineHeight: 1.6, color: TOKENS.color.inkSoft, textWrap: 'pretty',
                }}>{it.a}</p>
              </div>
            </div>
          );
        })}
      </div>
    </Section>
  );
}

Object.assign(window, { Services, Destinations, Comparator, FAQ });
