const db = require("./config/database");

const organizedContactHTML = `
      <div style="text-align: center; margin-bottom: 48px;">
        <h2 style="font-size: 2rem; font-weight: 700; color: #2d3436; margin-bottom: 12px;">
          Our Contact Information
        </h2>
        <p style="font-size: 1rem; color: #636e72">
          Reach out to us through any of these channels
        </p>
      </div>

      <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px;">
        <!-- Phone Card -->
        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 32px; border-radius: 16px; text-align: center; color: white; box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);">
          <div style="font-size: 48px; margin-bottom: 16px;">
            <i class="bi bi-telephone-fill"></i>
          </div>
          <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px;">Phone</h3>
          <p style="font-size: 1rem; opacity: 0.9; margin: 0;">+1 (555) 123-4567</p>
        </div>

        <!-- Email Card -->
        <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); padding: 32px; border-radius: 16px; text-align: center; color: white; box-shadow: 0 8px 24px rgba(240, 147, 251, 0.3);">
          <div style="font-size: 48px; margin-bottom: 16px;">
            <i class="bi bi-envelope-fill"></i>
          </div>
          <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px;">Email</h3>
          <p style="font-size: 1rem; opacity: 0.9; margin: 0;">contact@skyartshop.com</p>
        </div>

        <!-- Location Card -->
        <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); padding: 32px; border-radius: 16px; text-align: center; color: white; box-shadow: 0 8px 24px rgba(79, 172, 254, 0.3);">
          <div style="font-size: 48px; margin-bottom: 16px;">
            <i class="bi bi-geo-alt-fill"></i>
          </div>
          <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 12px;">Location</h3>
          <p style="font-size: 1rem; opacity: 0.9; margin: 0;">123 Art Street, Creative City, CC 12345</p>
        </div>
      </div>

      <!-- Business Hours -->
      <div style="background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); padding: 40px; border-radius: 16px; text-align: center; color: white; box-shadow: 0 8px 24px rgba(250, 112, 154, 0.3);">
        <h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 24px;">Business Hours</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto;">
          <div>
            <p style="font-weight: 600; margin-bottom: 8px;">Monday - Friday</p>
            <p style="opacity: 0.95; margin: 0;">9:00 AM - 6:00 PM</p>
          </div>
          <div>
            <p style="font-weight: 600; margin-bottom: 8px;">Saturday</p>
            <p style="opacity: 0.95; margin: 0;">10:00 AM - 4:00 PM</p>
          </div>
          <div>
            <p style="font-weight: 600; margin-bottom: 8px;">Sunday</p>
            <p style="opacity: 0.95; margin: 0;">Closed</p>
          </div>
        </div>
      </div>
`;

async function restoreContactLayout() {
  try {
    const result = await db.query(
      `UPDATE pages 
             SET pagecontent = $1, 
                 content = $1
             WHERE slug = 'contact'
             RETURNING id, title`,
      [organizedContactHTML]
    );

    if (result.rows.length > 0) {
      console.log("✓ Contact page layout restored successfully");
      console.log(`  Page: ${result.rows[0].title}`);
      console.log(
        `  Content length: ${organizedContactHTML.length} characters`
      );
    } else {
      console.log("✗ Contact page not found");
    }

    process.exit(0);
  } catch (error) {
    console.error("Error restoring contact layout:", error);
    process.exit(1);
  }
}

restoreContactLayout();