// Visual mocks: sample client website previews + bento UI tiles
// Kept simple and editable. No real photos — striped/gradient placeholders w/ mono captions.

// ============ Dental mock ============
function DentalMock() {
  return (
    <div className="dental-mock">
      <div className="dental-mock__left">
        <div className="dental-mock__nav">
          <strong>Sunny Bay Dental</strong>
          <span>Services</span><span>Team</span><span>New patients</span>
        </div>
        <h2 className="dental-mock__h">A dentist your <em>family</em> looks forward to.</h2>
        <p className="dental-mock__sub">Modern dentistry on the bayfront. Same-day crowns, evening hours, in-network with most plans.</p>
        <div className="dental-mock__btns">
          <button className="btn btn--primary">Book online</button>
          <button className="btn btn--ghost">New patients</button>
        </div>
      </div>
      <div className="dental-mock__right">
        <div className="dental-mock__photo" />
      </div>
    </div>
  );
}

// ============ Salon mock ============
function SalonMock() {
  return (
    <div className="salon-mock">
      <div className="salon-mock__left">
        <div className="salon-mock__brand">Maven & Magnolia</div>
        <div>
          <h2 className="salon-mock__h">Color, cuts, and a little <em>ceremony</em>.</h2>
          <p className="salon-mock__sub">A small studio in the East Village taking new clients this season.</p>
        </div>
        <button className="salon-mock__cta">Reserve a chair <Icon.arrow /></button>
      </div>
      <div className="salon-mock__right">
        <div className="salon-mock__photo" />
      </div>
    </div>
  );
}

// ============ Smoke shop mock ============
function SmokeMock() {
  return (
    <div className="smoke-mock">
      <div className="smoke-mock__left">
        <div className="smoke-mock__top">
          <span className="smoke-mock__brand">Northside Smoke Co.</span>
          <span>Open · 10a–10p</span>
        </div>
        <div>
          <h2 className="smoke-mock__title">Northside's <em>oldest</em> smoke shop, since 1998.</h2>
          <p className="smoke-mock__title-lede">A curated selection of glass, premium accessories, and a staff that actually knows the products.</p>
          <button className="smoke-mock__cta">Visit the shop <Icon.arrow /></button>
        </div>
      </div>
      <div className="smoke-mock__right">
        {["Borosilicate set · Limited","Heritage rolling tray","21+ verified delivery"].map((t,i)=>(
          <div className="smoke-mock__product" key={i}>
            <div className="thumb" />
            <div className="info">
              <h5>{t}</h5>
              <p>In stock · ships today</p>
            </div>
            <div className="price">${[68,42,12][i]}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

const SHOWCASES = [
  { id: "dental",  url: "sunnybaydental.com",     component: DentalMock },
  { id: "salon",   url: "mavenmagnoliasalon.com", component: SalonMock  },
  { id: "smoke",   url: "northsidesmoke.co",      component: SmokeMock  },
];

// ============ bento mock pieces ============
function CalendarMock() {
  return (
    <div className="calendar-mock mock">
      <div className="calendar-mock__head">
        <strong>Today · Thu 14</strong>
        <span>5 new this week</span>
      </div>
      {[
        { t: "9:00",  who: "Hygiene — A. Romero",    tag: "Recall" },
        { t: "10:30", who: "Consult — J. Park",      tag: "New",   isNew: true },
        { t: "1:15",  who: "Crown — M. Henderson",   tag: "Care" },
        { t: "3:00",  who: "Whitening — K. Singh",   tag: "New",   isNew: true },
        { t: "4:30",  who: "Recall — D. Wright",     tag: "Recall" },
      ].map((r, i) => (
        <div className={`calendar-mock__row ${r.isNew ? "is-new" : ""}`} key={i}>
          <span className="time">{r.t}</span>
          <span className="who">{r.who}</span>
          <span className="tag">{r.tag}</span>
        </div>
      ))}
    </div>
  );
}

function ReviewsMock() {
  const reviews = [
    { name: "Alex P.",     initial: "A", text: "Front desk was so welcoming. Booked in seconds online — felt easy.", stars: 5 },
    { name: "Mia R.",      initial: "M", text: "Best haircut I've had in years. Found them on Google Maps.",        stars: 5 },
    { name: "Jordan K.",   initial: "J", text: "They actually answer the phone. Wild concept. 10/10.",              stars: 5 },
  ];
  return (
    <div className="reviews-mock mock">
      {reviews.map((r,i)=>(
        <div className="review-card" key={i}>
          <div className="review-card__head">
            <div className="review-card__avatar">{r.initial}</div>
            <div style={{flex:1}}>
              <div className="review-card__name">{r.name}</div>
              <div className="review-card__stars">★★★★★</div>
            </div>
          </div>
          <div className="review-card__text">"{r.text}"</div>
        </div>
      ))}
    </div>
  );
}

function MapMock() {
  return (
    <div className="map-mock mock">
      <div className="map-mock__pin" />
      <div className="map-mock__card">
        <div className="thumb" />
        <div>
          <div className="label">Maven & Magnolia</div>
          <div className="meta">4.9 ★ (212) · Salon · Open</div>
        </div>
      </div>
    </div>
  );
}

function PhoneMock() {
  return (
    <div className="phone-mock mock">
      <div className="phone-mock__screen">
        <div className="phone-mock__bar"><span>9:41</span><span>●●●</span></div>
        <div className="phone-mock__nav"><span>Home</span><span>Services</span><span>Book</span></div>
        <div className="phone-mock__body">
          <h6>Welcome in.</h6>
          <p>A neighborhood salon, six chairs, in Hudson Heights.</p>
          <span className="phone-mock__chip">Book now <Icon.arrow /></span>
          <div className="phone-mock__img" />
        </div>
      </div>
    </div>
  );
}

function AISearchMock() {
  return (
    <div className="ai-mock mock">
      <div className="ai-mock__prompt">
        <span className="ai-mock__sparkle">✦</span>
        <span>best dentist near 94114?</span>
      </div>
      <div className="ai-mock__answer">
        <div className="ai-mock__answer-head">
          <span className="ai-mock__bot">AI</span>
          <span className="ai-mock__label">Answer</span>
        </div>
        <p className="ai-mock__text">
          For Bayview families, <strong>Sunny Bay Dental</strong> is a standout — same-day crowns, evening hours, and 4.9★ across 312 reviews.
        </p>
        <div className="ai-mock__sources">
          <span className="ai-mock__chip">sunnybaydental.com</span>
          <span className="ai-mock__chip">maps.google</span>
          <span className="ai-mock__chip">yelp.com</span>
        </div>
      </div>
    </div>
  );
}

function SchemaMock() {
  return (
    <div className="schema-mock mock">
      <div className="kicker" style={{marginBottom:10}}>JSON-LD · LocalBusiness</div>
      <pre className="schema-mock__code">{`{
  "@type": "Dentist",
  "name": "Sunny Bay Dental",
  "areaServed": "94114",
  "aggregateRating": {
    "ratingValue": "4.9",
    "reviewCount": 312
  },
  "openingHours": "Mo-Fr 08-19"
}`}</pre>
      <div className="schema-mock__badges">
        <span className="schema-mock__badge">✓ Rich result eligible</span>
        <span className="schema-mock__badge schema-mock__badge--alt">✓ Cited by AI</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  DentalMock, SalonMock, SmokeMock,
  SHOWCASES,
  CalendarMock, ReviewsMock, MapMock, PhoneMock,
  AISearchMock, SchemaMock,
});