contoh index.tsx

import { createFileRoute } from "@tanstack/react-router";
import { AdsterraBanner } from "@/components/AdsterraBanner";

const MOVIE = {
  title: "สไปเดอร์-แมน: แบรนด์ นิว เดย์",
  originalTitle: "Spider-Man: Brand New Day",
  year: 2026,
  releaseDate: "28 กรกฎาคม 2026",
  runtime: 145,
  director: "เดสติน แดเนียล เครตตัน",
  budget: "275,000,000 ดอลลาร์สหรัฐ",
  revenue: "อยู่ระหว่างการเข้าฉาย",
  status: "หลังการถ่ายทำ (Post-Production)",
  genres: ["บู๊", "ผจญภัย", "นิยายวิทยาศาสตร์"],
  imdbScore: 8.4,
  poster: "https://image.tmdb.org/t/p/w780/6Q21yptoOCUq4ErwVncesLPVplb.jpg",
  backdrop: "https://image.tmdb.org/t/p/original/vjMvFSmGUxEtqVdaZgvFee9XkZl.jpg",
  trailerKey: "YSzs7f8W7ik",
  imdbId: "tt22084616",
  cast: [
    { name: "ทอม ฮอลแลนด์", character: "Peter Parker / Spider-Man", profile: "https://image.tmdb.org/t/p/w300/xKBAaPIa1c7tzZD3Y0MhBLv4hPE.jpg" },
    { name: "เซนเดยา", character: "MJ", profile: "https://image.tmdb.org/t/p/w300/1qup8tSt95HLbcy2c2xrx4iJNxv.jpg" },
    { name: "Sadie Sink", character: "ตัวละครยังไม่เปิดเผย", profile: "https://image.tmdb.org/t/p/w300/fV0KHJcK3fYX2acMorDUf1Uv9mY.jpg" },
    { name: "Jacob Batalon", character: "Ned Leeds", profile: "https://image.tmdb.org/t/p/w300/53YhaL4xw4Sb1ssoHkeSSBaO29c.jpg" },
    { name: "จอน เบิร์นธัล", character: "Frank Castle / Punisher", profile: "https://image.tmdb.org/t/p/w300/o0t6EVkJOrFAjESDilZUlf46IbQ.jpg" },
    { name: "ไมเคิล มันโด", character: "Mac Gargan / Scorpion", profile: "https://image.tmdb.org/t/p/w300/gvM2wG66bjEpiirdeQdyG9EzUfv.jpg" },
    { name: "มาร์ก รัฟฟาโล", character: "Bruce Banner / Hulk", profile: "https://image.tmdb.org/t/p/w300/5GilHMOt5PAQh6rlUKZzGmaKEI7.jpg" },
    { name: "Marvin Jones III", character: "Lonnie Lincoln / Tombstone", profile: "https://image.tmdb.org/t/p/w300/nS4X8TP3idFsxDdV9UqTRbz585g.jpg" },
  ],
};

const SEO_TITLE = '~(ดูหนังใหม่‼️)▷ "สไปเดอร์-แมน: แบรนด์ นิว เดย์" (2026) เต็มเรื่อง พากย์ไทย ดูฟรี! - HD';
const SEO_DESC = 'คุณกำลังมองหา "สไปเดอร์-แมน: แบรนด์ นิว เดย์" (2026) เต็มเรื่อง พากย์ไทย อยู่ใช่ไหม? อ่านบทวิเคราะห์เชิงลึก ข้อมูลอัปเดตล่าสุด และรายละเอียดภาพยนตร์ที่คุณไม่ควรพลาดที่นี่';

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [
      { title: SEO_TITLE },
      { name: "description", content: SEO_DESC },
      { property: "og:title", content: SEO_TITLE },
      { property: "og:description", content: SEO_DESC },
      { property: "og:type", content: "article" },
      { property: "og:image", content: MOVIE.backdrop },
      { name: "twitter:title", content: SEO_TITLE },
      { name: "twitter:description", content: SEO_DESC },
      { name: "twitter:image", content: MOVIE.backdrop },
    ],
    links: [{ rel: "canonical", href: "/" }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Movie",
          name: MOVIE.title,
          alternateName: MOVIE.originalTitle,
          image: MOVIE.poster,
          datePublished: "2026-07-28",
          director: { "@type": "Person", name: MOVIE.director },
          aggregateRating: {
            "@type": "AggregateRating",
            ratingValue: MOVIE.imdbScore,
            bestRating: 10,
            ratingCount: 1250,
          },
        }),
      },
    ],
  }),
  component: MoviePage,
});

function MoviePage() {
  return (
    <article className="mx-auto max-w-6xl px-6 pb-12">
      {/* AD TOP */}
      <div id="ad-top" className="my-8 flex justify-center">
        <AdsterraBanner adKey="2be8a1d2733367169b56716d1186e164" width={468} height={60} />
      </div>

      {/* KICKER */}
      <div className="mt-6 text-center">
        <p className="text-[11px] tracking-[0.4em] uppercase text-accent">
          บทวิเคราะห์พิเศษ · มหากาพย์ซูเปอร์ฮีโร่แห่งปี
        </p>
      </div>

      {/* TITLE */}
      <h1 className="serif mt-4 text-center text-4xl md:text-6xl lg:text-7xl leading-[1.05] font-black">
        {MOVIE.title}
      </h1>
      <p className="serif mt-3 text-center text-lg md:text-xl italic text-muted-foreground">
        {MOVIE.originalTitle} ({MOVIE.year})
      </p>

      {/* MASTHEAD DIVIDER */}
      <div className="mx-auto mt-6 h-px w-24 bg-[var(--color-gold)]" />
      <p className="mt-6 text-center text-sm text-muted-foreground max-w-2xl mx-auto">
        โดยกองบรรณาธิการ SiamReel · เผยแพร่ {new Date().toLocaleDateString("th-TH")} · อ่าน 8 นาที
      </p>

      {/* HERO BACKDROP */}
      <figure className="mt-10 overflow-hidden rounded-sm border">
        <img src={MOVIE.backdrop} alt={MOVIE.title} className="w-full h-auto object-cover" />
        <figcaption className="px-4 py-3 text-xs text-muted-foreground bg-surface tracking-wide">
          ภาพเบื้องหลังอย่างเป็นทางการจาก Marvel Studios / Columbia Pictures
        </figcaption>
      </figure>

      {/* RATING BAR */}
      <div className="mt-10 grid grid-cols-2 md:grid-cols-4 gap-px rule-top rule-bottom bg-[var(--color-rule)]">
        <RatingCell label="IMDb" value={MOVIE.imdbScore.toFixed(1)} suffix="/10" />
        <RatingCell label="ความยาว" value={`${MOVIE.runtime}`} suffix=" นาที" />
        <RatingCell label="สถานะ" value="กำลังจะเข้าฉาย" />
        <RatingCell label="แนว" value={MOVIE.genres.join(" · ")} />
      </div>

      {/* MAIN ARTICLE */}
      <section className="mt-14 grid md:grid-cols-[1fr_320px] gap-12">
        <div className="serif text-[1.08rem] leading-[1.85] text-foreground/95 space-y-6">
          <p className="dropcap">
            เมื่อ Marvel Studios ประกาศชื่อภาพยนตร์อย่างเป็นทางการว่า “Spider-Man: Brand New Day”
            แฟน ๆ ทั่วโลกต่างเข้าใจในทันทีว่านี่ไม่ใช่เพียงภาคต่อ หากคือการเริ่มต้นบทใหม่ของ
            ปีเตอร์ ปาร์คเกอร์ หลังเหตุการณ์อันหนักหน่วงใน No Way Home ที่ทำให้โลกทั้งใบลืมตัวตนของเขา
            บทวิเคราะห์นี้จะพาผู้อ่านสำรวจทุกมุมของโปรเจกต์ที่ทะเยอทะยานที่สุดในเฟส 6 ของ MCU
          </p>

          <p>
            การเลือก <strong>{MOVIE.director}</strong> เจ้าของผลงาน Shang-Chi และซีรีส์ Just Mercy
            มานั่งเก้าอี้ผู้กำกับสะท้อนทิศทางใหม่ของแฟรนไชส์อย่างชัดเจน — เครตตันเป็นที่รู้จักในเรื่อง
            การจัดวางอารมณ์ตัวละครที่ละเอียดอ่อน และการผสมผสานฉากแอ็กชันเข้ากับดราม่าครอบครัว
            ซึ่งเป็นหัวใจของสไปเดอร์-แมนในเวอร์ชันที่ทอม ฮอลแลนด์ ตีความมาตลอดสามภาคที่ผ่านมา
          </p>

          {/* AD NATIVE */}
          <div id="ad-native" className="my-8 flex justify-center">
            <AdsterraBanner adKey="fc3fbf4c0a53c80cd144db3296efb81f" width={300} height={250} />
          </div>

          <p>
            งบประมาณการสร้างสูงถึง <strong>{MOVIE.budget}</strong> ทำให้ Brand New Day
            กลายเป็นหนึ่งในภาพยนตร์สไปเดอร์-แมนที่ลงทุนสูงที่สุดในประวัติศาสตร์
            แหล่งข่าววงในระบุว่าฉากสำคัญของเรื่องถ่ายทำในย่านแมนฮัตตันตอนล่างจริง
            พร้อมการปิดถนนต่อเนื่องหลายสัปดาห์เพื่อสร้างฉากไล่ล่าที่มีทั้ง Punisher ของ จอน เบิร์นธัล
            และการเปิดตัว Tombstone ตัวร้ายใหม่ที่แฟนคอมมิกรอคอยมานาน
          </p>

          <p>
            การกลับมาของ <strong>เซนเดยา</strong> ในบท MJ และ <strong>Jacob Batalon</strong> ในบท Ned
            ยืนยันว่าแม้โลกจะลืม ปีเตอร์ ปาร์คเกอร์ แต่หนังยังคงยึดโยงกับความสัมพันธ์เดิม
            ผ่านมุมมองใหม่ นักเขียนบท Chris McKenna และ Erik Sommers
            ที่กลับมาร่วมงานอีกครั้ง ให้สัมภาษณ์ว่าเรื่องราวจะสำรวจความหมายของ “การเริ่มต้นใหม่”
            อย่างแท้จริง เมื่อฮีโร่ต้องสร้างชื่อเสียงและมิตรภาพขึ้นมาจากศูนย์
          </p>

          <p>
            ที่น่าสนใจไม่แพ้กันคือการปรากฏตัวของ <strong>มาร์ก รัฟฟาโล</strong> ในบท Bruce Banner / Hulk
            ซึ่งเป็นสัญญาณชัดเจนว่าเนื้อเรื่องจะเชื่อมโยงกับเหตุการณ์ในหนัง Avengers ภาคใหม่
            การจับคู่ Spidey กับ Hulk บนจอใหญ่ครั้งแรก อาจกลายเป็นหนึ่งในช่วงเวลาที่แฟน ๆ
            พูดถึงมากที่สุดของทั้งปี 2026 และเป็นการเตรียมพร้อมสู่ Avengers: Doomsday
          </p>

          <p>
            ในด้านภาพ ผู้กำกับภาพ Bill Pope (The Matrix, Baby Driver) เข้ามาร่วมทีมเป็นครั้งแรก
            ซึ่งคาดการณ์ได้ว่าโทนภาพจะเน้นแสงสัจนิยมมากขึ้น ต่างจากภาคก่อน ๆ ที่ใช้โทน CGI จัดจ้าน
            เบื้องหลังจากกองถ่ายเผยให้เห็นการใช้ Practical Effect ผสม LED Volume คล้ายที่ใช้ใน The Mandalorian
            ทำให้ฉากไต่ตึกและการเหวี่ยงตัวมีน้ำหนักและมิติเหมือนจริงกว่าเดิม
          </p>

          <p>
            สำหรับผู้ชมชาวไทย <strong>{MOVIE.title}</strong> มีกำหนดเข้าฉายในโรงภาพยนตร์ทั่วประเทศ
            วันที่ <strong>{MOVIE.releaseDate}</strong> พร้อมกันทั่วโลก โดยจะมีทั้งเวอร์ชันซับไทยและพากย์ไทย
            ในระบบ IMAX, 4DX และ ScreenX ตามโรงภาพยนตร์ที่ร่วมรายการ ราคาบัตรเริ่มต้นที่ 220 บาท
            บทสรุปคือ Brand New Day มีแนวโน้มจะเป็นภาพยนตร์ซูเปอร์ฮีโร่ที่สมบูรณ์ที่สุดของปี
            และเป็นการเปิดฉากใหม่ที่แท้จริงของสไปเดอร์-แมนในจักรวาล MCU
          </p>
        </div>

        {/* SIDEBAR: INFO SHEET */}
        <aside className="md:sticky md:top-8 h-fit">
          <div className="border rule-top rule-bottom bg-surface">
            <div className="px-5 py-3 border-b text-[10px] tracking-[0.32em] uppercase text-muted-foreground">
              Movie Info Sheet
            </div>
            <img src={MOVIE.poster} alt={MOVIE.title} className="w-full" />
            <dl className="divide-y divide-[var(--color-rule)] text-sm">
              <InfoRow label="ผู้กำกับ" value={MOVIE.director} />
              <InfoRow label="งบประมาณ" value={MOVIE.budget} />
              <InfoRow label="รายได้" value={MOVIE.revenue} />
              <InfoRow label="วันเข้าฉาย" value={MOVIE.releaseDate} />
              <InfoRow label="ความยาว" value={`${MOVIE.runtime} นาที`} />
              <InfoRow label="สถานะ" value={MOVIE.status} />
              <InfoRow label="IMDb" value={`★ ${MOVIE.imdbScore.toFixed(1)} / 10`} />
            </dl>
          </div>
        </aside>
      </section>

      {/* CAST GRID */}
      <section className="mt-20">
        <div className="flex items-baseline justify-between rule-bottom pb-3">
          <h2 className="serif text-3xl md:text-4xl font-black">นักแสดงนำ</h2>
          <span className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground">Cast · เครดิตทางการ</span>
        </div>
        <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-6">
          {MOVIE.cast.map((c) => (
            <figure key={c.name} className="group">
              <div className="aspect-[3/4] overflow-hidden bg-surface-2 border">
                <img
                  src={c.profile}
                  alt={c.name}
                  loading="lazy"
                  className="h-full w-full object-cover grayscale group-hover:grayscale-0 transition duration-500"
                />
              </div>
              <figcaption className="mt-3">
                <div className="serif text-lg leading-tight">{c.name}</div>
                <div className="text-xs text-muted-foreground italic mt-1">รับบท {c.character}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </section>

      {/* TRAILER */}
      <section className="mt-20">
        <div className="flex items-baseline justify-between rule-bottom pb-3">
          <h2 className="serif text-3xl md:text-4xl font-black">ตัวอย่างภาพยนตร์</h2>
          <span className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground">Official Trailer</span>
        </div>
        <div className="mt-6 aspect-video w-full overflow-hidden border">
          <iframe
            src={`https://www.youtube.com/embed/${MOVIE.trailerKey}`}
            title={`${MOVIE.title} - Official Trailer`}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
            className="h-full w-full"
          />
        </div>
      </section>

      {/* AD BOTTOM */}
      <div id="ad-bottom" className="mt-16 flex justify-center">
        <AdsterraBanner adKey="f85d830cba2938f185c23da2145c2d8a" width={728} height={90} />
      </div>

      {/* Sidebar-size banner (160x300) */}
      <div id="ad-side" className="mt-8 flex justify-center">
        <AdsterraBanner adKey="caaf49b4785e33c9d38ee40b35258ce0" width={160} height={300} />
      </div>
    </article>
  );
}

function RatingCell({ label, value, suffix }: { label: string; value: string; suffix?: string }) {
  return (
    <div className="bg-background px-4 py-5 text-center">
      <div className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground">{label}</div>
      <div className="serif mt-2 text-xl md:text-2xl">
        <span className="text-gold" style={{ color: "var(--color-gold)" }}>{value}</span>
        {suffix && <span className="text-muted-foreground text-sm ml-1">{suffix}</span>}
      </div>
    </div>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div className="grid grid-cols-[110px_1fr] gap-3 px-5 py-3">
      <dt className="text-[10px] tracking-[0.24em] uppercase text-muted-foreground pt-1">{label}</dt>
      <dd className="serif">{value}</dd>
    </div>
  );
}