// Shared design tokens and small atoms for Thomas Gabry — Soins Énergétiques website
// Uses the same palette + typography as the existing print/card system.

const SITE_PALETTE = {
  cream:    '#F4EDE0',  // page bg / soft sections
  creamAlt: '#EDE3D1',  // alt section bg
  fg:       '#2C1B0E',  // body text on cream
  accent:   '#5A3520',  // brun profond — hero bg, headings on cream
  accentSoft: '#7B4A2A',
  hairline: 'rgba(90, 53, 32, 0.18)',
  muted:    'rgba(44, 27, 14, 0.62)',
};

const SITE_TYPE = {
  serif: "'Cormorant Garamond', Georgia, serif",
  sans:  "'Inter', system-ui, sans-serif",
};

// ---------------------------------------------------------------------------
// Contact details — static data + locale-aware href builders
// ---------------------------------------------------------------------------
const SITE_CONTACT = {
  whatsappNumber: '+230 5476 9472',
  whatsappDigits: '23054769472', // for wa.me
  email: 'soins@thomasgabry.com',
  mapsDirections: 'https://www.google.com/maps/dir/?api=1&destination=Soins+Energetic+Healing+Thomas+Gabry+Grand+Baie',
};

function whatsappHref(lang) {
  const msg = (STRINGS[lang] && STRINGS[lang].contact.whatsappMessage) || '';
  return `https://wa.me/${SITE_CONTACT.whatsappDigits}?text=${encodeURIComponent(msg)}`;
}

function emailHref(lang) {
  const subject = (STRINGS[lang] && STRINGS[lang].contact.emailSubject) || '';
  return `mailto:${SITE_CONTACT.email}?subject=${encodeURIComponent(subject)}`;
}

// ---------------------------------------------------------------------------
// Flower of life filigree — used as decorative background on hero, etc.
// ---------------------------------------------------------------------------
function FlowerOfLife({ cx, cy, r = 60, stroke, opacity = 0.16, sw = 0.7 }) {
  const offsets = [
    [0, 0], [1, 0], [-1, 0],
    [0.5, 0.866], [-0.5, 0.866],
    [0.5, -0.866], [-0.5, -0.866],
  ];
  return (
    <g opacity={opacity}>
      <circle cx={cx} cy={cy} r={r * 2.4} fill="none" stroke={stroke} strokeWidth={sw} />
      <circle cx={cx} cy={cy} r={r * 1.7} fill="none" stroke={stroke} strokeWidth={sw} />
      <circle cx={cx} cy={cy} r={r}       fill="none" stroke={stroke} strokeWidth={sw} />
      {offsets.map(([dx, dy], i) => (
        <circle key={i}
          cx={cx + dx * r}
          cy={cy + dy * r}
          r={r}
          fill="none"
          stroke={stroke}
          strokeWidth={sw * 0.9}
        />
      ))}
    </g>
  );
}

// ---------------------------------------------------------------------------
// Eyebrow — small all-caps tracked label used on every section
// ---------------------------------------------------------------------------
function Eyebrow({ children, color, style }) {
  return (
    <div style={{
      fontFamily: SITE_TYPE.sans,
      fontSize: 11,
      letterSpacing: '0.36em',
      color: color || SITE_PALETTE.accent,
      fontWeight: 500,
      textTransform: 'uppercase',
      ...style,
    }}>
      {children}
    </div>
  );
}

// ---------------------------------------------------------------------------
// SectionTitle — serif display title, can be italic
// ---------------------------------------------------------------------------
function SectionTitle({ children, italic, color, size = 56, align = 'left', style }) {
  return (
    <h2 style={{
      fontFamily: SITE_TYPE.serif,
      fontWeight: 400,
      fontStyle: italic ? 'italic' : 'normal',
      fontSize: size,
      lineHeight: 1.0,
      letterSpacing: '0.005em',
      color: color || SITE_PALETTE.accent,
      margin: 0,
      textAlign: align,
      ...style,
    }}>
      {children}
    </h2>
  );
}

// ---------------------------------------------------------------------------
// Hairline divider
// ---------------------------------------------------------------------------
function Hairline({ width = 80, color, opacity = 0.5, style }) {
  return <div style={{
    width,
    height: 1,
    background: color || SITE_PALETTE.accent,
    opacity,
    ...style,
  }} />;
}

// ---------------------------------------------------------------------------
// Icons — line-art, identical visual language to the cards
// ---------------------------------------------------------------------------
function SiteIcon({ children, size = 18, color, sw = 1.5, style }) {
  return (
    <svg
      width={size} height={size} viewBox="0 0 24 24" fill="none"
      stroke={color || SITE_PALETTE.accent}
      strokeWidth={sw}
      strokeLinecap="round" strokeLinejoin="round"
      style={{ display: 'block', flexShrink: 0, ...style }}
    >{children}</svg>
  );
}
function IconPhone(p) { return <SiteIcon {...p}><path d="M5.5 4.5 C 5.5 14, 10 18.5, 19.5 18.5 L 19.5 15.5 L 16 14.5 L 14 16.5 C 11 15, 9 13, 7.5 10 L 9.5 8 L 8.5 4.5 Z" /></SiteIcon>; }
function IconMail(p)  { return <SiteIcon {...p}><rect x="3" y="6" width="18" height="13" rx="1.5" /><path d="M3.5 7 L 12 13 L 20.5 7" /></SiteIcon>; }
function IconClock(p) { return <SiteIcon {...p}><circle cx="12" cy="12" r="8.5" /><path d="M12 7 L 12 12 L 16 14" /></SiteIcon>; }
function IconPin(p)   { return <SiteIcon {...p}><path d="M12 2.5 C 7.5 2.5, 4.5 5.7, 4.5 10 C 4.5 15, 12 21.5, 12 21.5 C 12 21.5, 19.5 15, 19.5 10 C 19.5 5.7, 16.5 2.5, 12 2.5 Z" /><circle cx="12" cy="10" r="2.5" /></SiteIcon>; }
function IconWhatsapp(p) { return <SiteIcon {...p}><path d="M3 21 L 4.5 16 C 3.5 14.5, 3 12.7, 3 11 C 3 6, 7 3, 12 3 C 17 3, 21 6, 21 11 C 21 16, 17 19, 12 19 C 10.3 19, 8.7 18.6, 7.3 17.8 Z" /><path d="M8 9 C 8 11, 9.5 13, 11.5 14.5 C 13 15.5, 14 14.5, 14.5 14 L 13 12.8 L 12 13.4 C 11.2 12.9, 10.6 12.3, 10.1 11.5 L 10.7 10.5 L 9.5 9 Z" /></SiteIcon>; }
function IconArrow(p) { return <SiteIcon {...p}><path d="M5 12 L 19 12" /><path d="M13 6 L 19 12 L 13 18" /></SiteIcon>; }
function IconLeaf(p)  { return <SiteIcon {...p}><path d="M4 20 C 4 12, 10 4, 20 4 C 20 14, 12 20, 4 20 Z" /><path d="M4 20 C 8 16, 14 10, 20 4" /></SiteIcon>; }
function IconHand(p)  { return <SiteIcon {...p}><path d="M9 12 L 9 5 C 9 4, 9.5 3.5, 10.5 3.5 C 11.5 3.5, 12 4, 12 5 L 12 11" /><path d="M12 11 L 12 4.5 C 12 3.5, 12.5 3, 13.5 3 C 14.5 3, 15 3.5, 15 4.5 L 15 12" /><path d="M15 12 L 15 6 C 15 5, 15.5 4.5, 16.5 4.5 C 17.5 4.5, 18 5, 18 6 L 18 14" /><path d="M9 12 L 9 9 C 9 8, 8.5 7.5, 7.5 7.5 C 6.5 7.5, 6 8, 6 9 L 6 16 C 6 19, 9 21, 12 21 C 16 21, 18 18, 18 14" /></SiteIcon>; }
function IconHeart(p) { return <SiteIcon {...p}><path d="M12 20 C 12 20, 4 14, 4 9 C 4 6, 6 4, 8.5 4 C 10 4, 11.5 5, 12 6.5 C 12.5 5, 14 4, 15.5 4 C 18 4, 20 6, 20 9 C 20 14, 12 20, 12 20 Z" /></SiteIcon>; }
function IconSun(p)   { return <SiteIcon {...p}><circle cx="12" cy="12" r="4" /><path d="M12 3 L 12 5" /><path d="M12 19 L 12 21" /><path d="M3 12 L 5 12" /><path d="M19 12 L 21 12" /><path d="M5.5 5.5 L 7 7" /><path d="M17 17 L 18.5 18.5" /><path d="M5.5 18.5 L 7 17" /><path d="M17 7 L 18.5 5.5" /></SiteIcon>; }

// ---------------------------------------------------------------------------
// Language switch — FR / EN toggle for the top nav
// English content is not implemented yet; this is the UI surface.
// ---------------------------------------------------------------------------
function LangSwitch({ onCream = false, size = 'md' }) {
  const { lang, setLang } = useLang();
  const fg = onCream ? SITE_PALETTE.fg : SITE_PALETTE.cream;
  const dims = size === 'sm'
    ? { fs: 9.5, py: 3,   px: 7, gap: 1, ls: '0.24em' }
    : { fs: 11,  py: 4.5, px: 9, gap: 1, ls: '0.28em' };

  return (
    <div style={{
      display: 'inline-flex',
      alignItems: 'center',
      border: `1px solid ${fg}55`,
      borderRadius: 999,
      padding: 2,
      gap: dims.gap,
    }}>
      {[{ code: 'FR', value: 'fr' }, { code: 'EN', value: 'en' }].map(opt => {
        const active = lang === opt.value;
        return (
          <button key={opt.code}
            onClick={() => setLang(opt.value)}
            style={{
              fontFamily: SITE_TYPE.sans,
              fontSize: dims.fs,
              letterSpacing: dims.ls,
              fontWeight: 500,
              padding: `${dims.py}px ${dims.px}px`,
              borderRadius: 999,
              border: 'none',
              cursor: 'pointer',
              background: active ? fg : 'transparent',
              color: active ? (onCream ? SITE_PALETTE.cream : SITE_PALETTE.accent) : fg,
              opacity: active ? 1 : 0.7,
              transition: 'all 200ms ease',
            }}>
            {opt.code}
          </button>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Site button — primary (filled accent on cream) and ghost variants
// ---------------------------------------------------------------------------
function SiteButton({ children, variant = 'primary', icon, size = 'md', onClick, style, href, target, rel }) {
  const sizes = {
    sm: { py: 9,  px: 18, fs: 12.5 },
    md: { py: 13, px: 24, fs: 13.5 },
    lg: { py: 16, px: 30, fs: 14 },
  }[size];

  const variants = {
    primary: {
      background: SITE_PALETTE.accent,
      color: SITE_PALETTE.cream,
      border: `1px solid ${SITE_PALETTE.accent}`,
    },
    ghost: {
      background: 'transparent',
      color: SITE_PALETTE.cream,
      border: `1px solid ${SITE_PALETTE.cream}55`,
    },
    outline: {
      background: 'transparent',
      color: SITE_PALETTE.accent,
      border: `1px solid ${SITE_PALETTE.accent}`,
    },
    creamFill: {
      background: SITE_PALETTE.cream,
      color: SITE_PALETTE.accent,
      border: `1px solid ${SITE_PALETTE.cream}`,
    },
  }[variant];

  const sharedStyle = {
    ...variants,
    padding: `${sizes.py}px ${sizes.px}px`,
    fontFamily: SITE_TYPE.sans,
    fontSize: sizes.fs,
    letterSpacing: '0.16em',
    textTransform: 'uppercase',
    fontWeight: 500,
    cursor: 'pointer',
    display: 'inline-flex',
    alignItems: 'center',
    gap: 10,
    borderRadius: 0,
    transition: 'all 200ms ease',
    textDecoration: 'none',
    ...style,
  };

  if (href) {
    const isExternal = /^https?:/i.test(href);
    return (
      <a href={href}
         target={target || (isExternal ? '_blank' : undefined)}
         rel={rel || (isExternal ? 'noopener noreferrer' : undefined)}
         onClick={onClick}
         style={sharedStyle}>
        {children}
        {icon}
      </a>
    );
  }

  return (
    <button onClick={onClick} style={sharedStyle}>
      {children}
      {icon}
    </button>
  );
}

// Export
Object.assign(window, {
  SITE_PALETTE, SITE_TYPE, SITE_CONTACT,
  whatsappHref, emailHref,
  FlowerOfLife, Eyebrow, SectionTitle, Hairline,
  SiteIcon, IconPhone, IconMail, IconClock, IconPin, IconWhatsapp, IconArrow,
  IconLeaf, IconHand, IconHeart, IconSun,
  SiteButton, LangSwitch,
});