// ChairShare — shared UI atoms used across screens.
// Exposes onto window so other Babel scripts can use them.

const { useState, useEffect, useMemo, useRef } = React;

// ── Icons (line-style, 1.5 stroke) ───────────────────────
const Icon = ({ name, size = 16, color = "currentColor", ...rest }) => {
  const paths = {
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5" /><circle cx="12" cy="12" r="4" /><circle cx="17.5" cy="6.5" r="0.6" fill={color} stroke="none" /></>,
    arrow_right: <path d="M5 12h14M13 6l6 6-6 6" />,
    arrow_left: <path d="M19 12H5M11 6l-6 6 6 6" />,
    check: <path d="M4 12.5l5 5L20 6.5" />,
    close: <path d="M6 6l12 12M18 6L6 18" />,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3.5 2" /></>,
    calendar: <><rect x="3.5" y="5" width="17" height="15.5" rx="2" /><path d="M3.5 9.5h17M8 3v4M16 3v4" /></>,
    pin: <><path d="M12 21s7-6.5 7-12a7 7 0 10-14 0c0 5.5 7 12 7 12z" /><circle cx="12" cy="9" r="2.5" /></>,
    star: <path d="M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17.1 6.6 19.9l1-6.1L3.2 9.5l6.1-.9z" />,
    chevron_down: <path d="M5 9l7 7 7-7" />,
    chevron_right: <path d="M9 5l7 7-7 7" />,
    bell: <><path d="M6 8a6 6 0 0112 0c0 7 3 8 3 8H3s3-1 3-8z" /><path d="M10 21a2 2 0 004 0" /></>,
    plus: <path d="M12 5v14M5 12h14" />,
    search: <><circle cx="11" cy="11" r="7" /><path d="M20 20l-3.5-3.5" /></>,
    sparkle: <path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2" />,
    shield: <><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6z" /><path d="M9 12l2 2 4-4" /></>,
    lock: <><rect x="5" y="11" width="14" height="9" rx="2" /><path d="M8 11V8a4 4 0 018 0v3" /></>,
    card: <><rect x="3" y="6" width="18" height="13" rx="2" /><path d="M3 10h18" /></>,
    apple: <path d="M16 2c0 2-1.5 4-4 4 0-2 2-4 4-4zM8 9c2 0 3 1.2 4 1.2S14 9 16 9c1.6 0 3 1 3.7 2.5-3.5 2-3.5 7 .3 8.5-.6 1.4-1.7 3-3.5 3-1 0-1.7-.5-2.5-.5s-1.5.5-2.5.5C9 23 8 21 7 19c-2-3.5-2-9 1-10z" />,
    google: <><path d="M21 12.2c0-.7-.06-1.3-.18-1.9H12v3.8h5c-.2 1.3-1 2.4-2 3.1v2.6h3.3c1.9-1.8 3-4.4 3-7.6z" /><path d="M12 21c2.7 0 5-.9 6.6-2.4l-3.3-2.6c-.9.6-2 1-3.3 1-2.6 0-4.7-1.7-5.5-4.1H3.3v2.6A9 9 0 0012 21z" /><path d="M6.5 12.9A5.4 5.4 0 016.2 12c0-.6.1-1.2.3-1.7V7.7H3.3a9 9 0 000 8.6l3.2-2.4z" /><path d="M12 6c1.5 0 2.8.5 3.8 1.5l2.9-2.9C16.9 3 14.6 2 12 2A9 9 0 003.3 7.7l3.2 2.5C7.3 7.7 9.4 6 12 6z" /></>,
    scissors: <><circle cx="6" cy="6" r="3" /><circle cx="6" cy="18" r="3" /><path d="M20 4L8.1 15.9M14.5 14.5L20 20M8.1 8.1L11 11" /></>,
    edit: <><path d="M4 20h4l10-10-4-4L4 16v4z" /><path d="M14 6l4 4" /></>,
    info: <><circle cx="12" cy="12" r="9" /><path d="M12 8v0M12 11v5" /></>,
    minus: <path d="M5 12h14" />,
    grip: <path d="M9 6h.01M15 6h.01M9 12h.01M15 12h.01M9 18h.01M15 18h.01" />,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }} {...rest}>
      {paths[name] || null}
    </svg>
  );
};

// ── Logo ─────────────────────────────────────────
const ChairShareMark = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
    <circle cx="20" cy="20" r="19" stroke={color} strokeWidth="1.2" />
    <path d="M14 12 L14 22 Q14 24 16 24 L24 24 Q26 24 26 22 L26 12" stroke={color} strokeWidth="1.4" strokeLinecap="round" fill="none" />
    <path d="M12 26 L28 26" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
    <path d="M16 26 L16 30 M24 26 L24 30" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
  </svg>
);

const Wordmark = ({ size = 20, color = "var(--cs-ink)" }) => (
  <div style={{ display: "flex", alignItems: "center", gap: 9, color }}>
    <ChairShareMark size={size + 4} color={color} />
    <span className="serif" style={{ fontSize: size, letterSpacing: "-0.01em", fontWeight: 400 }}>
      Chair<span className="serif-it" style={{ color: "var(--cs-gold-deep)" }}>Share</span>
    </span>
  </div>
);

// ── Avatar with monogram fallback ────────────────
const Avatar = ({ name = "AM", size = 40, tone = "rose" }) => {
  const initials = name.split(" ").map(n => n[0]).slice(0, 2).join("").toUpperCase();
  const tones = {
    rose: { bg: "var(--cs-rose-soft)", fg: "var(--cs-rose-deep)" },
    gold: { bg: "var(--cs-gold-soft)", fg: "var(--cs-gold-deep)" },
    ink:  { bg: "#3D332B", fg: "var(--cs-cream)" },
  };
  const t = tones[tone] || tones.rose;
  return (
    <div className="avatar" style={{ width: size, height: size, fontSize: size * 0.42, background: t.bg, color: t.fg }}>
      {initials}
    </div>
  );
};

// ── Striped placeholder ──────────────────────────
const Placeholder = ({ label, tone = "default", style = {}, ratio }) => {
  const s = { ...style };
  if (ratio) s.aspectRatio = ratio;
  return (
    <div className="ph" data-tone={tone === "default" ? undefined : tone} style={s}>
      <span style={{ opacity: 0.7 }}>{label}</span>
    </div>
  );
};

// ── Phone frame ──────────────────────────────────
const PhoneFrame = ({ children, time = "9:41", width = 390, height = 844 }) => {
  return (
    <div className="cs-phone" style={{ width: width + 24, height: height + 24 }}>
      <div className="cs cs-phone-inner" style={{ width, height }}>
        <div className="cs-statusbar" style={{
          position: "absolute", top: 0, left: 0, right: 0, zIndex: 10,
          background: "transparent", paddingTop: 14
        }}>
          <span>{time}</span>
          <span style={{ display: "flex", gap: 5, alignItems: "center" }}>
            <svg width="16" height="10" viewBox="0 0 16 10" fill="currentColor"><path d="M1 6h2v3H1zM5 4h2v5H5zM9 2h2v7H9zM13 0h2v9h-2z"/></svg>
            <svg width="14" height="10" viewBox="0 0 14 10" fill="none" stroke="currentColor" strokeWidth="1.2"><path d="M1 4a8 8 0 0112 0M3 6a5 5 0 018 0"/><circle cx="7" cy="8" r=".8" fill="currentColor"/></svg>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 2 }}>
              <span style={{ width: 22, height: 10, border: "1.2px solid currentColor", borderRadius: 2.5, padding: 1, display: "inline-block", position: "relative" }}>
                <span style={{ display: "block", width: "80%", height: "100%", background: "currentColor", borderRadius: 1 }}></span>
              </span>
            </span>
          </span>
        </div>
        <div style={{ height: "100%", overflow: "hidden", position: "relative" }}>
          {children}
        </div>
        <div style={{
          position: "absolute", bottom: 8, left: "50%", transform: "translateX(-50%)",
          width: 120, height: 4, background: "var(--cs-ink)", borderRadius: 999, opacity: 0.35, zIndex: 10
        }}/>
      </div>
    </div>
  );
};

// ── A simple top app bar for mobile screens ──────
const MobileTopBar = ({ title, left, right, transparent }) => (
  <div style={{
    paddingTop: 50, paddingLeft: 20, paddingRight: 20, paddingBottom: 14,
    display: "flex", alignItems: "center", justifyContent: "space-between",
    background: transparent ? "transparent" : "var(--cs-cream)",
    borderBottom: transparent ? "none" : "1px solid var(--cs-line)",
    position: "relative", zIndex: 5
  }}>
    <div style={{ width: 40 }}>{left}</div>
    <div className="serif" style={{ fontSize: 17, fontWeight: 500 }}>{title}</div>
    <div style={{ width: 40, display: "flex", justifyContent: "flex-end" }}>{right}</div>
  </div>
);

// ── Mock data shared across screens ──────────────
const PRACTITIONER = {
  displayName: "Amelia Marcheva",
  handle: "amelia.cuts",
  tagline: "Lived-in colour & soft, modern cuts. Yarraville studio.",
  yearsExperience: 11,
  specialties: ["Balayage", "Lived-in colour", "Curtain cuts", "Bridal styling"],
  property: "The Atelier — Yarraville",
  address: "21 Anderson St, Yarraville VIC",
  bio: "Eleven years behind the chair, three of those colour-leading at a Fitzroy salon. I work slowly, in natural light, and I don't double-book.",
  hours: [
    ["Mon", "Closed"],
    ["Tue", "10:00 — 6:00"],
    ["Wed", "10:00 — 6:00"],
    ["Thu", "10:00 — 8:00"],
    ["Fri", "9:00 — 5:00"],
    ["Sat", "9:00 — 3:00"],
    ["Sun", "Closed"],
  ],
};

const SERVICES = [
  { id: "cut",        name: "Signature cut & blow-dry",   duration: 60,  price: 95,  desc: "Consultation, shampoo, precision cut, finish." },
  { id: "trim",       name: "Maintenance trim",            duration: 30,  price: 55,  desc: "Quick trim for established clients." },
  { id: "balayage",   name: "Balayage & toner",            duration: 180, price: 320, desc: "Hand-painted highlights, gloss, blow-dry." },
  { id: "color",      name: "Root colour refresh",         duration: 90,  price: 145, desc: "Single-process root colour & finish." },
  { id: "bridal",     name: "Bridal trial",                duration: 75,  price: 180, desc: "Hair styling consult & full trial." },
];

const REVIEWS = [
  { name: "Sophie L.", rating: 5, text: "Amelia took the time to actually understand the colour I wanted. The studio is gorgeous and quiet — felt like a tiny holiday." },
  { name: "Hannah G.", rating: 5, text: "Best curtain bangs I've ever had. Genuinely. She also made me a coffee with a heart in it." },
  { name: "Rachel V.", rating: 5, text: "Booked through Insta on a Sunday night, in the chair Tuesday. The whole process is so easy compared to my last salon." },
];

Object.assign(window, {
  Icon, ChairShareMark, Wordmark, Avatar, Placeholder, PhoneFrame, MobileTopBar,
  PRACTITIONER, SERVICES, REVIEWS,
});