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

async function updateContactLayout() {
  try {
    const contactContentHTML = `
      <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(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-bottom: 40px;">
        <!-- Phone -->
        <div style="background: #f8f9fa; padding: 32px 24px; border-radius: 12px; text-align: center; border: 2px solid #e1e8ed; transition: all 0.3s;">
          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
            <i class="bi bi-telephone" style="font-size: 28px; color: white"></i>
          </div>
          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: #2d3436;">Phone</h3>
          <p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">Give us a call</p>
          <a href="tel:+1234567890" style="color: #667eea; font-weight: 600; text-decoration: none; font-size: 16px">+1 (234) 567-8900</a>
        </div>

        <!-- Email -->
        <div style="background: #f8f9fa; padding: 32px 24px; border-radius: 12px; text-align: center; border: 2px solid #e1e8ed; transition: all 0.3s;">
          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
            <i class="bi bi-envelope" style="font-size: 28px; color: white"></i>
          </div>
          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: #2d3436;">Email</h3>
          <p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">Send us an email</p>
          <a href="mailto:support@skyartshop.com" style="color: #667eea; font-weight: 600; text-decoration: none; font-size: 16px">support@skyartshop.com</a>
        </div>

        <!-- Location -->
        <div style="background: #f8f9fa; padding: 32px 24px; border-radius: 12px; text-align: center; border: 2px solid #e1e8ed; transition: all 0.3s;">
          <div style="width: 64px; height: 64px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;">
            <i class="bi bi-geo-alt" style="font-size: 28px; color: white"></i>
          </div>
          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: #2d3436;">Location</h3>
          <p style="color: #636e72; margin: 0 0 8px 0; font-size: 15px">Visit our shop</p>
          <p style="color: #667eea; font-weight: 600; margin: 0; font-size: 16px; line-height: 1.6;">
            123 Creative Street<br>Art District, CA 90210
          </p>
        </div>
      </div>

      <!-- Business Hours -->
      <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 40px; margin-top: 40px; text-align: center; color: white;">
        <h3 style="font-size: 24px; font-weight: 600; margin-bottom: 24px;">Business Hours</h3>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; max-width: 700px; margin: 0 auto;">
          <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; backdrop-filter: blur(10px);">
            <p style="margin: 0; font-weight: 500; opacity: 0.95; font-size: 16px;">Monday - Friday</p>
            <p style="margin: 8px 0 0 0; font-size: 20px; font-weight: 700;">9:00 AM - 6:00 PM</p>
          </div>
          <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; backdrop-filter: blur(10px);">
            <p style="margin: 0; font-weight: 500; opacity: 0.95; font-size: 16px;">Saturday</p>
            <p style="margin: 8px 0 0 0; font-size: 20px; font-weight: 700;">10:00 AM - 4:00 PM</p>
          </div>
          <div style="background: rgba(255, 255, 255, 0.1); padding: 20px; border-radius: 8px; backdrop-filter: blur(10px);">
            <p style="margin: 0; font-weight: 500; opacity: 0.95; font-size: 16px;">Sunday</p>
            <p style="margin: 8px 0 0 0; font-size: 20px; font-weight: 700;">Closed</p>
          </div>
        </div>
      </div>
    `;

    const contactDelta = {
      ops: [
        { insert: 'Get In Touch', attributes: { header: 2 } },
        { insert: '\nHave questions or feedback? We\'d love to hear from you. Send us a message and we\'ll respond as soon as possible.\n\n' },
        { insert: 'Contact Information', attributes: { header: 2 } },
        { insert: '\n' },
        { insert: 'Phone', attributes: { header: 3 } },
        { insert: '\nGive us a call: ' },
        { insert: '+1 (234) 567-8900', attributes: { bold: true, link: 'tel:+1234567890' } },
        { insert: '\n\n' },
        { insert: 'Email', attributes: { header: 3 } },
        { insert: '\nSend us an email: ' },
        { insert: 'support@skyartshop.com', attributes: { bold: true, link: 'mailto:support@skyartshop.com' } },
        { insert: '\n\n' },
        { insert: 'Location', attributes: { header: 3 } },
        { insert: '\n' },
        { insert: '123 Creative Street\nArt District, CA 90210', attributes: { bold: true } },
        { insert: '\n\n' },
        { insert: 'Business Hours', attributes: { header: 2 } },
        { insert: '\n' },
        { insert: 'Monday - Friday: 9:00 AM - 6:00 PM', attributes: { list: 'bullet' } },
        { insert: '\n' },
        { insert: 'Saturday: 10:00 AM - 4:00 PM', attributes: { list: 'bullet' } },
        { insert: '\n' },
        { insert: 'Sunday: Closed', attributes: { list: 'bullet' } },
        { insert: '\n\nFill out the contact form on our website and we\'ll get back to you within 24 hours\n' }
      ]
    };

    await db.query(
      `UPDATE pages SET 
        content = $1, 
        pagecontent = $2,
        updatedat = NOW()
      WHERE slug = 'contact'`,
      [JSON.stringify(contactDelta), contactContentHTML]
    );

    console.log('✅ Contact page layout updated successfully!');
    process.exit(0);
  } catch (error) {
    console.error('❌ Error:', error);
    process.exit(1);
  }
}

updateContactLayout();