/* App preview — booking calendar mock rendered in the hero */
const { useState, useMemo } = React;

function Icon({ name, size = 16 }) {
  const paths = {
    calendar: <><rect x="3" y="4" width="18" height="17" rx="2" /><path d="M3 9h18M8 2v4M16 2v4" /></>,
    bed: <><path d="M3 7v13M21 14v6M3 14h18M7 14V9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v5" /></>,
    users: <><circle cx="9" cy="8" r="3" /><circle cx="17" cy="9" r="2.5" /><path d="M3 20c0-3 3-5 6-5s6 2 6 5M16 20c0-2 1.5-3.5 4-3.5" /></>,
    chart: <><path d="M3 20h18M6 17V9M11 17v-5M16 17V6M21 17v-3" /></>,
    cog: <><circle cx="12" cy="12" r="3" /><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3h.1a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8v.1a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" /></>,
    inbox: <><path d="M22 12h-6l-2 3h-4l-2-3H2" /><path d="M5.5 5h13l3.5 7v6a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-6z" /></>,
    home: <><path d="M3 11l9-8 9 8" /><path d="M5 10v10h14V10" /></>,
    arrow: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    arrowL: <><path d="M19 12H5M11 6l-6 6 6 6" /></>,
    arrowR: <><path d="M5 12h14M13 6l6 6-6 6" /></>,
    plus: <><path d="M12 5v14M5 12h14" /></>,
    star: <path d="M12 2l2.9 6 6.6.6-5 4.4 1.5 6.4L12 16l-5.9 3.4 1.5-6.4-5-4.4 6.6-.6z" />,
    check: <path d="M5 13l4 4L19 7" />,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.5 5.5l2 2M16.5 16.5l2 2M5.5 18.5l2-2M16.5 7.5l2-2" /></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
}

function Stars({ n = 5, rating, size = 14 }) {
  // If a fractional rating (0..5) is passed, render 5 outlined stars with a
  // filled overlay clipped to (rating/5) — gives a true partial fifth star.
  if (typeof rating === 'number') {
    const pct = Math.max(0, Math.min(5, rating)) / 5 * 100;
    const star = (
      <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2l2.9 6 6.6.6-5 4.4 1.5 6.4L12 16l-5.9 3.4 1.5-6.4-5-4.4 6.6-.6z" />
      </svg>
    );
    return (
      <span
        className="stars"
        style={{ position: 'relative', display: 'inline-block', lineHeight: 0 }}
        aria-label={`${rating} out of 5`}
      >
        <span style={{ display: 'inline-flex', gap: 1, opacity: 0.22 }}>
          {Array.from({ length: 5 }).map((_, i) => <React.Fragment key={i}>{star}</React.Fragment>)}
        </span>
        <span
          aria-hidden="true"
          style={{
            position: 'absolute', inset: 0,
            width: `${pct}%`, overflow: 'hidden',
            display: 'inline-flex', gap: 1,
          }}
        >
          {Array.from({ length: 5 }).map((_, i) => <React.Fragment key={i}>{star}</React.Fragment>)}
        </span>
      </span>
    );
  }
  return (
    <span className="stars" style={{ display: 'inline-flex', gap: 1 }}>
      {Array.from({ length: n }).map((_, i) => (
        <svg key={i} width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
          <path d="M12 2l2.9 6 6.6.6-5 4.4 1.5 6.4L12 16l-5.9 3.4 1.5-6.4-5-4.4 6.6-.6z" />
        </svg>
      ))}
    </span>
  );
}

function CalendarPreview() {
  const days = useMemo(() => {
    const start = new Date(2026, 4, 4); // May 4 2026 (Mon)
    return Array.from({ length: 14 }).map((_, i) => {
      const d = new Date(start);
      d.setDate(start.getDate() + i);
      return d;
    });
  }, []);
  const dows = ['M','T','W','T','F','S','S'];

  const [activeBooking, setActiveBooking] = useState(null);

  return (
    <div className="app-shell">
      <div className="app-titlebar">
        <div className="tl-dots"><span className="tl-dot" /><span className="tl-dot" /><span className="tl-dot" /></div>
        <div className="tl-url">app.roomsy.com / dashboard / calendar</div>
        <div style={{ width: 60 }} />
      </div>
      <div className="app-body">
        <aside className="app-side">
          <div className="group-label">Property</div>
          <div className="item active"><span className="ico"><Icon name="home" size={14} /></span> Cedar Pines Inn</div>
          <div className="group-label">Workspace</div>
          <div className="item"><span className="ico"><Icon name="calendar" size={14} /></span> Calendar <span className="count">23</span></div>
          <div className="item"><span className="ico"><Icon name="inbox" size={14} /></span> Inbox <span className="count">4</span></div>
          <div className="item"><span className="ico"><Icon name="bed" size={14} /></span> Rooms</div>
          <div className="item"><span className="ico"><Icon name="users" size={14} /></span> Guests</div>
          <div className="item"><span className="ico"><Icon name="chart" size={14} /></span> Reports</div>
          <div className="group-label">Settings</div>
          <div className="item"><span className="ico"><Icon name="cog" size={14} /></span> Channels</div>
        </aside>

        <div className="app-main">
          <div className="app-toolbar">
            <span className="title">May 2026</span>
            <span className="pill">Wk 19 · 14 nights</span>
            <div className="seg">
              <button>Day</button>
              <button className="on">Week</button>
              <button>Month</button>
            </div>
          </div>
          <div className="cal">
            <div className="cal-head">
              <div className="roomh">Rooms / Nights</div>
              {days.map((d, i) => {
                const isWk = d.getDay() === 0 || d.getDay() === 6;
                return (
                  <div key={i} className={`col ${isWk ? 'weekend' : ''}`}>
                    <div className="dow">{dows[(d.getDay() + 6) % 7]}</div>
                    <div className="dnum">{d.getDate()}</div>
                  </div>
                );
              })}
            </div>
            {ROOMS.map((room, ri) => (
              <div key={room.id} className="cal-row">
                <div className="cal-room">
                  <span className="swatch" style={{ background: ['#C75A3A','#2D4933','#15140F','#C58E2A','#4A5568','#8A3A21','#4A6B3E'][ri] }} />
                  {room.label}
                </div>
                {days.map((d, i) => {
                  const isWk = d.getDay() === 0 || d.getDay() === 6;
                  return <div key={i} className={`cal-cell ${isWk ? 'weekend' : ''}`} />;
                })}
                {BOOKINGS.filter(b => b.row === ri).map((b, bi) => {
                  const colWidth = `calc((100% - 120px) / 14)`;
                  const left = `calc(120px + ${b.start} * ${colWidth} + 3px)`;
                  const width = `calc(${b.span} * ${colWidth} - 6px)`;
                  return (
                    <div
                      key={bi}
                      className={`booking ${b.type}`}
                      style={{ left, width }}
                      onMouseEnter={() => setActiveBooking(`${ri}-${bi}`)}
                      onMouseLeave={() => setActiveBooking(null)}
                    >
                      <span className="name">{b.name}</span>
                      {b.ota && <span className="ota">· {b.ota}</span>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

window.CalendarPreview = CalendarPreview;
window.Icon = Icon;
window.Stars = Stars;