// site/components.jsx — reusable atoms shared across sections.

// ─── Wordmark — uses the official SVG via inline color inheritance ─────────
function Wordmark({ height = 28, color = 'currentColor', className = '' }) {
  // We use a CSS mask trick: load the SVG (which uses currentColor) as <img>.
  // Easier: just <img> the file — its paths use fill="currentColor", which
  // sadly an <img> tag can't recolor. So we inline a stripped version.
  return (
    <span className={'st-wordmark-wrap ' + className} style={{ display: 'inline-flex', alignItems: 'center', color, lineHeight: 0 }}>
      <svg height={height} viewBox="0 0 570 87" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style={{ display: 'block' }}>
        <use href="#showtime-wordmark-paths" />
      </svg>
    </span>
  );
}

// Mount this once near the root so <use> refs work.
function WordmarkDefs() {
  return (
    <svg width="0" height="0" style={{ position: 'absolute' }} aria-hidden="true">
      <defs>
        <g id="showtime-wordmark-paths">
          <path d="M 27.247 87 C 22.087 87 17.493 86.104 13.465 84.312 C 9.436 82.519 6.255 80.082 3.923 76.999 C 1.59 73.844 0.283 70.331 0 66.46 L 17.917 66.46 C 18.129 68.539 19.084 70.224 20.78 71.514 C 22.476 72.805 24.561 73.45 27.035 73.45 C 29.297 73.45 31.028 73.02 32.23 72.159 C 33.502 71.227 34.138 70.045 34.138 68.611 C 34.138 66.89 33.255 65.635 31.488 64.847 C 29.721 63.986 26.858 63.054 22.9 62.051 C 18.659 61.047 15.126 60.007 12.298 58.932 C 9.471 57.785 7.033 56.028 4.983 53.663 C 2.933 51.225 1.908 47.963 1.908 43.876 C 1.908 40.435 2.827 37.316 4.665 34.52 C 6.573 31.653 9.33 29.394 12.934 27.745 C 16.61 26.096 20.957 25.272 25.975 25.272 C 33.396 25.272 39.227 27.136 43.468 30.864 C 47.78 34.592 50.253 39.539 50.89 45.705 L 34.138 45.705 C 33.856 43.625 32.937 41.977 31.382 40.758 C 29.898 39.539 27.919 38.93 25.445 38.93 C 23.324 38.93 21.699 39.36 20.568 40.22 C 19.437 41.009 18.872 42.12 18.872 43.554 C 18.872 45.274 19.755 46.565 21.522 47.425 C 23.36 48.286 26.187 49.146 30.004 50.006 C 34.386 51.153 37.955 52.3 40.712 53.447 C 43.468 54.523 45.871 56.315 47.921 58.824 C 50.041 61.262 51.137 64.56 51.208 68.718 C 51.208 72.231 50.218 75.386 48.239 78.182 C 46.331 80.906 43.539 83.057 39.863 84.634 C 36.259 86.211 32.053 87 27.247 87 Z"></path>
          <path d="M 98.664 25.487 C 105.449 25.487 110.892 27.781 114.991 32.37 C 119.09 36.886 121.14 43.124 121.14 51.082 L 121.14 86.14 L 103.117 86.14 L 103.117 53.555 C 103.117 49.54 102.092 46.422 100.042 44.199 C 97.992 41.977 95.236 40.865 91.773 40.865 C 88.309 40.865 85.553 41.977 83.503 44.199 C 81.453 46.422 80.428 49.54 80.428 53.555 L 80.428 86.14 L 62.299 86.14 L 62.299 6.56 L 80.428 6.56 L 80.428 34.198 C 82.266 31.545 84.775 29.43 87.956 27.853 C 91.136 26.276 94.706 25.487 98.664 25.487 Z"></path>
          <path d="M 160.667 87 C 154.872 87 149.641 85.745 144.976 83.236 C 140.382 80.727 136.742 77.142 134.056 72.482 C 131.441 67.822 130.134 62.373 130.134 56.136 C 130.134 49.97 131.477 44.557 134.162 39.897 C 136.848 35.166 140.524 31.545 145.188 29.036 C 149.853 26.527 155.084 25.272 160.879 25.272 C 166.675 25.272 171.905 26.527 176.57 29.036 C 181.235 31.545 184.91 35.166 187.596 39.897 C 190.282 44.557 191.625 49.97 191.625 56.136 C 191.625 62.302 190.247 67.75 187.49 72.482 C 184.804 77.142 181.094 80.727 176.358 83.236 C 171.693 85.745 166.463 87 160.667 87 Z M 160.667 71.084 C 164.131 71.084 167.064 69.794 169.467 67.213 C 171.941 64.632 173.178 60.939 173.178 56.136 C 173.178 51.333 171.976 47.64 169.573 45.059 C 167.241 42.478 164.343 41.188 160.879 41.188 C 157.345 41.188 154.412 42.478 152.08 45.059 C 149.747 47.569 148.581 51.261 148.581 56.136 C 148.581 60.939 149.712 64.632 151.974 67.213 C 154.306 69.794 157.204 71.084 160.667 71.084 Z"></path>
          <path d="M 286.165 26.132 L 270.156 86.14 L 250.118 86.14 L 240.788 47.21 L 231.141 86.14 L 211.209 86.14 L 195.094 26.132 L 213.223 26.132 L 221.599 69.041 L 231.565 26.132 L 250.754 26.132 L 260.826 68.826 L 269.096 26.132 L 286.165 26.132 Z"></path>
          <path d="M 326.051 70.546 L 326.051 86.14 L 316.827 86.14 C 310.254 86.14 305.13 84.527 301.454 81.3 C 297.779 78.002 295.941 72.661 295.941 65.277 L 295.941 41.403 L 288.732 41.403 L 288.732 26.132 L 295.941 26.132 L 295.941 11.507 L 314.071 11.507 L 314.071 26.132 L 325.945 26.132 L 325.945 41.403 L 314.071 41.403 L 314.071 65.492 C 314.071 67.284 314.495 68.575 315.343 69.363 C 316.191 70.152 317.605 70.546 319.584 70.546 L 326.051 70.546 Z"></path>
          <path d="M 345.267 19.895 C 342.086 19.895 339.471 18.963 337.421 17.099 C 335.442 15.163 334.453 12.797 334.453 10.001 C 334.453 7.134 335.442 4.768 337.421 2.904 C 339.471 0.968 342.086 0 345.267 0 C 348.377 0 350.921 0.968 352.9 2.904 C 354.95 4.768 355.975 7.134 355.975 10.001 C 355.975 12.797 354.95 15.163 352.9 17.099 C 350.921 18.963 348.377 19.895 345.267 19.895 Z M 354.279 26.132 L 354.279 86.14 L 336.149 86.14 L 336.149 26.132 L 354.279 26.132 Z"></path>
          <path d="M 442.903 25.487 C 450.254 25.487 456.085 27.745 460.396 32.262 C 464.778 36.779 466.969 43.052 466.969 51.082 L 466.969 86.14 L 448.946 86.14 L 448.946 53.555 C 448.946 49.684 447.921 46.708 445.872 44.629 C 443.892 42.478 441.136 41.403 437.602 41.403 C 434.068 41.403 431.276 42.478 429.226 44.629 C 427.247 46.708 426.258 49.684 426.258 53.555 L 426.258 86.14 L 408.234 86.14 L 408.234 53.555 C 408.234 49.684 407.21 46.708 405.16 44.629 C 403.181 42.478 400.424 41.403 396.89 41.403 C 393.356 41.403 390.564 42.478 388.515 44.629 C 386.536 46.708 385.546 49.684 385.546 53.555 L 385.546 86.14 L 367.417 86.14 L 367.417 26.132 L 385.546 26.132 L 385.546 33.66 C 387.384 31.151 389.787 29.179 392.756 27.745 C 395.724 26.24 399.081 25.487 402.827 25.487 C 407.28 25.487 411.238 26.455 414.702 28.391 C 418.236 30.326 420.992 33.087 422.971 36.671 C 425.021 33.373 427.813 30.685 431.347 28.606 C 434.881 26.527 438.733 25.487 442.903 25.487 Z"></path>
          <path d="M 535.415 55.168 C 535.415 56.889 535.309 58.681 535.097 60.545 L 494.067 60.545 C 494.35 64.273 495.516 67.141 497.566 69.148 C 499.687 71.084 502.266 72.052 505.306 72.052 C 509.829 72.052 512.974 70.116 514.741 66.245 L 534.037 66.245 C 533.047 70.188 531.245 73.737 528.63 76.891 C 526.086 80.046 522.87 82.519 518.982 84.312 C 515.095 86.104 510.748 87 505.942 87 C 500.146 87 494.986 85.745 490.463 83.236 C 485.939 80.727 482.405 77.142 479.861 72.482 C 477.316 67.822 476.044 62.373 476.044 56.136 C 476.044 49.899 477.281 44.45 479.755 39.79 C 482.299 35.13 485.833 31.545 490.357 29.036 C 494.88 26.527 500.075 25.272 505.942 25.272 C 511.667 25.272 516.756 26.491 521.209 28.928 C 525.661 31.366 529.125 34.843 531.599 39.36 C 534.143 43.876 535.415 49.146 535.415 55.168 Z M 516.862 50.329 C 516.862 47.174 515.802 44.665 513.681 42.801 C 511.561 40.937 508.91 40.005 505.73 40.005 C 502.69 40.005 500.111 40.901 497.99 42.693 C 495.94 44.486 494.668 47.031 494.173 50.329 L 516.862 50.329 Z"></path>
          <path d="M 568.834 7.958 L 566.713 59.47 L 551.341 59.47 L 549.22 7.958 L 568.834 7.958 Z M 559.292 87 C 556.111 87 553.496 86.068 551.447 84.204 C 549.468 82.268 548.478 79.902 548.478 77.106 C 548.478 74.239 549.468 71.837 551.447 69.901 C 553.496 67.965 556.111 66.998 559.292 66.998 C 562.402 66.998 564.946 67.965 566.925 69.901 C 568.975 71.837 570 74.239 570 77.106 C 570 79.902 568.975 82.268 566.925 84.204 C 564.946 86.068 562.402 87 559.292 87 Z"></path>
        </g>
      </defs>
    </svg>
  );
}

// ─── Buttons ───────────────────────────────────────────────────────────────
function PrimaryButton({ children, onClick, href, target, rel, size = 'md', variant = 'yellow' }) {
  const cls = 'sw-btn sw-btn--' + variant + ' sw-btn--' + size;
  if (href) return <a className={cls} href={href} target={target} rel={rel} onClick={onClick}>{children}<ArrowIcon /></a>;
  return <button className={cls} onClick={onClick}>{children}<ArrowIcon /></button>;
}

function GhostButton({ children, href, onClick, dark = false }) {
  const cls = 'sw-btn sw-btn--ghost ' + (dark ? 'sw-btn--ghost-dark' : '');
  if (href) return <a className={cls} href={href} onClick={onClick}>{children}</a>;
  return <button className={cls} onClick={onClick}>{children}</button>;
}

function ArrowIcon() {
  return (
    <svg className="sw-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M 2 7 L 12 7 M 8 3 L 12 7 L 8 11" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// ─── Eyebrow ───────────────────────────────────────────────────────────────
function Eyebrow({ children, dark = false, accent = false }) {
  return (
    <div className={'sw-eyebrow ' + (dark ? 'sw-eyebrow--dark ' : '') + (accent ? 'sw-eyebrow--accent ' : '')}>
      <span className="sw-eyebrow__dot" />
      {children}
    </div>
  );
}

// ─── Channel Pin — the yellow-circle motif from the brand manual ──────────
function ChannelPin({ id, size = 96 }) {
  const paths = {
    email: (
      <g fill="none" stroke="currentColor" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
        <rect x="26" y="34" width="68" height="52" rx="3" />
        <path d="M 30 40 L 60 62 L 90 40" />
      </g>
    ),
    whatsapp: (
      <g fill="none" stroke="currentColor" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 60 26 C 78.78 26 94 41.22 94 60 C 94 78.78 78.78 94 60 94 C 53.94 94 48.27 92.41 43.36 89.62 L 28 94 L 32.7 78.8 C 29.63 73.7 28 67.65 28 60 C 28 41.22 41.22 26 60 26 Z" />
        <path d="M 48 46 L 54 40" />
        <path d="M 51 43 C 49 47 49 52 51 57 C 55 65 61 70 70 74 C 74 75 78 75 81 73" />
        <path d="M 76 78 L 82 72" />
      </g>
    ),
    telegram: (
      <g fill="none" stroke="currentColor" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 28 58 L 92 30 L 80 92 L 60 76 L 50 86 L 50 70 L 28 58 Z" />
        <path d="M 50 70 L 80 40" />
      </g>
    ),
    sms: (
      <g fill="none" stroke="currentColor" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 26 36 L 94 36 L 94 76 L 68 76 L 60 88 L 60 76 L 26 76 Z" />
        <line x1="38" y1="52" x2="82" y2="52" />
        <line x1="38" y1="62" x2="66" y2="62" />
      </g>
    ),
    push: (
      <g fill="none" stroke="currentColor" strokeWidth="5.5" strokeLinecap="round" strokeLinejoin="round">
        <path d="M 36 78 C 36 78 42 72 42 60 C 42 50 50 42 60 42 C 70 42 78 50 78 60 C 78 72 84 78 84 78 Z" />
        <path d="M 52 86 C 52 90 56 92 60 92 C 64 92 68 90 68 86" />
        <line x1="60" y1="30" x2="60" y2="38" />
      </g>
    ),
  };
  return (
    <span className="sw-pin" style={{ width: size, height: size }} aria-hidden="true">
      <svg viewBox="0 0 120 120" width={size} height={size}>
        <circle cx="60" cy="60" r="60" fill="var(--st-yellow)" />
        <g color="#000">{paths[id]}</g>
      </svg>
    </span>
  );
}

// ─── BrandMark — the official Showtime! stylized "S" glyph ─────────────────
// 4 paths from brand-mark.svg. The body+echo colors flip per background:
//   on="white"  → body BLACK, echo YELLOW       (default)
//   on="yellow" → body BLACK, echo WHITE
//   on="black"  → body WHITE, echo YELLOW
//   on="inverted" → body YELLOW, echo BLACK
//   on="mono-black" / "mono-yellow" → single color
// The mark stands alone — no circle behind. It's a letter, not a button.
function BrandMark({ size = 96, on = 'white' }) {
  const palettes = {
    'white':       { body: '#000',     echo: '#F7C217' },
    'yellow':      { body: '#000',     echo: '#FFFFFF' },
    'black':       { body: '#FFFFFF',  echo: '#F7C217' },
    'inverted':    { body: '#F7C217',  echo: '#000'    },
    'mono-black':  { body: '#000',     echo: '#000'    },
    'mono-yellow': { body: '#F7C217',  echo: '#F7C217' },
  };
  const p = palettes[on] || palettes.white;
  return (
    <span className="sw-brandmark" style={{ width: size, height: size, display: 'inline-flex' }} aria-hidden="true">
      <svg width={size} height={size} viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M70.4546 58.8896L78.0683 69.4201C73.8998 72.4319 68.9318 74.1398 63.7926 74.3279C63.1571 74.3512 62.5226 74.3511 61.8902 74.3279L61.7938 61.3036C62.2983 61.3447 62.8065 61.3564 63.3159 61.3381C65.8852 61.2458 68.3695 60.3937 70.4546 58.8896Z" fill={p.echo}/>
        <path d="M46.0077 52.5395C50.2967 49.702 55.3308 48.2001 60.4734 48.2239C65.616 48.2476 70.636 49.7958 74.8986 52.6728C79.1612 55.5497 82.4749 59.6262 84.4206 64.3865C86.3664 69.1469 86.8567 74.3773 85.8296 79.4163C84.8025 84.4553 82.3041 89.0766 78.6505 92.6956C74.9968 96.3147 70.352 98.7689 65.3034 99.748C60.2548 100.727 55.0293 100.187 50.2877 98.1961C45.5461 96.2052 41.5014 92.8528 38.6651 88.563L49.5003 81.3896C50.9179 83.5345 52.9396 85.211 55.3098 86.207C57.6801 87.2029 60.2925 87.4737 62.8166 86.9851C65.3408 86.4965 67.6634 85.2703 69.4907 83.4618C71.3181 81.6532 72.5681 79.3434 73.0828 76.8244C73.5974 74.3054 73.3536 71.6904 72.3822 69.31C71.4107 66.9296 69.7552 64.8907 67.6251 63.4511C65.4949 62.0115 62.9857 61.2358 60.4147 61.2222C57.8437 61.2086 55.3264 61.9577 53.1811 63.3747L46.0077 52.5395Z" fill={p.body}/>
        <path d="M61.7938 61.3038L61.8902 74.328C57.408 74.164 53.0326 72.8423 49.1964 70.4771C44.8189 67.7781 41.3401 63.8417 39.2 59.1655C37.0599 54.4893 36.3545 49.2835 37.1732 44.2065C37.9919 39.1294 40.2977 34.4092 43.7992 30.6427C47.3007 26.8762 51.8405 24.2327 56.8445 23.0465C61.8485 21.8603 67.0918 22.1847 71.9114 23.9787C76.731 25.7726 80.9103 28.9555 83.9209 33.1249L73.3903 40.7385C71.8856 38.6537 69.7966 37.062 67.3873 36.1645C64.978 35.267 62.3567 35.104 59.8549 35.6962C57.353 36.2884 55.0829 37.6092 53.3316 39.4915C51.5803 41.3738 50.4264 43.7331 50.0159 46.2711C49.6055 48.8092 49.9568 51.4119 51.0255 53.7503C52.0941 56.0887 53.8322 58.0577 56.0199 59.4083C57.7738 60.4912 59.7536 61.1376 61.7938 61.3038Z" fill={p.echo}/>
      </svg>
    </span>
  );
}

// Backwards-compat alias (old code referenced ShowtimeS as a pin-in-circle).
function ShowtimeS({ size = 48, on = 'white' }) {
  return <BrandMark size={size} on={on} />;
}

// ─── Customer logo — stylized text-only placeholder ────────────────────────
function CustomerLogo({ name, src, kind, city }) {
  if (src) {
    return (
      <div className="sw-customer-logo sw-customer-logo--img" title={name}>
        <img src={src} alt={name} loading="lazy" />
      </div>
    );
  }
  // Fallback: stylized text wordmark.
  const hash = (name.charCodeAt(0) + name.charCodeAt(1)) % 5;
  const styles = [
    { fontFamily: 'Poppins, sans-serif', fontWeight: 800, textTransform: 'lowercase', letterSpacing: '-0.02em' },
    { fontFamily: '"DM Sans", sans-serif', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.18em', fontSize: '0.82em' },
    { fontFamily: 'Poppins, sans-serif', fontWeight: 500, textTransform: 'lowercase', fontStyle: 'italic', letterSpacing: '-0.01em' },
    { fontFamily: '"DM Sans", sans-serif', fontWeight: 500, letterSpacing: '0.02em' },
    { fontFamily: 'Poppins, sans-serif', fontWeight: 900, textTransform: 'uppercase', letterSpacing: '-0.02em', fontSize: '0.92em' },
  ];
  return (
    <div className="sw-customer-logo" title={city ? `${name} \u2014 ${city}` : name}>
      <span style={styles[hash]}>{name}</span>
    </div>
  );
}

// ─── Mini console / "product window" — used as visual asset in hero & elsewhere
// Stylized representation of the Showtime! console with channels + segments.
function ConsoleMock({ scale = 1 }) {
  return (
    <div className="sw-console" style={{ '--sc-scale': scale }}>
      <div className="sw-console__chrome">
        <div className="sw-console__dots">
          <span /><span /><span />
        </div>
        <div className="sw-console__url">showtime.platform / console</div>
        <div className="sw-console__profile">MC</div>
      </div>
      <div className="sw-console__body">
        <aside className="sw-console__nav">
          <div className="sw-console__logo">
            <Wordmark height={14} color="#000" />
          </div>
          <ul>
            <li className="is-active"><span className="dot" /> Community</li>
            <li><span className="dot" /> Campagne</li>
            <li><span className="dot" /> Calendario</li>
            <li><span className="dot" /> Eventi</li>
            <li><span className="dot" /> Analytics</li>
          </ul>
          <div className="sw-console__channels">
            <div className="lbl">Canali</div>
            <div className="row"><ChannelPin id="email" size={22} /> <span>Email</span><span className="dim">12.4k</span></div>
            <div className="row"><ChannelPin id="whatsapp" size={22} /> <span>WhatsApp</span><span className="dim">3.1k</span></div>
            <div className="row"><ChannelPin id="telegram" size={22} /> <span>Telegram</span><span className="dim">8.7k</span></div>
            <div className="row"><ChannelPin id="sms" size={22} /> <span>SMS</span><span className="dim">5.2k</span></div>
            <div className="row"><ChannelPin id="push" size={22} /> <span>Push</span><span className="dim">2.4k</span></div>
          </div>
        </aside>
        <section className="sw-console__main">
          <div className="sw-console__header">
            <div>
              <div className="kicker">community</div>
              <div className="title">i tuoi 18.247 contatti</div>
            </div>
            <button className="sw-console__send">+ Nuova campagna</button>
          </div>
          <div className="sw-console__cards">
            <div className="card">
              <div className="card__k">Nuovi questo mese</div>
              <div className="card__v">+842</div>
              <div className="card__bar"><span style={{ width: '68%' }} /></div>
            </div>
            <div className="card">
              <div className="card__k">Tasso di apertura</div>
              <div className="card__v">42<span className="card__sm">%</span></div>
              <div className="card__bar"><span style={{ width: '84%' }} /></div>
            </div>
            <div className="card">
              <div className="card__k">Risposte WhatsApp</div>
              <div className="card__v">1.2<span className="card__sm">k</span></div>
              <div className="card__bar"><span style={{ width: '52%' }} /></div>
            </div>
          </div>
          <div className="sw-console__segments">
            <div className="seg-head">Segmenti recenti</div>
            <div className="seg-row">
              <span className="seg-tag yellow">Soci 2025</span>
              <span className="seg-dim">4.218 contatti</span>
              <span className="seg-dim">aggiornato 2h fa</span>
            </div>
            <div className="seg-row">
              <span className="seg-tag">Visitatori mostra "Caravaggio"</span>
              <span className="seg-dim">2.871</span>
              <span className="seg-dim">aggiornato ieri</span>
            </div>
            <div className="seg-row">
              <span className="seg-tag">Famiglie con bambini</span>
              <span className="seg-dim">1.504</span>
              <span className="seg-dim">aggiornato 3g fa</span>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

Object.assign(window, {
  Wordmark, WordmarkDefs,
  PrimaryButton, GhostButton, ArrowIcon,
  Eyebrow, ChannelPin, BrandMark, ShowtimeS,
  CustomerLogo, ConsoleMock,
});
