---
import BaseLayout from "../layouts/BaseLayout.astro";
import Breadcrumbs from "../components/Breadcrumbs.astro";
import { SITE } from "../lib/blog-data.js";

// Plain-text answers so the visible content exactly matches the FAQPage schema.
const faqs = [
  {
    q: "Is the tap water safe to drink in Medellín?",
    a: "Yes. Medellín's utility, EPM, treats the city's water to a potable standard, and most residents drink it straight from the tap. This is unusual for Latin America and is one reason street food and ice here are lower-risk than in many nearby destinations.",
  },
  {
    q: "Is street food safe to eat in Medellín?",
    a: "Generally yes, with a few habits: follow the queues (high turnover means fresher food), order things cooked to order and served hot, and be a little cautious with raw preparations in your first days while your stomach adjusts.",
  },
  {
    q: "Do I need to tip at restaurants in Medellín?",
    a: "Most sit-down restaurants add a voluntary 10% service charge (propina voluntaria) to the bill. You'll usually be asked if you want to include it; you can accept, decline, or adjust it. Tipping beyond that is appreciated but not expected.",
  },
  {
    q: "Do restaurants in Medellín have English menus?",
    a: "In the tourist- and expat-heavy areas — El Poblado, Provenza, and parts of Laureles — many places have English menus or English-speaking staff. In more local neighborhoods, expect Spanish-only menus, so a translation app helps.",
  },
  {
    q: "Can I pay by card, or do I need cash?",
    a: "Cards are widely accepted at sit-down restaurants and cafés in El Poblado, Provenza, and Laureles. Carry some cash (Colombian pesos) for street food, market stalls, small family-run spots, and tips.",
  },
  {
    q: "Which neighborhoods are best for eating out?",
    a: "El Poblado and Provenza for upscale and international dining, Laureles for a more local, better-value scene, and Envigado and Sabaneta for traditional Paisa food. Each has a distinct character worth exploring.",
  },
  {
    q: "What are typical restaurant hours?",
    a: "Lunch runs roughly 12–3pm, when many places serve an affordable set menu (menú del día). Dinner is usually 7–10pm. Some kitchens close between services, and a number of restaurants close on Sundays or Mondays, so it's worth checking ahead.",
  },
  {
    q: "Do I need a reservation?",
    a: "For the city's top and fine-dining restaurants, yes — especially on weekends. For cafés, casual spots, and most neighborhood restaurants, you can simply walk in.",
  },
];

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "@id": `${SITE.url}/faq#faq`,
  mainEntity: faqs.map((f) => ({
    "@type": "Question",
    name: f.q,
    acceptedAnswer: { "@type": "Answer", text: f.a },
  })),
};
---

<BaseLayout
  title={`Dining in Medellín: FAQ - ${SITE.name}`}
  description="Common questions about eating out in Medellín — tap water, tipping, street food, neighborhoods, hours, and more — answered for English-speaking visitors."
  canonical="/faq"
  jsonLd={jsonLd}
>
  <div class="mx-auto max-w-3xl px-5 py-12">
    <Breadcrumbs items={[{ label: "Home", to: "/" }, { label: "FAQ" }]} />

    <header class="mt-6">
      <div class="text-xs font-medium uppercase tracking-[0.2em] text-primary">FAQ</div>
      <h1 class="mt-2 font-serif text-4xl font-semibold tracking-tight sm:text-5xl">
        Dining in Medellín: FAQ
      </h1>
      <p class="mt-4 max-w-xl text-muted-foreground">
        Quick, practical answers to the questions English-speaking visitors ask most about eating
        out in Medellín.
      </p>
    </header>

    <div class="mt-10 divide-y divide-border">
      {
        faqs.map((f) => (
          <details class="group py-5">
            <summary class="flex cursor-pointer items-center justify-between gap-4 font-serif text-lg font-semibold tracking-tight marker:content-['']">
              {f.q}
              <span class="text-muted-foreground transition-transform group-open:rotate-45">+</span>
            </summary>
            <p class="mt-3 leading-relaxed text-muted-foreground">{f.a}</p>
          </details>
        ))
      }
    </div>
  </div>
</BaseLayout>