export default function Home() {
  const cars = [
    { name: "Compact", price: "¥8,000 / day", desc: "Best for solo travelers and couples." },
    { name: "Standard", price: "¥12,000 / day", desc: "Comfortable choice for small families." },
    { name: "SUV", price: "¥15,000 / day", desc: "Spacious and ideal for Hokkaido road trips." },
    { name: "Luxury Van", price: "¥15,000 / day", desc: "Premium comfort for groups and families." },
  ];

  return (
    <main
      style={{
        fontFamily: "Arial, sans-serif",
        color: "#111",
        backgroundColor: "#fff",
        lineHeight: 1.6,
      }}
    >
      <section
        style={{
          padding: "72px 24px 56px",
          textAlign: "center",
          background: "#f7f7f7",
        }}
      >
        <div style={{ maxWidth: 960, margin: "0 auto" }}>
          <p
            style={{
              margin: 0,
              fontSize: 14,
              letterSpacing: 1,
              textTransform: "uppercase",
              color: "#666",
            }}
          >
            AIZU Car Rental
          </p>
          <h1
            style={{
              fontSize: 44,
              margin: "16px 0 16px",
              lineHeight: 1.15,
            }}
          >
            Sapporo Car Rental for Overseas Travelers
          </h1>
          <p
            style={{
              maxWidth: 760,
              margin: "0 auto 28px",
              fontSize: 18,
              color: "#444",
            }}
          >
            Reliable local car rental service with free pick-up and drop-off in
            Sapporo City and New Chitose Airport.
          </p>

          <div
            style={{
              display: "flex",
              gap: 12,
              justifyContent: "center",
              flexWrap: "wrap",
            }}
          >
            <a
              href="#cars"
              style={{
                padding: "14px 22px",
                backgroundColor: "#111",
                color: "#fff",
                textDecoration: "none",
                borderRadius: 8,
                fontWeight: 700,
              }}
            >
              View Cars
            </a>
            <a
              href="#contact"
              style={{
                padding: "14px 22px",
                backgroundColor: "#fff",
                color: "#111",
                textDecoration: "none",
                borderRadius: 8,
                border: "1px solid #ccc",
                fontWeight: 700,
              }}
            >
              Contact Us
            </a>
          </div>
        </div>
      </section>

      <section style={{ padding: "56px 24px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <h2 style={{ fontSize: 30, marginBottom: 24 }}>Why Choose AIZU</h2>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
              gap: 16,
            }}
          >
            {[
              "Free pick-up & drop-off in Sapporo City",
              "Free pick-up & drop-off at New Chitose Airport",
              "Easy booking for overseas travelers",
              "Flexible vehicle choices for different trips",
            ].map((item) => (
              <div
                key={item}
                style={{
                  border: "1px solid #e5e5e5",
                  borderRadius: 12,
                  padding: 20,
                  backgroundColor: "#fff",
                }}
              >
                <p style={{ margin: 0, fontWeight: 600 }}>{item}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id="cars" style={{ padding: "16px 24px 56px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <h2 style={{ fontSize: 30, marginBottom: 24 }}>Our Cars</h2>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
              gap: 18,
            }}
          >
            {cars.map((car) => (
              <div
                key={car.name}
                style={{
                  border: "1px solid #e5e5e5",
                  borderRadius: 16,
                  padding: 22,
                  backgroundColor: "#fff",
                }}
              >
                <div
                  style={{
                    height: 150,
                    borderRadius: 12,
                    backgroundColor: "#f2f2f2",
                    marginBottom: 18,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    color: "#888",
                    fontSize: 14,
                  }}
                >
                  Car Image
                </div>

                <h3 style={{ margin: "0 0 8px", fontSize: 22 }}>{car.name}</h3>
                <p style={{ margin: "0 0 10px", color: "#666" }}>{car.desc}</p>
                <p style={{ margin: 0, fontWeight: 700 }}>{car.price}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: "16px 24px 56px", backgroundColor: "#fafafa" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <h2 style={{ fontSize: 30, marginBottom: 24 }}>Service Information</h2>

          <div
            style={{
              display: "grid",
              gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
              gap: 18,
            }}
          >
            <div
              style={{
                border: "1px solid #e5e5e5",
                borderRadius: 16,
                padding: 24,
                backgroundColor: "#fff",
              }}
            >
              <h3 style={{ marginTop: 0 }}>Pick-up Locations</h3>
              <ul style={{ paddingLeft: 18, marginBottom: 0 }}>
                <li>Sapporo City</li>
                <li>New Chitose Airport</li>
              </ul>
            </div>

            <div
              style={{
                border: "1px solid #e5e5e5",
                borderRadius: 16,
                padding: 24,
                backgroundColor: "#fff",
              }}
            >
              <h3 style={{ marginTop: 0 }}>Rental Policy</h3>
              <ul style={{ paddingLeft: 18, marginBottom: 0 }}>
                <li>Rental is calculated in 24-hour units</li>
                <li>Up to 4 extra hours: ¥2,000 per hour</li>
                <li>More than 4 hours: counted as one full day</li>
              </ul>
            </div>

            <div
              style={{
                border: "1px solid #e5e5e5",
                borderRadius: 16,
                padding: 24,
                backgroundColor: "#fff",
              }}
            >
              <h3 style={{ marginTop: 0 }}>Extras</h3>
              <ul style={{ paddingLeft: 18, marginBottom: 0 }}>
                <li>Child Seat: ¥1,000 / day</li>
                <li>ETC Card: ¥500 / day</li>
                <li>ETC Deposit: ¥20,000</li>
                <li>Snow Tires: Included</li>
              </ul>
            </div>
          </div>
        </div>
      </section>

      <section id="contact" style={{ padding: "56px 24px" }}>
        <div style={{ maxWidth: 900, margin: "0 auto", textAlign: "center" }}>
          <h2 style={{ fontSize: 30, marginBottom: 16 }}>Book Your Car Today</h2>
          <p style={{ color: "#555", fontSize: 18, marginBottom: 24 }}>
            Contact us by email or WhatsApp for reservation inquiries.
          </p>

          <div
            style={{
              display: "flex",
              gap: 12,
              justifyContent: "center",
              flexWrap: "wrap",
            }}
          >
            <a
              href="mailto:your@email.com"
              style={{
                padding: "14px 22px",
                backgroundColor: "#111",
                color: "#fff",
                textDecoration: "none",
                borderRadius: 8,
                fontWeight: 700,
              }}
            >
              Email Us
            </a>

            <a
              href="https://wa.me/810000000000"
              style={{
                padding: "14px 22px",
                backgroundColor: "#25D366",
                color: "#fff",
                textDecoration: "none",
                borderRadius: 8,
                fontWeight: 700,
              }}
            >
              WhatsApp
            </a>
          </div>

          <p style={{ marginTop: 22, fontSize: 14, color: "#666" }}>
            Replace the email address and WhatsApp link with your real contact details.
          </p>
        </div>
      </section>
    </main>
  );
}