// Reusable components

// Persera symbol — P with extending strokes
const PerseraMark = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="-2 -2 75 75" fill={color} style={{display:'inline-block'}} aria-hidden="true">
    <path d="M54.103 18.3299V44.6359C54.103 46.0929 52.918 47.2789 51.46 47.2789H18.33C16.873 47.2789 15.687 46.0929 15.687 44.6359V18.3299C15.687 16.8729 16.873 15.6869 18.33 15.6869H51.46C52.918 15.6869 54.103 16.8729 54.103 18.3299ZM66.52 25.4289L55.585 14.5639L44.624 3.60287C42.317 1.29587 39.189 -0.000137329 35.926 -0.000137329H17.2C15.741 -0.000137329 14.559 1.18286 14.559 2.64186V11.7239C14.559 12.2359 14.144 12.6509 13.632 12.6509H2.642C1.183 12.6509 0 13.8339 0 15.2929V28.8109C0 32.0649 1.323 35.2449 3.629 37.5359L12.021 45.8729C12.608 46.4569 12.195 47.4579 11.367 47.4579H1.94C0.869002 47.4579 0 48.3269 0 49.3979V69.0819C0 70.2019 0.908 71.1099 2.028 71.1099H13.479C14.599 71.1099 15.507 70.2019 15.507 69.0819V51.5829C15.507 50.7569 16.506 50.3429 17.09 50.9269L25.525 59.3619C27.832 61.6689 30.961 62.9649 34.223 62.9649H52.952C54.409 62.9649 55.591 61.7839 55.591 60.3259V51.2389C55.591 50.7269 56.006 50.3119 56.518 50.3119H67.508C68.961 50.3119 70.149 49.1229 70.149 47.6699V34.1519C70.149 30.8989 68.826 27.7199 66.52 25.4289Z"/>
  </svg>
);

// Persera lockup
const Wordmark = ({ size = 18, color = "currentColor" }) => (
  <svg height={size * 2.6} viewBox="0 -3 380 78" fill={color} style={{display:'block'}} aria-label="Persera">
    <path d="M135.14 23.741C135.14 33.567 129.538 35.489 119.863 35.489H111.569V12.147H119.863C129.538 12.147 135.14 14.044 135.14 23.741ZM119.786 5.40604H103.906V61.415H111.569V42.23H119.786C131.168 42.23 142.803 40.034 142.803 23.741C142.803 7.58504 131.168 5.40604 119.786 5.40604Z"/>
    <path d="M159.973 28.564C161.817 27.341 164.13 26.721 166.848 26.721C169.524 26.721 171.812 27.257 173.643 28.317C175.452 29.365 176.83 30.914 177.737 32.919C178.201 33.945 178.533 35.141 178.725 36.481H154.861C155.094 35.414 155.411 34.422 155.807 33.528C156.72 31.461 158.122 29.791 159.973 28.564ZM177.345 22.747C174.417 21.163 170.91 20.361 166.924 20.361C162.934 20.361 159.386 21.23 156.376 22.946C153.358 24.668 151.007 27.111 149.392 30.209C147.787 33.287 146.973 36.893 146.973 40.927C146.973 44.91 147.801 48.492 149.433 51.571C151.073 54.669 153.45 57.112 156.494 58.833C159.526 60.546 163.139 61.415 167.232 61.415C172.056 61.415 176.188 60.278 179.512 58.035C182.857 55.779 185.144 52.592 186.312 48.562L186.565 47.687H179.239L179.089 48.168C178.477 50.147 177.13 51.788 175.085 53.046C173.006 54.329 170.39 54.979 167.308 54.979C164.584 54.979 162.24 54.381 160.339 53.201C158.44 52.024 156.964 50.353 155.952 48.23C155.217 46.689 154.742 44.905 154.54 42.916H186.464L186.559 42.343C186.613 42.02 186.653 41.695 186.681 41.367C186.709 41.039 186.722 40.74 186.722 40.465V39.603C186.617 35.775 185.762 32.377 184.181 29.504C182.589 26.613 180.289 24.339 177.345 22.747Z"/>
    <path d="M199.386 22.0235C196.633 22.3005 193.474 23.2205 193.474 27.9235V61.4155H201.137V28.7125L220.623 27.2745V20.5365L219.895 20.5825C219.725 20.5935 202.802 21.6795 199.386 22.0235Z"/>
    <path d="M314.09 22.0235C311.337 22.3005 308.178 23.2205 308.178 27.9235V61.4155H315.841V28.7125L335.326 27.2745V20.5365L334.597 20.5825C334.427 20.5935 317.506 21.6795 314.09 22.0235Z"/>
    <path d="M243.233 37.9735C242.512 37.7475 241.791 37.5205 241.074 37.2865C234.663 35.2035 232.799 34.1405 232.799 31.1075C232.799 27.8045 236.557 27.1115 239.711 27.1115C245.447 27.1115 248.235 29.3975 248.235 34.0995V34.7845H255.897V34.0995C255.897 30.0405 254.32 20.6005 239.711 20.6005C230.72 20.6005 225.136 24.7145 225.136 31.3375C225.136 39.1105 232.32 41.4025 238.664 43.4265C239.401 43.6545 240.123 43.8665 240.824 44.0725C246.39 45.7095 249.539 46.8175 249.539 50.5235C249.539 53.2915 248.182 55.1345 241.553 55.1345C234.376 55.1345 231.033 52.2785 231.033 46.1485V45.4635H223.371V46.1485C223.371 53.2175 226.511 61.6455 241.475 61.6455C254.474 61.6455 257.202 55.4725 257.202 50.2935C257.202 42.3645 250.1 40.1325 243.233 37.9735Z"/>
    <path d="M269.873 36.481C270.106 35.414 270.423 34.423 270.819 33.528C271.732 31.461 273.134 29.791 274.985 28.564C276.83 27.342 279.142 26.721 281.86 26.721C284.536 26.721 286.824 27.257 288.655 28.317C290.464 29.365 291.842 30.914 292.749 32.919C293.213 33.945 293.545 35.141 293.737 36.481H269.873ZM292.357 22.747C289.429 21.164 285.922 20.361 281.936 20.361C277.946 20.361 274.398 21.23 271.388 22.946C268.37 24.668 266.02 27.112 264.404 30.209C262.799 33.287 261.986 36.893 261.986 40.927C261.986 44.91 262.813 48.492 264.445 51.571C266.085 54.669 268.462 57.113 271.506 58.833C274.538 60.546 278.151 61.415 282.244 61.415C287.068 61.415 291.2 60.279 294.524 58.035C297.869 55.779 300.156 52.592 301.324 48.562L301.577 47.687H294.251L294.101 48.168C293.489 50.147 292.142 51.788 290.097 53.046C288.018 54.329 285.402 54.979 282.32 54.979C279.596 54.979 277.252 54.381 275.352 53.202C273.452 52.025 271.976 50.353 270.964 48.23C270.229 46.689 269.754 44.905 269.552 42.916H301.476L301.571 42.343C301.625 42.02 301.665 41.695 301.693 41.367C301.721 41.039 301.735 40.74 301.735 40.466V39.603C301.629 35.775 300.774 32.377 299.193 29.504C297.602 26.613 295.301 24.339 292.357 22.747Z"/>
    <path d="M295.226 8.93061L272.69 11.4896L271.388 16.3496H292.853L295.226 8.93061Z"/>
    <path d="M372.213 40.9121C372.213 53.3851 362.549 54.7311 358.395 54.7311C349.879 54.7311 345.189 49.8241 345.189 40.9121C345.189 32.0491 349.879 27.1691 358.395 27.1691C367.047 27.1691 372.213 32.3061 372.213 40.9121ZM372.213 21.1951L372.23 27.6341L373.037 31.1711H372.648C370.603 24.4321 364.684 20.4281 356.706 20.4281C345.413 20.4281 337.527 28.8511 337.527 40.9121C337.527 53.0181 345.413 61.4731 356.706 61.4731C364.55 61.4731 370.607 57.4001 372.645 50.8061H373.037L372.213 54.4181V60.7051H379.8V21.1951H372.213Z"/>
    <path d="M54.103 18.3299V44.6359C54.103 46.0929 52.918 47.2789 51.46 47.2789H18.33C16.873 47.2789 15.687 46.0929 15.687 44.6359V18.3299C15.687 16.8729 16.873 15.6869 18.33 15.6869H51.46C52.918 15.6869 54.103 16.8729 54.103 18.3299ZM66.52 25.4289L55.585 14.5639L44.624 3.60287C42.317 1.29587 39.189 -0.000137329 35.926 -0.000137329H17.2C15.741 -0.000137329 14.559 1.18286 14.559 2.64186V11.7239C14.559 12.2359 14.144 12.6509 13.632 12.6509H2.642C1.183 12.6509 0 13.8339 0 15.2929V28.8109C0 32.0649 1.323 35.2449 3.629 37.5359L12.021 45.8729C12.608 46.4569 12.195 47.4579 11.367 47.4579H1.94C0.869002 47.4579 0 48.3269 0 49.3979V69.0819C0 70.2019 0.908 71.1099 2.028 71.1099H13.479C14.599 71.1099 15.507 70.2019 15.507 69.0819V51.5829C15.507 50.7569 16.506 50.3429 17.09 50.9269L25.525 59.3619C27.832 61.6689 30.961 62.9649 34.223 62.9649H52.952C54.409 62.9649 55.591 61.7839 55.591 60.3259V51.2389C55.591 50.7269 56.006 50.3119 56.518 50.3119H67.508C68.961 50.3119 70.149 49.1229 70.149 47.6699V34.1519C70.149 30.8989 68.826 27.7199 66.52 25.4289Z"/>
  </svg>
);

// Abstract gradient field — stock-style placeholder imagery
const Field = ({ palette = "blue", label, style = {}, className = "", children }) => {
  const palettes = {
    blue: 'radial-gradient(ellipse 80% 60% at 30% 30%, #688A9B 0%, #3C515D 45%, #253038 100%)',
    blueWarm: 'radial-gradient(ellipse 70% 80% at 70% 20%, #DAD9D4 0%, #688A9B 50%, #3C515D 100%)',
    paper: 'radial-gradient(ellipse 100% 80% at 50% 100%, #688A9B 0%, #DAD9D4 60%, #EFEAE0 100%)',
    deep: 'radial-gradient(ellipse 80% 100% at 20% 80%, #3C515D 0%, #253038 70%, #1A2228 100%)',
    sand: 'radial-gradient(ellipse 80% 60% at 80% 30%, #EFEAE0 0%, #DAD9D4 50%, #688A9B 100%)',
    smoke: 'linear-gradient(135deg, #626364 0%, #3C515D 60%, #253038 100%)',
    glow: 'radial-gradient(ellipse 60% 40% at 50% 50%, rgba(218,217,212,0.6), rgba(104,138,155,0.4) 40%, #253038 100%)',
  };
  return (
    <div className={"field " + className} style={{ background: palettes[palette] || palettes.blue, ...style }}>
      {/* Subtle grain */}
      <div style={{
        position:'absolute', inset:0,
        background: 'radial-gradient(ellipse at 100% 0%, rgba(255,255,255,0.18), transparent 50%), radial-gradient(ellipse at 0% 100%, rgba(0,0,0,0.25), transparent 50%)',
        mixBlendMode:'soft-light',
      }}/>
      {/* Soft noise via SVG */}
      <svg style={{position:'absolute', inset:0, width:'100%', height:'100%', opacity:0.18, mixBlendMode:'overlay'}} preserveAspectRatio="none">
        <filter id={"n"+palette}><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter>
        <rect width="100%" height="100%" filter={`url(#n${palette})`}/>
      </svg>
      {children}
      {label && <span className="field-label">{label}</span>}
    </div>
  );
};

// Split text into chars/lines for animation
const SplitText = ({ children, className = "" }) => (
  <span className={"split-line " + className}>
    <span>{children}</span>
  </span>
);

// Reveal observer hook
const useReveal = () => {
  React.useEffect(() => {
    const els = document.querySelectorAll('.reveal');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.15, rootMargin: '0px 0px -10% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  }, []);
};

const useScrolled = () => {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return scrolled;
};

Object.assign(window, { PerseraMark, Wordmark, Field, SplitText, useReveal, useScrolled });
