/* Shared refined components for Piros — cream base, accents only */

const PirosMark = ({size = 40, color = 'var(--piros-ink)'}) => (
  <svg viewBox="0 0 200 60" width={size*200/60} height={size} style={{display:'block'}}>
    <g style={{
      fontFamily:'"Fraunces", serif',
      fontStyle:'italic', fontWeight:500, fontSize:52,
      letterSpacing:'-0.01em',
    }}>
      <text x="2" y="46" fill={color}>Piros</text>
    </g>
  </svg>
);

const Placeholder = ({label, sub, tone='cream'}) => {
  const tones = {
    cream: ['#f4ecdb', '#e2d4b5'],
    blue:  ['#cfd7e4', '#9eadc4'],
    red:   ['#e6cccf', '#c29aa1'],
    ink:   ['#dcd4c6', '#a89b85'],
  };
  const [c1, c2] = tones[tone] || tones.cream;
  return (
    <div style={{
      position:'absolute', inset:0,
      background:`linear-gradient(135deg, ${c1}, ${c2})`,
      display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
      color:'rgba(42,36,29,0.55)', overflow:'hidden',
    }}>
      <div style={{
        fontFamily:'"Archivo", sans-serif', fontWeight:500,
        fontSize:10, letterSpacing:'0.35em',
      }}>PHOTO</div>
      {label && <div style={{
        fontFamily:'"Fraunces", serif', fontStyle:'italic',
        fontSize:14, marginTop:6,
      }}>{label}</div>}
      {sub && <div style={{
        fontSize:10, letterSpacing:'0.25em', opacity:0.7, marginTop:6,
      }}>{sub}</div>}
    </div>
  );
};

/* useResponsive — returns { isMobile, isTablet } reactive on resize */
const useResponsive = () => {
  const getState = () => {
    const w = (typeof window !== 'undefined') ? window.innerWidth : 1400;
    return { isMobile: w <= 640, isTablet: w > 640 && w < 1024 };
  };
  const [state, setState] = React.useState(getState);
  React.useEffect(() => {
    const onResize = () => setState(getState());
    window.addEventListener('resize', onResize);
    window.addEventListener('orientationchange', onResize);
    return () => {
      window.removeEventListener('resize', onResize);
      window.removeEventListener('orientationchange', onResize);
    };
  }, []);
  return state;
};

window.PirosMark = PirosMark;
window.Placeholder = Placeholder;
window.useResponsive = useResponsive;