// shared.jsx — Brand tokens, content, shared components for all 4 layouts.

const AM = {
  // Brand palette (kept exact: black/cream/gold)
  ink: '#0a0a0a',
  inkSoft: '#1a1a1a',
  cream: '#f5f1e8',
  creamSoft: '#ebe5d6',
  gold: '#c9a961',
  goldSoft: '#a8884a',
  paper: '#fafaf7',
  line: 'rgba(201,169,97,0.25)',
  lineDark: 'rgba(245,241,232,0.12)',
};

// Resolver asset: usa data-URI bundleado (window.AM_ASSETS) o la ruta original.
// `assetUrl(path)` → string listo para src/href.
// `bgUrl(path)` → string listo para usar dentro de url(...) en CSS background-image.
function assetUrl(path) {
  const A = (typeof window !== 'undefined' && window.AM_ASSETS) || {};
  return A[path] || path;
}
function bgUrl(path) {
  // Las data-URIs no necesitan comillas dentro de url(), pero las rutas tampoco.
  return `url("${assetUrl(path)}")`;
}
if (typeof window !== 'undefined') {
  window.assetUrl = assetUrl;
  window.bgUrl = bgUrl;
}

// CONTENIDO REAL — B2B Property Management.
// Audiencia: PROPIETARIOS de Airbnb / casas en Tulum.
// Objetivo: que el dueño contacte para gestionar su propiedad.
const COPY = {
  hero: {
    eyebrow: 'TULUM · PROPERTY MANAGEMENT · DESDE 2015',
    title: 'Tu propiedad\nen Tulum,\ncuidada como\nnuestra.',
    sub: 'Operación integral con estándares Superhost. 10 años de experiencia.',
    cta: 'Gestionar mi propiedad',
    ctaSub: 'Habla con un asesor · respuesta en minutos',
  },
  stats: [
    { v: '10+', l: 'Años de experiencia' },
    { v: '93%', l: 'Clientes satisfechos' },
    { v: '4.9', l: 'Rating Airbnb' },
  ],
  // 6 servicios — operación integral, copy conciso.
  services: [
    { n: '01', t: 'Comercialización', d: 'Publicación, fotos y sincronización en todos los canales.', proof: '',
      bullets: ['Listings en Airbnb, Web y Redes Sociales', 'Calendario sincronizado en tiempo real', 'Fotografía profesional y copywriting'] },
    { n: '02', t: 'Pricing dinámico', d: 'Tarifas que se ajustan al mercado y la temporada.', proof: 'Optimización diaria',
      bullets: ['Análisis constante de la competencia', 'Ajustes por temporada y eventos locales', 'Maximiza ingreso sin perder ocupación'] },
    { n: '03', t: 'Hospitalidad 24/7', d: 'Atención bilingüe a huéspedes durante toda la estancia.', proof: 'ES · EN',
      bullets: ['Respuesta en menos de 5 minutos', 'Check-in y check-out coordinados', 'Concierge bilingüe (ES · EN)'] },
    { n: '04', t: 'Limpieza & mantenimiento', d: 'Staff propio con checklist auditable y red de proveedores.', proof: 'In-house · Preventivo',
      bullets: ['Equipo de limpieza confiable', 'Checklist auditable post-estancia', 'Mantenimiento preventivo programado'] },
    { n: '05', t: 'Cuentas', d: 'Depósitos, servicios y pagos a proveedores con trazabilidad.', proof: 'Transparente',
      bullets: ['Depósitos directos a tu cuenta', 'Pago de servicios e impuestos', 'Trazabilidad completa de cada movimiento'] },
    { n: '06', t: 'Reportes mensuales', d: 'Operación y utilidad de tu propiedad, claras cada mes.', proof: 'Mensual',
      bullets: ['Estado de cuenta detallado', 'KPIs de ocupación y rating', 'Recomendaciones de mejora continua'] },
  ],
  // Beneficios para el propietario — ultra cortos.
  benefits: [
    { n: '01', t: 'Plusvalía', d: 'Tu propiedad mantiene su valor. Sin maltrato.' },
    { n: '02', t: 'Flujo consistente', d: 'Rentabilidad maximizada con ingresos transparentes.' },
    { n: '03', t: 'Tiempo libre', d: 'Tú disfrutas. Nosotros operamos.' },
  ],
  // Proceso para el dueño
  steps: [
    { n: '01', t: 'Conversación', d: 'Entendemos tu propiedad y objetivos.' },
    { n: '02', t: 'Auditoría', d: 'Visitamos, fotografiamos y proponemos pricing.' },
    { n: '03', t: 'Lanzamiento', d: 'Publicamos y empezamos a recibir reservas.' },
    { n: '04', t: 'Operación', d: 'Gestionamos todo. Tú recibes reportes.' },
  ],
  // KPIs vs benchmark de industria
  kpis: [
    { v: '4.8', l: 'Calificación general', b: 'Benchmark: 4.8' },
    { v: '100%', l: 'Tasa de respuesta', b: 'Benchmark: 90%' },
    { v: '0%', l: 'Cancelaciones', b: 'Benchmark: <1%' },
    { v: '4.8', l: 'Más ocupación vs similares', b: 'Sobre promedio del sector' },
  ],
  // Una década en números
  decade: [
    { v: '10+', l: 'Años' },
    { v: '87', l: 'Propiedades' },
    { v: '10,000+', l: 'Huéspedes' },
    { v: '2019', l: 'Superhost desde' },
  ],
  // Propiedades en gestión (showcase)
  properties: [
    { id: 'mistiq-temple',  name: 'Mistiq Temple',  tag: 'Condo Luxury · 2 hab',          info: '4 pax · 2 hab · 2 beds · 2.5 baños · Plunge pool privada',         rating: '4.64', reviews: 14, img: 'redesign/img/properties/mistiq-temple.jpg',  url: 'https://airbnb.com/h/mistiqtemple2b303' },
    { id: 'botanic',        name: 'Botanic',    tag: 'Rooftop Pool · 2 hab',          info: '6 pax · 2 hab · 3 beds · 2 baños · Plunge pool · 5 min playa',     rating: '4.81', reviews: 42, img: 'redesign/img/properties/botanic.jpg?v=2',    url: 'https://airbnb.com/h/botanic409' },
    { id: 'jungle-houses',  name: 'Jungle House',   tag: 'Casa Privada · 3 hab',          info: '11 pax · 3 hab · 6 beds · 3.5 baños · Alberca privada · Parking', rating: '4.81', reviews: 52, img: 'redesign/img/properties/jungle-houses.jpg?v=2',  url: 'https://airbnb.com/h/junglehouses1' },
    { id: 'mistiq-gardens', name: 'Mistiq Gardens', tag: 'Loft Moderno · Guest Favorite', info: '6 pax · 1 hab · 4 beds · 1 baño · 6 albercas · Sky Pool',         rating: '5.0',  reviews: 8,  img: 'redesign/img/properties/mistiq-gardens.jpg', url: 'https://airbnb.com/h/mistiqgardens128' },
  ],
  contact: {
    wa: '+52 998 148 2146',
    waHref: 'https://wa.me/529981482146',
    email: 'info@amtulum.com',
    emailHref: 'mailto:info@amtulum.com',
    instagram: '@am_tulum',
    instagramHref: 'https://www.instagram.com/am_tulum/',
    facebook: 'AM Tulum',
    facebookHref: 'https://www.facebook.com/profile.php?id=61578880155653',
  },
};

// ─── Shared atoms ─────────────────────────────────────────

// AM TULUM logo — usa imagen real con tints por color
// `size` = altura total en px; ancho proporcional (1.42:1)
// `compact` = solo ícono+wordmark sin "Property Management"
function Logo({ size = 28, color = '#fff', compact = false, shadow = false }) {
  // Renderizamos el PNG tal cual (1276×340) — proporción exacta del archivo original.
  // El PNG es negro sobre transparente. Para color blanco aplicamos filter:invert.
  const A = (typeof window !== 'undefined' && window.AM_ASSETS) || {};
  // Pick the cleaner v2 logo (cropped from the high-res 2000×2000 PNG the client provided).
  // White version is rendered as-is; black version is used directly when scrolled.
  // Detect if the requested color is dark — if so, use the black variant; otherwise white.
  const isDark = (() => {
    if (!color) return false;
    if (color === '#000' || color === '#0a0a0a' || color === '#000000') return true;
    if (typeof color === 'string' && color.startsWith('#')) {
      const hex = color.replace('#', '');
      const r = parseInt(hex.slice(0, 2), 16);
      const g = parseInt(hex.slice(2, 4), 16);
      const b = parseInt(hex.slice(4, 6), 16);
      const lum = 0.299 * r + 0.587 * g + 0.114 * b;
      return lum < 128;
    }
    return false;
  })();
  const key = isDark ? 'logo-am-tulum-v2-black.png' : 'logo-am-tulum-v2-white.png';
  const src = A[key] || `redesign-v2/img/${isDark ? 'logo-black.png' : 'logo-white.png'}`;

  // El asset ya viene con el color correcto (white-on-transparent o black-on-transparent).
  // Solo aplicamos sombra si se pidió.
  const filter = shadow
    ? 'drop-shadow(0 2px 6px rgba(0,0,0,0.55)) drop-shadow(0 1px 2px rgba(0,0,0,0.4))'
    : 'none';

  if (compact) {
    // Icon-only bbox in the new logo (828×200): x=8..240, y=8..192 → 232×184.
    const ICON_W = 232, ICON_H = 184;
    const FULL_W = 828, FULL_H = 200;
    const ICON_X = 8, ICON_Y = 8;
    const H = size;
    const W = H * (ICON_W / ICON_H);
    const scale = H / ICON_H;
    return (
      <div
        role="img"
        aria-label="AM Tulum"
        style={{
          width: W, height: H, display: 'inline-block',
          overflow: 'hidden', position: 'relative',
          filter,
        }}
      >
        <img
          src={src}
          alt=""
          aria-hidden="true"
          style={{
            position: 'absolute',
            width: FULL_W * scale,
            height: FULL_H * scale,
            left: -ICON_X * scale,
            top: -ICON_Y * scale,
            maxWidth: 'none',
          }}
        />
      </div>
    );
  }

  // Full logo: PNG completo — proporción 828/200 = 4.14 (asset cropped from client master).
  const fullAspect = 828 / 200;
  const H = size;
  const W = H * fullAspect;
  return (
    <img
      src={src}
      alt="AM Tulum · Property Management"
      style={{
        width: W, height: H, display: 'inline-block',
        filter,
      }}
    />
  );
}

function GoldButton({ children, full = false, sub, dark = true, style = {} }) {
  return (
    <button style={{
      display: 'block', width: full ? '100%' : 'auto',
      padding: sub ? '14px 22px 12px' : '15px 28px',
      background: dark ? AM.gold : AM.ink,
      color: dark ? AM.ink : AM.cream,
      border: 'none', borderRadius: 999,
      fontFamily: 'Inter, system-ui, sans-serif',
      fontSize: 14, fontWeight: 600, letterSpacing: 0.6,
      textTransform: 'uppercase', cursor: 'pointer',
      boxShadow: dark
        ? '0 8px 24px rgba(201,169,97,0.32), inset 0 1px 0 rgba(255,255,255,0.25)'
        : '0 8px 24px rgba(0,0,0,0.32)',
      ...style,
    }}>
      <div>{children}</div>
      {sub && <div style={{
        fontSize: 9.5, fontWeight: 400, marginTop: 3,
        opacity: 0.7, textTransform: 'none', letterSpacing: 0.3,
      }}>{sub}</div>}
    </button>
  );
}

function Eyebrow({ children, color = AM.gold }) {
  return (
    <div style={{
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 10, letterSpacing: 2.5, textTransform: 'uppercase',
      color, fontWeight: 500,
    }}>{children}</div>
  );
}

function Serif({ children, size = 38, color = '#fff', italic = false, style = {} }) {
  return (
    <div style={{
      fontFamily: 'Cormorant Garamond, Georgia, serif',
      fontSize: size, fontWeight: 400, lineHeight: 1.05,
      color, fontStyle: italic ? 'italic' : 'normal',
      letterSpacing: -0.5, whiteSpace: 'pre-line',
      ...style,
    }}>{children}</div>
  );
}

// SVG icons used across layouts
const Ico = {
  home: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-4v-7H9v7H5a2 2 0 0 1-2-2v-9z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  compass: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke={c} strokeWidth="1.6"/><path d="M16 8l-2 6-6 2 2-6 6-2z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  star: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 3l2.6 6 6.4.6-4.9 4.4 1.5 6.5L12 17l-5.6 3.5 1.5-6.5L3 9.6 9.4 9 12 3z" stroke={c} strokeWidth="1.5" strokeLinejoin="round"/></svg>,
  cal: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><rect x="3.5" y="5" width="17" height="16" rx="2" stroke={c} strokeWidth="1.6"/><path d="M3.5 10h17M8 3v4M16 3v4" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  user: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="12" cy="8" r="4" stroke={c} strokeWidth="1.6"/><path d="M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  arrow: (c='#fff', s=18) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  bed: (c='#fff', s=16) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3 18v-7h18v7M3 14h18M7 11V8a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  guests: (c='#fff', s=16) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="9" cy="9" r="3" stroke={c} strokeWidth="1.6"/><circle cx="17" cy="10" r="2.5" stroke={c} strokeWidth="1.6"/><path d="M3 19c1-3 3.3-4.5 6-4.5s5 1.5 6 4.5M15 18c.7-2 2-3 4-3s3 1 3.5 2.5" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  pin: (c='#fff', s=14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M12 22s7-7 7-13a7 7 0 1 0-14 0c0 6 7 13 7 13z" stroke={c} strokeWidth="1.6"/><circle cx="12" cy="9" r="2.5" stroke={c} strokeWidth="1.6"/></svg>,
  wa: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M3.5 20.5l1.4-4.5A8.5 8.5 0 1 1 8 19.6l-4.5.9z" stroke={c} strokeWidth="1.6" strokeLinejoin="round"/></svg>,
  search: (c='#fff', s=20) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><circle cx="11" cy="11" r="7" stroke={c} strokeWidth="1.6"/><path d="M16 16l4 4" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  menu: (c='#fff', s=22) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M4 7h16M4 12h16M4 17h16" stroke={c} strokeWidth="1.6" strokeLinecap="round"/></svg>,
  chev: (c='#fff', s=14) => <svg width={s} height={s} viewBox="0 0 24 24" fill="none"><path d="M9 6l6 6-6 6" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>,
  drag: (c='#fff', s=28) => <svg width={s} height={s*0.3} viewBox="0 0 60 6" fill="none"><rect x="0" y="0" width="60" height="6" rx="3" fill={c}/></svg>,
};

// Phone shell — matches the iPhone aspect we use everywhere
const PHONE_W = 390;
const PHONE_H = 844;

// iOS-style status bar (9:41, signal, wifi, battery) — only shown in canvas demo, not production
function IOSStatusBar({ dark = true }) {
  if (typeof window !== 'undefined' && window.__AM_RESPONSIVE__) return null;
  const c = dark ? '#fff' : AM.ink;
  return (
    <div style={{
      position: 'absolute', top: 0, left: 0, right: 0, height: 54,
      padding: '18px 28px 0', display: 'flex',
      justifyContent: 'space-between', alignItems: 'center',
      zIndex: 100, pointerEvents: 'none',
      fontFamily: '-apple-system, "SF Pro Text", system-ui, sans-serif',
    }}>
      <div style={{
        fontSize: 15, fontWeight: 600, color: c, letterSpacing: -0.2,
      }}>9:41</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
        {/* Signal */}
        <svg width="17" height="11" viewBox="0 0 17 11" fill="none">
          <rect x="0" y="7" width="3" height="4" rx="0.5" fill={c}/>
          <rect x="4.5" y="5" width="3" height="6" rx="0.5" fill={c}/>
          <rect x="9" y="2.5" width="3" height="8.5" rx="0.5" fill={c}/>
          <rect x="13.5" y="0" width="3" height="11" rx="0.5" fill={c}/>
        </svg>
        {/* Wifi */}
        <svg width="15" height="11" viewBox="0 0 15 11" fill="none">
          <path d="M7.5 2C5 2 2.7 2.9 1 4.4l1.4 1.4C3.7 4.7 5.5 4 7.5 4s3.8.7 5.1 1.8L14 4.4C12.3 2.9 10 2 7.5 2z" fill={c}/>
          <path d="M7.5 5.5c-1.5 0-2.9.5-4 1.4l1.4 1.4c.7-.6 1.6-.9 2.6-.9s1.9.3 2.6.9L11.5 6.9c-1.1-.9-2.5-1.4-4-1.4z" fill={c}/>
          <circle cx="7.5" cy="9.5" r="1.2" fill={c}/>
        </svg>
        {/* Battery */}
        <svg width="27" height="12" viewBox="0 0 27 12" fill="none">
          <rect x="0.5" y="0.5" width="22" height="11" rx="2.5" stroke={c} strokeOpacity="0.5"/>
          <rect x="2" y="2" width="19" height="8" rx="1.5" fill={c}/>
          <rect x="24" y="4" width="2" height="4" rx="1" fill={c} fillOpacity="0.5"/>
        </svg>
      </div>
    </div>
  );
}

// Generic phone wrapper — gives every layout the rounded corners + status bar
function PhoneShell({ dark = true, statusDark = false, children }) {
  return (
    <div style={{
      width: PHONE_W, height: PHONE_H,
      background: dark ? AM.ink : AM.cream,
      position: 'relative', overflow: 'hidden',
      fontFamily: 'Inter, system-ui, sans-serif',
      color: dark ? AM.cream : AM.ink,
    }}>
      <IOSStatusBar dark={!statusDark} />
      {children}
    </div>
  );
}

Object.assign(window, {
  AM, COPY, Logo, GoldButton, Eyebrow, Serif, Ico, PhoneShell, PHONE_W, PHONE_H,
});
